• 小程序框架-＞框架，视图层，生命周期(逻辑层)

    • 框架
    • 视图层
    • 生命周期(逻辑层)

    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.视图层

    1. //min2\app.json
    2. {
    3.   "pages":[
    4.     "pages/a/a",
    5.     "pages/b/b",
    6.     "pages/c/c",
    7.     "pages/d/d",
    8.     "pages/user/user",
    9.     "pages/index/index",
    10.     "pages/logs/logs"
    11.   ],
    12.   "window":{
    13.     "backgroundTextStyle":"light",
    14.     "navigationBarBackgroundColor": "#00f",
    15.     "navigationBarTitleText": "Weixin",
    16.     "navigationBarTextStyle":"black"
    17.   },
    18.   "style": "v2",
    19.   "sitemapLocation": "sitemap.json"
    20. }
    21.  
    1. //min2\pages\a\a.js
    2. C:\Users\朱\WeChatProjects\min2\pages\a\a.json
    3. C:\Users\朱\WeChatProjects\min2\pages\a\a.wxml
    4. C:\Users\朱\WeChatProjects\min2\pages\a\a.wxss
    6.  {{message}} 
    7. for="{{array}}"> {{item}} 
    8. for="{{users}}"> 用户编号:{{item.id}};用户姓名:{{item.name}} 
    9.  
    11. if="{{view == '1'}}"> WEBVIEW 
    12. "{{view == '2'}}"> APP 
    13. else="{{view == '3'}}"> MINA 
    14.  
    17.  
    21.  
    22. "tapTest" data-hi="Weixin" data-meetingState="6" bindtap="tapName"> Click me! 
    1. // pages/a/a.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.         message: 'Hello 页面一',
    9.         array:[1,2,3,4,5],
    10.         users:[{id:1,name:'牛逼'},{id:2,name:'晴天'},{id:3,name:'雨天'}],
    11.         view:2,
    12.         staffA: {firstName: 'Hulk', lastName: 'Hu'},
    13.         staffB: {firstName: 'Shang', lastName: 'You'},
    14.         staffC: {firstName: 'Gideon', lastName: 'Lin'}
    15.   },
    16.   tapName: function(event) {
    17.     console.log(event);
    18.     console.log(event.target.dataset);
    19.   },
    20.   /**
    21.    * 生命周期函数--监听页面加载
    22.    */
    23.   onLoad(options) {
    24.  
    25.   },
    26.  
    27.   /**
    28.    * 生命周期函数--监听页面初次渲染完成
    29.    */
    30.   onReady() {
    31.  
    32.   },
    33.  
    34.   /**
    35.    * 生命周期函数--监听页面显示
    36.    */
    37.   onShow() {
    38.  
    39.   },
    40.  
    41.   /**
    42.    * 生命周期函数--监听页面隐藏
    43.    */
    44.   onHide() {
    45.  
    46.   },
    47.  
    48.   /**
    49.    * 生命周期函数--监听页面卸载
    50.    */
    51.   onUnload() {
    52.  
    53.   },
    54.  
    55.   /**
    56.    * 页面相关事件处理函数--监听用户下拉动作
    57.    */
    58.   onPullDownRefresh() {
    59.  
    60.   },
    61.  
    62.   /**
    63.    * 页面上拉触底事件的处理函数
    64.    */
    65.   onReachBottom() {
    66.  
    67.   },
    68.  
    69.   /**
    70.    * 用户点击右上角分享
    71.    */
    72.   onShareAppMessage() {
    73.  
    74.   }
    75. })

    2.生命周期(逻辑层)

    ## 响应的数据绑定

    框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

    1. //min2\app.json
    2. {
    3.   "pages":[
    4.   "pages/index/index",
    5.   "pages/a/a",
    6.   "pages/b/b",
    7.   "pages/c/c",
    8.   "pages/d/d",
    9.   "pages/user/user",
    10.   "pages/logs/logs"
    11. ],
    12. "window":{
    13.   "backgroundTextStyle":"light",
    14.   "navigationBarBackgroundColor": "#00f",
    15.   "navigationBarTitleText": "Weixin",
    16.   "navigationBarTextStyle":"black"
    17. },
    18. "tabBar": {
    19.   "list": [{
    20.     "pagePath": "pages/index/index",
    21.     "text": "首页"
    22.   }, {
    23.     "pagePath": "pages/a/a",
    24.     "text": "a页面"
    25.   }, {
    26.     "pagePath": "pages/b/b",
    27.     "text": "b页面"
    28.   }]
    29. },
    30. "style": "v2",
    31. "sitemapLocation": "sitemap.json"
    32. }
    33.   
    34.  
    35.

     

    1. // pages/a/a.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.         message: 'Hello 页面一',
    9.         array:[1,2,3,4,5],
    10.         users:[{id:1,name:'牛逼'},{id:2,name:'晴天'},{id:3,name:'雨天'}],
    11.         view:2,
    12.         staffA: {firstName: 'Hulk', lastName: 'Hu'},
    13.         staffB: {firstName: 'Shang', lastName: 'You'},
    14.         staffC: {firstName: 'Gideon', lastName: 'Lin'}
    15.   },
    16.   tapName: function(event) {
    17.     console.log(event);
    18.     console.log(event.target.dataset);
    19.   },
    20.   a2b:function() {
    21.     wx.switchTab({
    22.       url: '/pages/b/b',
    23.     })
    24.   },
    25.   a2c:function() {
    26.     wx.navigateTo({
    27.       url: '/pages/c/c',
    28.     })
    29.   },
    30.   /**
    31.    * 生命周期函数--监听页面加载
    32.    */
    33.   onLoad(options) {
    34. console.log("a.onload");
    35.   },
    36.  
    37.   /**
    38.    * 生命周期函数--监听页面初次渲染完成
    39.    */
    40.   onReady() {
    41.     console.log("a.onReady");
    42.   },
    43.  
    44.   /**
    45.    * 生命周期函数--监听页面显示
    46.    */
    47.   onShow() {
    48.     console.log("a.onShow");
    49.   },
    50.  
    51.   /**
    52.    * 生命周期函数--监听页面隐藏
    53.    */
    54.   onHide() {
    55.     console.log("a.onHide");
    56.   },
    57.  
    58.   /**
    59.    * 生命周期函数--监听页面卸载
    60.    */
    61.   onUnload() {
    62.     console.log("a.onUnload");
    63.   },
    64.  
    65.   /**
    66.    * 页面相关事件处理函数--监听用户下拉动作
    67.    */
    68.   onPullDownRefresh() {
    69.  
    70.   },
    71.  
    72.   /**
    73.    * 页面上拉触底事件的处理函数
    74.    */
    75.   onReachBottom() {
    76.  
    77.   },
    78.  
    79.   /**
    80.    * 用户点击右上角分享
    81.    */
    82.   onShareAppMessage() {
    83.  
    84.   }
    85. })

     

    2.  {{message}} 
    3. for="{{array}}"> {{item}} 
    4. for="{{users}}"> 用户编号:{{item.id}};用户姓名:{{item.name}} 
    5.  
    7. if="{{view == '1'}}"> WEBVIEW 
    8. "{{view == '2'}}"> APP 
    9. else="{{view == '3'}}"> MINA 
    10.  
    13.  
    17.  
    18. "tapTest" data-hi="Weixin" data-meetingState="6" bindtap="tapName"> Click me! 
    19.  
    1. // pages/b/b.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.  
    9.   },
    10.  
    11.   /**
    12.    * 生命周期函数--监听页面加载
    13.    */
    14.   onLoad(options) {
    15.     console.log("b.onload");
    16.       },
    17.     
    18.       /**
    19.        * 生命周期函数--监听页面初次渲染完成
    20.        */
    21.       onReady() {
    22.         console.log("b.onReady");
    23.       },
    24.     
    25.       /**
    26.        * 生命周期函数--监听页面显示
    27.        */
    28.       onShow() {
    29.         console.log("b.onShow");
    30.       },
    31.     
    32.       /**
    33.        * 生命周期函数--监听页面隐藏
    34.        */
    35.       onHide() {
    36.         console.log("b.onHide");
    37.       },
    38.     
    39.       /**
    40.        * 生命周期函数--监听页面卸载
    41.        */
    42.       onUnload() {
    43.         console.log("b.onUnload");
    44.       },
    45.  
    46.   /**
    47.    * 页面相关事件处理函数--监听用户下拉动作
    48.    */
    49.   onPullDownRefresh() {
    50.  
    51.   },
    52.  
    53.   /**
    54.    * 页面上拉触底事件的处理函数
    55.    */
    56.   onReachBottom() {
    57.  
    58.   },
    59.  
    60.   /**
    61.    * 用户点击右上角分享
    62.    */
    63.   onShareAppMessage() {
    64.  
    65.   }
    66. })
    1. // pages/c/c.js
    2. // import c from cs
    3. Page({
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.       
    9.   },
    10.   c2b:function() {
    11.     wx.switchTab({
    12.       url:'/pages/b/b',
    13.     })
    14.   },
    15.   c2d:function() {
    16.     wx.navigateTo({
    17.       url: '/pages/d/d',
    18.     })
    19.   },
    20.    /**
    21.    * 生命周期函数--监听页面加载
    22.    */
    23.   onLoad(options) {
    24.     console.log("c.onload");
    25.       },
    26.     
    27.       /**
    28.        * 生命周期函数--监听页面初次渲染完成
    29.        */
    30.       onReady() {
    31.         console.log("c.onReady");
    32.       },
    33.     
    34.       /**
    35.        * 生命周期函数--监听页面显示
    36.        */
    37.       onShow() {
    38.         console.log("c.onShow");
    39.       },
    40.     
    41.       /**
    42.        * 生命周期函数--监听页面隐藏
    43.        */
    44.       onHide() {
    45.         console.log("c.onHide");
    46.       },
    47.     
    48.       /**
    49.        * 生命周期函数--监听页面卸载
    50.        */
    51.       onUnload() {
    52.         console.log("c.onUnload");
    53.       },
    54.  
    55.   /**
    56.    * 页面相关事件处理函数--监听用户下拉动作
    57.    */
    58.   onPullDownRefresh() {
    59.  
    60.   },
    61.  
    62.   /**
    63.    * 页面上拉触底事件的处理函数
    64.    */
    65.   onReachBottom() {
    66.  
    67.   },
    68.  
    69.   /**
    70.    * 用户点击右上角分享
    71.    */
    72.   onShareAppMessage() {
    73.  
    74.   }
    75. })
    2. pages/c/c.wxml
    1. // pages/d/d.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.  
    9.   },
    10.  
    11.   /**
    12.    * 生命周期函数--监听页面加载
    13.    */
    14.   onLoad(options) {
    15.     console.log("d.onload");
    16.       },
    17.     
    18.       /**
    19.        * 生命周期函数--监听页面初次渲染完成
    20.        */
    21.       onReady() {
    22.         console.log("d.onReady");
    23.       },
    24.     
    25.       /**
    26.        * 生命周期函数--监听页面显示
    27.        */
    28.       onShow() {
    29.         console.log("d.onShow");
    30.       },
    31.     
    32.       /**
    33.        * 生命周期函数--监听页面隐藏
    34.        */
    35.       onHide() {
    36.         console.log("d.onHide");
    37.       },
    38.     
    39.       /**
    40.        * 生命周期函数--监听页面卸载
    41.        */
    42.       onUnload() {
    43.         console.log("d.onUnload");
    44.       },
    45.  
    46.   /**
    47.    * 页面相关事件处理函数--监听用户下拉动作
    48.    */
    49.   onPullDownRefresh() {
    50.  
    51.   },
    52.  
    53.   /**
    54.    * 页面上拉触底事件的处理函数
    55.    */
    56.   onReachBottom() {
    57.  
    58.   },
    59.  
    60.   /**
    61.    * 用户点击右上角分享
    62.    */
    63.   onShareAppMessage() {
    64.  
    65.   }
    66. })

    结论：

    一级不会销毁；

    二级层级深跳到层级低的会销毁；

    二级层级低级跳到深层级只会隐藏；

    隔代中间所有页面会被销毁；

  • 相关阅读:
    Maven项目的目录结构
    Python自动化测试，web网站怎么测试？全网最详细实战......
    PMP现在报班还来得及参加11月份的PMP考试吗？
    6.2：荷兰国旗问题
    如何理解与学习数学分析——第二部分——数学分析中的基本概念——第7章——连续性
    Linux部署多个jar包脚本
    VBA技术资料MF83：将Word文档批量另存为PDF文件
    python研发工程师面试准备一
    我和 chatGPT 对线操作系统！
    面经汇总--校招--金山办公
  • 原文地址：https://blog.csdn.net/weixin_73471776/article/details/133840772