微信小程序的逻辑层总结

以你之姓@ 2022-12-20 15:48 158阅读 0赞

**一、全局配置文件 App.js**

1.  `onLaunch(Object object)` 小程序初始化完成时触发，全局只触发一次，生命周期回调—监听小程序初始化
2.  `onShow(Object object)`  
    小程序启动，或从后台进入前台显示时触发，生命周期回调-监听小程序启动或切前台
3.  `onHide()`  
    小程序从前台进入后台时触发，生命周期回调—监听小程序切后台
4.  `onError(String error)`  
    小程序发生脚本错误或 API 调用报错时触发
5.  `onPageNotFound(Object object)`  
    小程序要打开的页面不存在时触发
6.  `onUnhandledRejection(Object object)`  
    小程序有未处理的 `Promise` 拒绝时触发
7.  在`onShow`生命周期中，传入`options`，打印出来是有`path`、`query`、`scene`、`shareTicket`等等，`scene`的值很重要，是说明以什么方式去进入到小程序中，也就是场景值的方式，如 `scene: 1001`，表示发现栏小程序的主入口。`shareTicket`是转发的方式，微信群等等
8.  通过 `getApp()` 方法可以获取到小程序全局唯一的App实例，在页面级别中去使用，如 `const app = getApp();`
9.  这些是属于小程序全局的生命周期，`onLaunch()`、`onShow()`、`onHide()`
10. 小程序采用的是`MVVM`的思想

**二、页面级别的配置文件index.js**

1.  `data`：`data` 是页面第一次渲染使用的初始数据，页面加载时，`data`将会以`JSON`字符串的形式由逻辑层传至渲染层，必须是`JSON`类型，如字符串，数字，布尔值，对象，数组等等
2.  `onLoad()`  
    页面加载时触发，一个页面只会调用一次，可以在 `onLoad` 的参数中获取打开当前页面路径中的参数，生命周期回调—监听页面加载
3.  `onReady()`  
    生命周期回调—监听页面初次渲染完成，页面初次渲染完成时触发，一个页面只会调用一次，可以和视图层进行交互
4.  `onShow()`  
    生命周期回调—监听页面显示，页面显示/切入前台时触发
5.  `onHide()`  
    生命周期回调—监听页面隐藏，页面隐藏/切入后台时触发
6.  `onUnload()`  
    生命周期回调—监听页面卸载，页面卸载时触发
7.  小程序页面级别的生命周期函数是包括`onLoad()`、`onShow()`、`onReady()`、`onHide()`、`onUnload()`等等
8.  `onPullDownRefresh()`  
    监听用户下拉动作，需要在`app.js`的`window`中设置`enablePullDownRefresh`，为`true`
9.  `onReachBottom()`  
    页面上拉触底事件的处理函数，需要在`app.js`的`window`中设置`onReachBottomDistance`，为50或者是其它的一个数值
10. `onShareAppMessage()`  
    用户点击右上角转发，示例代码

onShareAppMessage: function (res) { 
        if (res.from === 'button') { 
          // 来自页面内转发按钮
          console.log(res.target)
        }
        return { 
          title: '自定义转发标题',
          path: '/page/user?id=123'
        }
    }

1.  `onPageScroll()`  
    页面滚动触发事件的处理函数
2.  `onResize()`  
    页面尺寸改变时触发
3.  `onTabItemTap()`  
    当前是 `tab` 页时，点击 `tab` 时触发，小程序的点击事件是由 `bindTap`去触发的,  
    示例代码

<view class="container" bindtap="showTest">
      {
       { motton }}
    </view>

test: "hello word",
    showTest() { 
        // console.log(this.test)
        this.setData({ 
          motton: "a better vue"
        })
     }

1.  小程序中修改`data`中的值是通过 `this.setData()` 去实现修改的，如上面的示例代码所示