微信小程序wx.onAppShow的一个使用场景（微信小程序实名认证）

最近一直在写微信小程序，前不久对接了一个跳转微信实名认证小程序的需求，这里需要用到微信支付文档中的实名认证的这个API：

文档链接：实名验证（小程序）

一、跳转目标小程序

第一步当然是跳至目标小程序，这里跳转的是微信实名认证，官方文档：打开另一个小程序

wx.navigateToMiniProgram({
  appId: 'wx88736d7d39e2eda6', // 要打开的小程序 appId
  path: 'pages/oauth/authindex', // 打开的页面路径，如果为空则打开首页。
  extraData: extraData, // 需要传递给目标小程序的数据
  envVersion: 'release', // 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版，则打开的小程序必定是正式版。
  success(res) {},
  fail(res) {}
})

extraData：

{  "api_version": "1.0",  "mch_id": "1230000109",  "appid": "wx88736d7d39e2eda6",  "scope": "pay_identity",  "response_type": "code",  "openid": "oUpF8uMuAJO_M2pxb1Q9zNjWeS6o",  "sign_type": "HMAC-SHA256",  "sign": "DBB47C037C812B29E0E7B4C5F62972B92E61CF05DE14FA958D9054B2",  "nonce_str": "190703203728315382",}

二、小程序接收参数

当从目标小程序返回到小程序时会触发小程序的切前台事件，所以需要拿到目标小程序返回的值时，则需要在wx.onAppShow这个API中的回调参数中取。

文档链接：监听小程序切前台事件

正确时返回的JSON数据包如下：

{
  "auth_code" : "EYJV9lz4yHrepHG5ye8Cp0bMORiob11lGgDUGFi26vEX-sirjL5652SFxs9WP-zD6TcrbSArk_laGU6A08pgfHxX_tZWdPiP-Cu2a68d-3Q="
}

{
  "err_code" : "SYSTEMERROR",
  "err_code" : "系统错误"
}

比如写在onLoad中：

wx.onAppShow((res) => {
  let auth_code = res.referrerInfo.extraData.auth_code;
});

这样写理论上是没问题的，但是有一点需要注意

部分版本在无referrerInfo的时候会返回 undefined，建议使用 options.referrerInfo && options.referrerInfo.appId 进行判断。

所以修改之后是这样的

wx.onAppShow((res) => {
  if (res.referrerInfo && res.referrerInfo.extraData && res.referrerInfo.extraData.auth_code) {
    let auth_code = res.referrerInfo.extraData.auth_code;
  }
});

一般场景到这里已经OK了，但是我在开发过程中遇到了一个小插曲，在返回我们自己的小程序时onAppShow会执行两次，导致其中一次的代码执行异常，需要解决。

首先定义一个全局变量appShow来保存场景值，在onLoad以及跳转到实名认证小程序的方法中将该值初始化。然后当触发了onAppShow事件时，将appShow置为true，则在第二次触发onAppShow也不会执行之后的代码了。

let appShow = false; // 定义一个全局变量，页面初始化时
...
wx.navigateToMiniProgram({
  appId: 'wx88736d7d39e2eda6', // 要打开的小程序 appId
  path: 'pages/oauth/authindex', // 打开的页面路径，如果为空则打开首页。
  extraData: extraData, // 需要传递给目标小程序的数据
  envVersion: 'release', // 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版，则打开的小程序必定是正式版。
  success(res) {
    appShow = false; // 将页面值置为false
  },
  fail(res) {}
})
...
// onLoad函数中
// 小程序切前台场景
appShow = false;
// 将页面值置为false
wx.onAppShow((res) => {
  if (!appShow) {
    appShow = !appShow;
    if (res.referrerInfo && res.referrerInfo.extraData && res.referrerInfo.extraData.auth_code) {
      // other methods
    }
  }
})

文章写得杂乱无章，还望读者海涵，多多批评指正。