微信小程序开发进阶篇：生命周期、数据绑定与模块化

小程序资讯

一：生命周期

准备工作写下一个大系列，帮忙大家剖析一下微信小程序整体的技术架构。 尽量努力做到用最短的篇幅表明问题，协助大家快速介绍这个平台。 这次就先说道说道小程序的生命周期。

关于生命周期，这在很多研发生态周都会存有，比如说原生的 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{

//调用登入USB

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 对象有关属性的时候，就可以提及至它了。

Page

Page 就是小程序中另外一个关键的对象， 它则表示小程序的每一个单独的页面。 它也涵盖生命周期。 它的方法如下：

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.

}

})

当前端的页面须要表明数据的时候， 可以这样：

这里面的 message 就是提及的 Page 对象中，我们定义在 data 属性中的 key 所对应的内容了。 这样 Page 以及它的数据如何与前端表明存取出来的流程咱们就明白了。

接下来， 我们怎么处置前端 UI 上面的用户操作方式事件呢? 比如说用户页面， 我们可以采用 bindtap 属性：

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 中适当的属性：

两对括号中的 message 对应 Page 中 data 属性中的 message：

Page({

data: {

message: 'Hello World'

}

})

当然， 我们还可以展开循环表明， 这个语法可能会和大家平时采用过的模板语法不太相同：

wx:for 就是微信定义的一个特定属性， 其实相等于一个 for 循环， 重复表明 View 空间， 然后将数组中的每一个元素都结点一遍， 下面就是 array 在 Page 中的定义：

Page({

data: {

array: ["Swift", "Objctive-C", "Javascript"]

}

})

上面 WXML 例子中的 代表我们 data 中的 array 数组， 而 则表示的就是数组结点中的每一个元素， 编程运转后的界面显示如下：

除了 wx:for 这种循环结点语法之外， 微信还提供更多了另外一种， wx:if, 大家从名称中必须就可以想起， 它就是一个条件推论， 只有当条件推论设立， 才可以表明这个 View。 除了 wx:if 之外， 还提供更多了了 wx:elif, wx:else

特别注意这三个属性的用法， wx:if 和 wx:elif 这两个属性后面须要追随一个布尔表达式用作推论， 而 wx:else 后面不须要追随任何表达式。 这三个属性的逻辑和我们平时研发中的 if else 推论逻辑全然一样，也比较不好认知。

关于 wx:else 微信官方的示例中就是给他选定了表达式属性的。 但我在真实环境上测试了一下， wx:else 无论与否选定后面的属性值，最终的输入结果都就是一样的， 所以这可能将就是官方示例的一个笔误。 按照 if 表达式正常的逻辑来看，必须不须要给它再设立属性了。 大家可以留心一下。

模板

笑了笑了循环和条件推论语法， WXML 还积极支持模板定义, 比如说这样：

直观解释一下， 第一个 template 标签就是模板定义， name 属性定义了它的名字，在两个标签之间就是它的内部结构。 然后紧接着的后两个 template 标签就是模板的提及， is 属性代表必须提及哪个模板。 我们这里插入的都就是 hello， 也就是我们最已经开始定义的这个模板结构。 然后就是 data 属性，通过它传至模板须要的有关数据。 先来上开一下 swift 和 objc 这两个数据的定义：

Page({

data: {

swift: { name: "Swift"},

objc: { name: "Objective-C"}

}

})

swift 和 objc 都就是两个 JSON 对象， 都涵盖一个 name 属性。 大家特别注意看看我们前面模板提及 data 属性的方式：

这里我们在一对大括号中的局部变量前面还写下了三个点 —— …

… 其实就是一个操作符， 用作将 swift 变量内部的值 “进行”， 这么说道可能将不好认知， 咱们还返回模板的定义中：

我们看见， template 内部采用 去提及我们传至对象的属性。 这就须要我们 “进行” 传至的对象， 就可以使模板找出对应 key 的值。 直观来说， 如果我们不适用于 … 这个操作符，而是轻易像是这样传至对象：

如果这样运转程序的话， 模板就是无法恰当加载至 name 属性的。

模板的提及

当然， 我们可以不必把模板的定义和提及它的代码写下至一起， 我们可以把模板的定义单独写下在一个 WXML 文件中， 然后在另外一个文件中采用 import 去导入它。 这也就是一个结构较好的项目的通常作法。 比如说我们刚才的模板放置至 hello.wxml 中， 我们就可以这样提及它：

这样我们可以比较不好的展开模块分割。 当然， 除了 import 之外， 微信送给我们提供更多了另外一种提及方式， include。 简而言之， 他们之间的区别就是这样， import 就可以导入目标文件中的 template 定义， 不能导入具体内容的 UI 内容。 而 include 刚好恰好相反， 它只可以导入目标文件中的内容，不能导入 template 定义, 比如说我们存有一个文件，叫作 header.wxml：

然后我们在 index.wxml 中这样提及：

这样就可以导入 header.wxml 中定义的内容了， 最后的输入结果就是他们两个文件中所有 UI 组件的资源整合了。 这就是 import 和 include 的区别了。