应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

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

发布时间:2024-01-01 00:00 浏览次数:27

小程序资讯


一:生命周期


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


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

TAG标签:
阅读推荐