一、前置知识
1、注册帐号，获取appid。
2、微信开发者工具：调试小程序、公众号
3、与普通网页开发的区别：
（1）运行环境：网页开发渲染与脚本在同一个线程上，而小程序分为渲染层和逻辑层。逻辑层运行在jscore中，并没有DOM和BOM。jscore环境与node也不同，所以也无法使用一些npm包。
（2）兼容性：
ios，安卓，小程序开发者工具3种环境，逻辑层与渲染层各不相同。
运行环境
（3）整个小程序所有分包大小不超过 8M；单个分包不可超过2M
（4）开发流程：开发版本 ---> 体验版本 ---> 审核中版本 ---> 线上版本 ---> 发布
ps：若用户未主动删除小程序，发布后最差24小时下发新版本（解决办法：可通过启动时检查更新）
二、小程序结构及配置
1、项目结构
--images
--pages
--index
--index.js
--index.json
--index.wxml
--index.wxss
--logs
--index.js
--index.json
--index.wxml
--index.wxss
--app.js
--app.json
--app.wxss
--project.config.json
2、配置文件
（1）project.config.json
开发者工具自动生成的一个配置文件，和开发者工具中【详情】的配置一样，一般不做更改。官方文档
（2）app.json：全局配置文件。官方文档
举个栗子
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "XX小程序",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#a5a5a5",
"selectedColor": "#f63232",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/course.png",
"selectedIconPath": "images/course_red.png",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"iconPath": "images/study.png",
"selectedIconPath": "images/study_red.png",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
],
"sitemapLocation": "sitemap.json"
}
（3）页面配置：附上官方文档
每个页面都可以有.json文件，页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。页面的window属性会覆盖全局window属性。
{
"usingComponents": {
"ErrorPage": "./components/ErrorPage/index",
"PPTLive": "./components/PPTLive/index",
"Classroom": "./components/Classroom/index",
"Loading": "./components/Loading/index"
},
"disableScroll": true,
"pageOrientation": "landscape",
"navigationStyle": "custom"
}
三、小程序开发
1、宿主环境
宿主环境
- 通信：渲染层和逻辑层分别是2个线程管理。小程序的每个界面都是一个webview线程。渲染层和逻辑层通过微信客户端做中转。
- 数据驱动：通过native
2、程序
// 程序构造函数。app实例是单例对象， js中可以通过getApp() 获取该对象
App({
onLaunch: function(options) {}, // 小程序初始化完成时触发，only once
onShow: function(options) {}, // 小程序启动，或从后台进入前台显示时触发
onHide: function() {}, // 前台进入后台触发
onError: function(msg) {}, // 脚本错误或api吊用失败时触发，带上错误信息
globalData: 'I am global data' // 全局data
})
- 因为小程序有多种渠道打开，所以onLaunch和onShow可以带options参数，包含path，query，scene，shareTicket等。
- globalData：切换webview时，还是公用一个jscore，因为App是单例，所以可以通过app实例获取全局数据。
3、页面
- step1：创建js、json、wxml、wxss4个文件
- step2：app.json中声明页面路径
- step3：js文件中使用个页面构造器Page()
Page({
data: { text: "This is page data." },
onLoad: function(options) { }, // 页面首次加载，only once，早于onShow和onReady，options是
onShow: function() { }, // 页面每次加载
onReady: function() { }, // 页面初次渲染完成
onHide: function() { }, // 页面隐藏
onUnload: function() { }, // 页面卸载
onPullDownRefresh: function() { },
onReachBottom: function() { },
onShareAppMessage: function () { },
onPageScroll: function() { }
})
还可以添加任意的函数或数据，在Page实例的其他函数中用 this 可以访问
-
step4：wxml文件中写页面结构
1）标签略有不同：view、text、image、button、block等等
2）数据绑定： {{}}
3）wx:if, wx:for -
step5：wxss中写样式
1）单位：rpx（responsive pixel）；以iphone6换算，1px=2rpx -
进阶tips：wxs (官方文档)
1）WeiXin Script运行环境与js隔离，ios中比js快2~20倍，android中差不多
2）运行在视图层，适用于频繁交互场景：如滑动吸顶等
4、组件：小程序提供了很多组件，scroll-view，swiper，picker，live-player，web-view等等
- 原生组件：层级第二高，其他组件的无法盖过原生组件。z-index无效。camera、canvas、input、live-player、live-pusher、map、textarea、video。
- 层级第一高：cover-image、cover-view
5、自定义组件：
Component({
behaviors: [], // 类似mixins
properties: { // 页面传值
myProperty: { // 属性名
type: String,
value: ''
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 在组件实例进入页面节点树时执行
moved: function () { }, // 在组件实例被移动到节点树另一个位置时执行
detached: function () { }, // 在组件实例被从页面节点树移除时执行
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { }, //在组件在视图层布局完成后执行
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function(){
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({
'A[0].B': 'myPrivateData'
})
}
}
})
6、api：宿主环境提供的一系列功能 附上官方文档
- 基础： 系统、调试等方面的api
- 路由：页面间的跳转
1）wx.switchTab
2）wx.reLaunch
3）wx.redirectTo
4）wx.navigateTo
4）wx.navigateBack - 界面：通用的toast、loading、导航栏、动画等
- 网络：wx.request等
- 设备能力：蓝牙、扫码、屏幕
7、事件
- 渲染层传递给逻辑层
- 常用：点击、触摸、长按等
<!-- page.wxml -->
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
// page.js
Page({
tapName: function(event) {
console.log(event)
}
})
四、项目介绍（wepy框架）
- 风格类似vue，上手快，开发简单方便
- 支持第三方npm包
- 优化：单文件、polyfill（es6）、样式编译器
网友评论