推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序开发进阶篇：生命周期、数据绑定与模块化
发布时间:2020-12-14
准备写一个小系列，帮大家梳理一下微信小程序整体的技术架构。 尽量做到用最短的篇幅说明问题，帮助大家快速了解这个平台。 这次就先说说小程序的生命周期。
关于生命周期，这在很多开发生态周都会有，比如原生的 iOS 和 Android 开发中都有类似的概念。
这次咱们就详细了解一下小程序的生命周期。以及两个核心概念 —— App 和 Page。
App()App 函数是整个小程序的入口， 这在我们上篇文章中已经介绍了， 咱们再把代码贴出来回顾一遍：
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
大体上就是这样了， 微信开发工具的默认项目中定义了 onLaunch 方法， 它就是一个生命周期方法。 除了这个方法之外， 还有另外两个生命周期方法， 这里给大家列出：
onLaunch: 小程序初始化完成。
onShow: 小程序显示，初始化完成后会调用， 从后台切换进来也会调用。
onHide: 小程序隐藏，用户在微信中点后退按钮算隐藏， 用户按 Home 键切回桌面也算隐藏， 这时 onHide 方法都会被调用。
这就是 App 目前开放的所有的生命周期方法了。根据你的小程序业务逻辑，使用这些生命周期方法即可。
getApp()微信还给我们提供了 getApp 函数， 这是一个全局函数， 在任何地方调用这个函数都可以得到 App 的实例，供我们使用。 这样我们在需要使用 App 对象相关属性的时候，就可以引用到它了。
PagePage 是小程序中另外一个重要的对象， 它表示小程序的每一个单独的页面。 它也包含生命周期。 它的方法如下：
data: 表示页面的数据， 用于前端 UI 显示数据。
onLoad: 页面加载完成。
onReady: 页面渲染完成。
onShow: 页面显示。
onHide: 页面隐藏。
onUnload: 页面卸载。
Page 的基本结构如下：
Page({
data: {
message: "Hello world."
},
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.
}
})
当前端页面需要显示数据的时候， 可以这样：
<!--
<view>{{message}}</view>
-->
这里面的 message 就是引用的 Page 对象中，我们定义在 data 属性中的 key 所对应的内容了。 这样 Page 以及它的数据如何与前端显示绑定起来的流程咱们就明白了。
接下来， 我们怎么处理前端 UI 上面的用户操作事件呢? 比如用户点击， 我们可以使用 bindtap 属性：
<!--
<view bindtap="viewTapped" >{{message}}</view>
-->
bindtap 属性指定了一个方法名，我们只需要在 Page 对象里面实现这个方法就可以处理用户的点击操作了：
Page({
viewTapped: function() {
console.log('hello world.')
}
})
当然， Page 还提供了修改它内部数据的方法 —— setData， 我们可以在刚才这个点击事件中使用 setData 修改显示在前端中的文字：
Page({
viewTapped: function() {
this.setData({
message: '你好， 世界'
});
}
})
二：数据绑定与模块化
微信小程序的 UI 层如何与控制层交互， 以及怎么样响应用户操作事件， 这次咱们来聊聊。
WXML微信小程序使用 WXML 文件作为 UI 视图。 WXML 其实就是 WeiXin Markup Language 的缩写。 是一种类似 XML 语法结构的 UI 定义方式。
它可以进行数据绑定， 显示 Page 中相应的属性：
<!--
<view> {{message}} </view>
-->
两对括号中的 message 对应 Page 中 data 属性中的 message：
Page({
data: {
message: 'Hello World'
}
})
当然， 我们还可以进行循环显示， 这个语法可能会和大家平时使用过的模板语法不太相同：
<!--
<view wx:for="{{array}}"> {{item}} </view>
-->
