二十四.注册App和监听生命周期

青旅半醒 2023-07-09 02:28 35阅读 0赞

# 注册App #

> 每一个小程序都 需要在app.js中调用App方法注册小程序实例

## 一.判断小程序的进入场景 ##

### (1)常用的打开场景 ###

1.  群聊会话中打开
2.  小程序列表中打开
3.  微信扫一扫打开
4.  另一个小程序打开

### (2)如何确定场景 ###

在onLaunch和onShow生命周期回调函数中, 会有options参数, 其中有scene值.

App({ 
        onLaunch:function(){ 
            
        },
        onShow: function (options) { 
        	console.log(options);
        	switch(options.scene){ 
          		case 1001:
          		console.log("通过小程序主入口进入");
          		break;
        	}
      	},
    })

## 二.监听生命周期函数 ##

> 在生命周期中执行对应的业务逻辑, 比如在某个生命周期中获取用户的信息

在注册时, 可以绑定对应的生命周期函数, 在生命周期函数中,执行对应的代码.

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>function</td> 
   <td>生命周期回调—监听小程序初始化</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>function</td> 
   <td>生命周期回调—监听小程序启动或切前台</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>function</td> 
   <td>生命周期回调—监听小程序切后台</td> 
  </tr> 
  <tr> 
   <td>onError</td> 
   <td>function</td> 
   <td>错误监听函数</td> 
  </tr> 
  <tr> 
   <td>onPageNotFound</td> 
   <td>function</td> 
   <td>页面不存在监听函数</td> 
  </tr> 
  <tr> 
   <td>其他</td> 
   <td>any</td> 
   <td>开发者可以添加任意的函数或数据变量到<code>object</code>参数中, 用<code>this</code>可以访问</td> 
  </tr> 
 </tbody> 
</table>

App({  	
      /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */
      onLaunch: function () { 
          //网络请求
          //获取用户信息
      },
      /** * 当小程序启动，或从后台进入前台显示，会触发 onShow */
      onShow: function (options) { 
      },
      /** * 当小程序从前台进入后台，会触发 onHide */
      onHide: function () { 
      },
      /** * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 */
      onError: function (msg) { 
      }
    })

## 三.获取用户信息-保存全局变量 ##

### (1)获取微信用户的基本信息的方式: ###

1.  wx.getUserInfo-即将废弃的接口;
    
        App({ 
            onShow: function (options) { 
            //2.获取用户信息,并且获取用户信息之后,将用户信息传递给服务器
            wx.getUserInfo({ 
              success:function(res){ 
                console.log(res.userInfo.nickName);
              }
            })
          },
        })
2.  button组件-将open-type改成getUserInfo, 并且绑定bindgetUserInfo事件去获取
    
        <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
    
        getUserInfo (e) { 
            console.log(e);
          }
3.  open-data组件—展示用户信息
    
        
        <open-data type="userNickName"></open-data>

## 四.数据共享 ##

> 因为App()实例只有一个, 并且是全局共享的(单例对象), 所以我们可以将一些共享的数据放在这里

开发者在app.js使用自定义函数定义的变量, 如果在其他页面需要获取, 则需要先获取APP()产生的实例对象

//在App.js中
    globalData:{ 
        name:'zhangsan',
        age: 18
    }

//其他页面的js
    //getApp()获取App()产生的实例对象
    const app = getApp();
    const name = app.globalData.name;
    const age = app.globalData.age;