- 框架
- 视图层
- 生命周期(逻辑层)
1.框架
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
整个小程序框架系统分为两部分：**[逻辑层](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/)**（App Service）和 **[视图层](https://developers.weixin.qq.com/miniprogram/dev/framework/view/)**（View）。小程序提供了自己的视图层描述语言 `WXML` 和 `WXSS`，以及基于 `JavaScript` 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
2.视图层
//min2\app.json { "pages":[ "pages/a/a", "pages/b/b", "pages/c/c", "pages/d/d", "pages/user/user", "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#00f", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json" }
//min2\pages\a\a.js C:\Users\朱\WeChatProjects\min2\pages\a\a.json C:\Users\朱\WeChatProjects\min2\pages\a\a.wxml C:\Users\朱\WeChatProjects\min2\pages\a\a.wxss <!--pages/a/a.wxml--> <view> {{message}} </view> <view wx:for="{{array}}"> {{item}} </view> <view wx:for="{{users}}"> 用户编号:{{item.id}};用户姓名:{{item.name}} </view> <!--wxml--> <view wx:if="{{view == '1'}}"> WEBVIEW </view> <view wx:elif="{{view == '2'}}"> APP </view> <view wx:else="{{view == '3'}}"> MINA </view> <!--wxml--> <template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template> <template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> <view id="tapTest" data-hi="Weixin" data-meetingState="6" bindtap="tapName"> Click me! </view>
// pages/a/a.js Page({ /** * 页面的初始数据 */ data: { message: 'Hello 页面一', array:[1,2,3,4,5], users:[{id:1,name:'牛逼'},{id:2,name:'晴天'},{id:3,name:'雨天'}], view:2, staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} }, tapName: function(event) { console.log(event); console.log(event.target.dataset); }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
2.生命周期(逻辑层)
## 响应的数据绑定
框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
//min2\app.json { "pages":[ "pages/index/index", "pages/a/a", "pages/b/b", "pages/c/c", "pages/d/d", "pages/user/user", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#00f", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/a/a", "text": "a页面" }, { "pagePath": "pages/b/b", "text": "b页面" }] }, "style": "v2", "sitemapLocation": "sitemap.json" }
// pages/a/a.js Page({ /** * 页面的初始数据 */ data: { message: 'Hello 页面一', array:[1,2,3,4,5], users:[{id:1,name:'牛逼'},{id:2,name:'晴天'},{id:3,name:'雨天'}], view:2, staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} }, tapName: function(event) { console.log(event); console.log(event.target.dataset); }, a2b:function() { wx.switchTab({ url: '/pages/b/b', }) }, a2c:function() { wx.navigateTo({ url: '/pages/c/c', }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log("a.onload"); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { console.log("a.onReady"); }, /** * 生命周期函数--监听页面显示 */ onShow() { console.log("a.onShow"); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { console.log("a.onHide"); }, /** * 生命周期函数--监听页面卸载 */ onUnload() { console.log("a.onUnload"); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
<!--pages/a/a.wxml--> <view> {{message}} </view> <view wx:for="{{array}}"> {{item}} </view> <view wx:for="{{users}}"> 用户编号:{{item.id}};用户姓名:{{item.name}} </view> <!--wxml--> <view wx:if="{{view == '1'}}"> WEBVIEW </view> <view wx:elif="{{view == '2'}}"> APP </view> <view wx:else="{{view == '3'}}"> MINA </view> <!--wxml--> <template name="staffName"> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> <view> FirstName: {{firstName}}, LastName: {{lastName}} </view> </template> <template is="staffName" data="{{...staffA}}"></template> <template is="staffName" data="{{...staffB}}"></template> <template is="staffName" data="{{...staffC}}"></template> <view id="tapTest" data-hi="Weixin" data-meetingState="6" bindtap="tapName"> Click me! </view> <button bindtap="a2b">a页面跳B页面</button> <button bindtap="a2c">a页面跳C页面</button>
// pages/b/b.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log("b.onload"); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { console.log("b.onReady"); }, /** * 生命周期函数--监听页面显示 */ onShow() { console.log("b.onShow"); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { console.log("b.onHide"); }, /** * 生命周期函数--监听页面卸载 */ onUnload() { console.log("b.onUnload"); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
// pages/c/c.js // import c from cs Page({ /** * 页面的初始数据 */ data: { }, c2b:function() { wx.switchTab({ url:'/pages/b/b', }) }, c2d:function() { wx.navigateTo({ url: '/pages/d/d', }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log("c.onload"); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { console.log("c.onReady"); }, /** * 生命周期函数--监听页面显示 */ onShow() { console.log("c.onShow"); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { console.log("c.onHide"); }, /** * 生命周期函数--监听页面卸载 */ onUnload() { console.log("c.onUnload"); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
<!--pages/c/c.wxml--> <text>pages/c/c.wxml</text> <button bindtap="c2d">c页面跳d页面</button> <button bindtap="c2b">c页面跳b页面</button>
// pages/d/d.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { console.log("d.onload"); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { console.log("d.onReady"); }, /** * 生命周期函数--监听页面显示 */ onShow() { console.log("d.onShow"); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { console.log("d.onHide"); }, /** * 生命周期函数--监听页面卸载 */ onUnload() { console.log("d.onUnload"); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })
结论：
一级不会销毁；
二级层级深跳到层级低的会销毁；
二级层级低级跳到深层级只会隐藏；
隔代中间所有页面会被销毁；
