由于本人是一个Android开发者,所以是带着和Android Native 应用开发做比较的想法来学习微信小程序的开发,这样子学习可以更好的理解微信小程序。
小程序开发框架的逻辑层是由JavaScript编写的。逻辑层的代码都是写在.js文件中,顾名思义,就是业务逻辑的处理,就是对需要展示的数据进行处理,然后处理完成后就发送到视图层,进行视图渲染;同时,逻辑层也需要接受视图层的事件反馈,进行相应的逻辑处理。
举个例子:我想在应用登录后的界面显示用户的头像和名称。
那么,逻辑层需要的处理就是在登录成功后启动页面时候,需要去获取并保存用户的头像信息,名称;在成功获取数据之后,就发送到视图层进行渲染。
在JavaScript的基础上,小程序开发框架做了一些修改,用以方便地开发小程序。
* 增加了App和Page方法,进行程序和页面的注册。这就类似于Android开发中的Application和Activity,Android中Application就代表一个应用,这个对象在启动应用时会创建,只是在应用第一次启动时被创建,而且这个对象是全局的,单例的;Activity就是向用户展示的一个界面。小程序中的App就类比Android的Application,代表的是一个微信小程序;Page就类比Android中的Activity,就是一个页面,用于向用户展示数据。
* 提供丰富的API,如微信用户数据的获取,扫一扫,支付等微信特有能力。因为这个小程序是依赖着微信而存在的,所以,一些微信的基本功能都会有,其实这就是一种微信系的轻应用。
等等.....
1)App()
App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。其生命周期函数有onLaunch、onShow、onHide。
小程序开发框架提供了了全局的getApp()函数,可以获取到小程序实例。
所以我们在开发小程序的时候,一些需要全局调用的函数可以定义在App中,还有一些全局使用的变量也可以在App中定义。还有一些初始化操作可以放在onLaunch函数中调用。
2)Page
Page就类似与Android中的Activity,就是向用户展示数据的一个页面。Page()函数用来注册一个页面。接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
示例代码:
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})
初始化数据
data数据是作为页面的第一次渲染,data将会以JSON的形式由逻辑层传至渲染层,所以其数据必须是可以转成JSON的格式:字符串,数字,布尔值,对象,数组。
渲染层可以通过WXML对数据进行绑定。
实例代码:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
数据刷新
setData函数用于将数据从逻辑层发送到视图层,同时改变对应的this.data的值。注意:直接手动修改this.data是无效的,无法改变页面的状态,还会造成页面展示的数据和this.data保存的数据不一致的问题。
setData()函数的参数格式
接受一个对象,以key,value的形式表示将this.data中的key对应的值改变成value。
单次设置的数据不能超过1024kb,请尽量避免一次设置过多的数据。
(注意,当this.data中不存在对应的key值,则该key属性会添加到this.data中,一般不要这样使用)
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
//index.js
Page({
data: {
text: 'init data',
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
})
PS:微信小程序开发中,逻辑层的处理是最重要的;深刻地理解开发框架的逻辑层的原理,有利于我们写出优雅的代码。在这里,我只是列出了逻辑层一些需要重要了解的知识点,需要更详细的了解,还是需要去到小程序官方开发网站。https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161122