uni-app-WeChat official account silent authorization

---

foreword

提示：：公司的公众号用户，与后台系统的账号系统做绑定，用以推送消息

The official account custom menu is directly linked to the following page for silent authorization, and then the user enters the account assigned by the system to bind and unbind with WeChat.

The page is as follows:

---

• onLoad: When the page is loaded, it is more appropriate to send a request in onLoad, that is, send a request to obtain data as soon as the page is loaded.
• onShow: When the page is displayed, it will be triggered multiple times, as long as the page is hidden and then displayed again, it will be triggered. It will be triggered repeatedly here, if you send the request repeatedly, it is not appropriate.
• onReady: The initial rendering of the page is completed, but after the rendering is completed, it is too slow to request data.

1. Called in the onLoad hook

最大的好处就是授权时，不会出现的页面空白的情况

onLoad() {
    
    }

2. Use steps

The code has comments, if you don’t understand it, read it several times, if judges the timing of execution, and executes according to the data cache. If there is an openId, the code block in onload will not be executed, otherwise the following will inevitably execute one of the following situations.

// wechatAppId公众号的标识，改成自己的
	import {
    
    
		wechatAppId,
	} from '@/common/settings'
		onLoad() {
    
    
			//看看本地是否有openId
			const openId = uni.getStorageSync("openId")
			//看看本地是否有code，这个是公众号code
			const code = uni.getStorageSync("code")
			// 截取链接的code，具体方法在下面有
			const urlCode = this.getUrlCode().code
			if (!code && !urlCode && !openId) {
    
    
				//不存在存储的code 不存在地址参数code 不存在openid
				//存储当前初始页面历史列表数量
				uni.setStorageSync("historyLength", history.length);
				//local 回调地址，换成自己的
				const local =
'https://127.0.0.1:8080/pages/account/BindAndUnbind/BindAndUnbind'
				//encodeURIComponent对链接转码，这一步必须
				const uri = encodeURIComponent(local)
				//调转页面
				document.location.replace(
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
      
      wechatAppId}&redirect_uri=${
      
      uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
				)
			} else if (urlCode && !openId) {
    
    
				//存在地址参数code 不存在openid
				uni.setStorageSync('code', urlCode);
				const historyLength = uni.getStorageSync("historyLength");
				//跳转回初始页面
				history.go(-(history.length - historyLength));
			} else if (code && !openId) {
    
    
				//存在存储的code 不存在openid
		
				//请求后端接口获取用户的信息
				uni.$u.post('/api/login/volkswagen-login', {
    
    
					'webChatCode': code
				}).then(res => {
    
    
					if (res.code === 0) {
    
    
						uni.removeStorageSync('code');
						this.$u.toast("授权成功")
						uni.setStorageSync("openId", res.data.openId)
						uni.setStorageSync("openIdData", res.data)
						this.$u.vuex('openId', res.data.openId)
					} else {
    
    
						uni.removeStorageSync('code');
						this.$u.toast("code授权失败")
						uni.setStorageSync("openId", res.data.openId)
						uni.setStorageSync("openIdData", res.data)
						this.$u.vuex('openId', res.data.openId)
					}
				}).catch(err => {
    
    
					uni.removeStorageSync('code');
					this.$u.toast("catch授权失败")
				})
			}
		},

Intercept the code in the url

			// 截取url中的code
			getUrlCode() {
    
    
				// 截取url中的code方法
				const url = location.search
				const theRequest = new Object()
				if (url.indexOf('?') != -1) {
    
    
					let str = url.substr(1)
					let strs = str.split('&')
					for (let i = 0; i < strs.length; i++) {
    
    
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1]
					}
				}
				return theRequest
			},