As we all know, the new version of wechat API has clearly indicated that when users enter the mini program for the first time, if the user has not entered the mini program, it will directly invoke wechat authorization, or define a login entry page so that users can first authorize login to browse the content of the mini program. So there is no doubt that the small program you developed is directly contrary to the suggestions of wechat, so the audit result is of course Failed…

Main entry page authorization configuration for applets

When the applets exit from the mount background and wake up again, if the interval is too long, the token will be invalid when they wake up and enter the applets again. Of course, all interfaces cannot be displayed normally. Therefore, in the life cycle onShow() of the main entrance of app.vue (mpVue framework), It is necessary to obtain wechat authorization information and token required by the background.

1. Define a promise method to get the code value returned by wechat authorization

const getWxCode = (a)= > {
  return new Promise((resolve, reject) = > {
    wx.login({
      timeout: 3000.success: res= > {
        resolve(res.code);
      },
      fail: err= >{ reject(err); }}); })}export default getWxCode;
Copy the code

2. Check whether the user is authorized to perform the operation

wx.getSetting({ // Determine whether authorization has been granted
	success: res= > {
		if (res.authSetting["scope.userInfo"]) { // The user is not authorized. }}});Copy the code

2. Invoke the native button to initiate authorization

<button open-type="getUserInfo" @getUserInfo ="onGetUserInfo"> authorization </button> onGetUserInfo(e) {if (e.target.errmsg === "getUserInfo:fail auth deny") { return; } let {target: {encryptedData, iv}} = e; getWxCode().then(code => { const params = { code: code, encryptedData: encryptedData, iv: iv }; this.onLogin(params); }); } onLogin(params) {api.login (params).then(// API res => {console.log(' login succeeded, token is ${res} '); wx.setStorageSync("AUTH_TOKEN", res.token); }, fail => { } ); }Copy the code

If the background API requires the encryptedData and IV parameters returned by wechat, then it will prove that the user must be authorized to access the inside pages of the small program. Therefore, when syndication, the backend must be notified to remove these two parameters and pass only one code. So we can make it possible for new users to enter the applet for the first time without authorization to browse information in the applet, but with interactive operations (such as sharing…). Invoke the authorization operation.

Here, an authorization component userInfoBtn based on system button is removed to avoid each interactive location with silent authorization judging whether the user is authorized or not. 2. Check whether the user is authorized to perform the operation

<template> <div class="user-info-container"> <button class="user-info-btn" open-type="getUserInfo" @getuserinfo="mpGetUserInfo" @click.stop> <slot></slot> </button> </div> </template> <script> import API from "@/servers/API"; import getWxCode from "@/utils/getWxCode"; export default { name: 'userInfoBtn', data() { return { userInfo: {} } }, methods: { mpGetUserInfo(result) { const self = this; if (result.mp.detail.errMsg ! == 'getUserInfo:ok') {wx.showtoast ({title: 'cancel authorization ', icon: 'none', duration: 2000 }) wx.setStorageSync('hasUserInfo', false) return; } wx.checkSession({// check whether the current user session_key is valid success() {// in the login state self.getLoginData()}, Fail () {// need to re-log self.getLoginData()}})}, getLoginData() { getWxCode().then(code => { API.login({ code }) .then(res => { wx.setStorageSync('hasUserInfo', true) this.$emit('onClickGetUserInfoBtn') }) .catch(err => { console.log(err) }) }); }} </script> <style scoped>. User-info-btn ::after {// delete system button default style border: 0; } .user-info-btn { background-color: transparent; padding: 0; font-size: 0; } </style> /** call **/ <user-info-btn @onclickgetUserinfobtn ="doAction"> </user-info-btn>Copy the code