微信小程序这个前端系统分为逻辑层和视图层,逻辑层实现数据的加工和处理,与html类似,微信小程序的逻辑层由javascript编写
逻辑层将数据进行处理后发送视图层,同时接受视图层的时间反馈,为了方便微信小程序的开发,官方在javascript的基础上进行了一些封装和修改,主要有:
1、提供app和page方法,用来进行程序和页面的注册
关于app小程序注册文档查看:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
page页面注册文档查看:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
2、提供丰富的api,如扫一扫,支付等
3、每个页面有独特的作用域,并提供模块化功能
4、由于框架并不是在浏览器中运行,所以Javascript在web中的一些能力无法使用,如不能访问document和window等javascript对象
5、开发者写的所有代码最终将被打包成一份JavaScript并在小程序启动的时候运行,直到小程序销毁
App(Object object)
注册小程序。接受一个 Object
参数,其指定小程序的生命周期回调等。
App() 必须在 app.js
中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
onLaunch | function | 否 | 生命周期回调——监听小程序初始化。 | |
onShow | function | 否 | 生命周期回调——监听小程序启动或切前台。 | |
onHide | function | 否 | 生命周期回调——监听小程序切后台。 | |
onError | function | 否 | 错误监听函数。 | |
onPageNotFound | function | 否 | 页面不存在监听函数。 | |
其他 | any | 否 | 开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问 |
关于小程序前后台的定义和小程序的运行机制,请参考运行机制章节。
示例代码
App({
onLaunch(options) {
// Do something initial when launch.
},
onShow(options) {
// Do something when show.
},
onHide() {
// Do something when hide.
},
onError(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
Page(Object object)
注册小程序中的一个页面。接受一个 Object
类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
data | Object | 页面的初始数据 | ||
onLoad | function | 生命周期回调—监听页面加载 | ||
onShow | function | 生命周期回调—监听页面显示 | ||
onReady | function | 生命周期回调—监听页面初次渲染完成 | ||
onHide | function | 生命周期回调—监听页面隐藏 | ||
onUnload | function | 生命周期回调—监听页面卸载 | ||
onPullDownRefresh | function | 监听用户下拉动作 | ||
onReachBottom | function | 页面上拉触底事件的处理函数 | ||
onShareAppMessage | function | 用户点击右上角转发 | ||
onPageScroll | function | 页面滚动触发事件的处理函数 | ||
onResize | function | 页面尺寸改变时触发,详见 响应显示区域变化 | ||
onTabItemTap | function | 当前是 tab 页时,点击 tab 时触发 | ||
其他 | any | 开发者可以添加任意的函数或数据到 Object 参数中,在页面的函数中用 this 可以访问 |
示例代码
// index.js
Page({
data: {
text: 'This is page data.'
},
onLoad(options) {
// Do some initialize when page load.
},
onReady() {
// Do something when page ready.
},
onShow() {
// Do something when page show.
},
onHide() {
// Do something when page hide.
},
onUnload() {
// Do something when page close.
},
onPullDownRefresh() {
// Do something when pull down.
},
onReachBottom() {
// Do something when page reach bottom.
},
onShareAppMessage() {
// return custom share data when user share.
},
onPageScroll() {
// Do something when page scroll
},
onResize() {
// Do something when page resize
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap() {
this.setData({
text: 'Set some data for updating view.'
}, function () {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
data
data
是页面第一次渲染使用的初始数据。
页面加载时,data
将会以JSON
字符串的形式由逻辑层传至渲染层,因此data
中的数据必须是可以转成JSON
的类型:字符串,数字,布尔值,对象,数组。
渲染层可以通过 WXML 对数据进行绑定。