微信小程序应用级页面级生命周期

客官°小女子只卖身不卖艺 2022-12-08 01:43 170阅读 0赞

## 微信小程序整体架构 ##

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。

## 微信小程序逻辑层 ##

## 小程序的实例应用注册 ##

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例  
4.3.1.App内容语法  
应用生命周期函数、自定义事件、自定义全局变量，整体格式是object

注意：  
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

App(\{

*  当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onLaunch: function () \{  
// 只有冷启动才会触发  
// 应用场景：记录访问时间 获取用户的来源 登录授权、小程序兼容性问题等  
console.log(‘触发 onLaunch’)  
\},

*  当小程序启动，或从后台进入前台显示，会触发 onShow  
    \*/  
    onShow: function (options) \{  
    // 冷启动和热启动都会触发  
    console.log(‘小程序启动，或从后台进入前台显示’)

// 调用不存在的事件
    // console.log(this)
    // this.fun();
    
    // 调用存在事件
    this.user()
    this.users()
    this.userss()

\},

/\*\*

*  当小程序从前台进入后台，会触发 onHide  
    \*/  
    onHide: function () \{  
    console.log(‘当小程序从前台进入后台’)  
    \},
 *  当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息  
    \*/  
    onError: function (msg) \{  
    console.log(‘报错了’)  
    console.log(msg)  
    // 可以将错误信息统计发送给后端服务器  
    // wx.request(\{  
    // url: ‘http://www.shop.com?msg=’+msg,  
    // \})  
    \},

/**

*  当小程序发生脚本错误，小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听  
    \*/  
    onPageNotFound: function () \{  
    console.log(‘页面不存在’);  
    // 我们帮助用户重定向到一个存在页面  
    wx.reLaunch(\{  
    url: ‘pages/user/main’,  
    \})  
    \},

// ========自定义事件=  
// 声明式函数定时方式  
user:function()\{  
console.log(‘我是李四’)  
console.log(this)  
// 使用全局变量  
console.log(this.globalData.name)  
\},

// ES6简写(建议写法)  
users()\{  
console.log(‘我是张三’)  
console.log(this)  
setTimeout(()=>\{  
console.log(this)  
\},500)  
\},

// 箭头函数  
userss:()=>\{  
console.log(‘我是王五’)  
console.log(this)  
\},

// =====自定义全局变量  
globalData:\{  
name:“lisi”,  
age:20,  
array:\[1,3,4,5\]  
\}

\})

4.4.微信小程序页面注册  
通过页面的.js文件中的page完成页面注册，格式object  
4.4.1.page内容语法  
页面初始化的数据data 页面生命周期 自定义事件 自定义变量

> // pages/index/index.js // let app = getApp(); //  
> console.log(app.globalData.name) Page(\{
> 
>     页面的初始数据
>      
>     data: {
>         name:'李四',
>         age:20
>     },
>     
>     // ====================自定义事件================
>     fun:function(){},
>     funs(){},
>     fun:()=>{},
>     
>     /**
>      * 生命周期函数--监听页面加载
>      */
>     onLoad: function (options) {
>         //应用场景：获取页面之间跳转传递的参数  
>         //         获取业务数据
>         console.log('onLoad')
>     },
>     
>     /**
>      * 生命周期函数--监听页面初次渲染完成
>      */
>     onReady: function () {
>         //应用场景： 获取页面元素的节点
>         console.log('onReady')
>     },
>     
>     /**
>      * 生命周期函数--监听页面显示
>      */
>     onShow: function () {
>         // 应用场景：获取业务数据
>         console.log('onShow')
>     },
>     
>     /**
>      * 生命周期函数--监听页面隐藏
>      */
>     onHide: function () {
>         console.log('监听页面隐藏')
>     },
>     })

.页面栈

--------------------

let pages = getCurrentPages();
         console.log(pages)

**.生命周期总结**  
进入小程序时：  
首先执行应用生命周期函数，再次执行页面生命周期函数  
离开小程序时：  
首先执行页面生命周期函数，再次执行应用生命周期函数