One difficulty of this function is how to connect the official account information with the small program so that the information can be given to him.
There are two ways to achieve this official account.
The first official account official account: through unionId, the openid of the small program and the openid of the official account are different. When we associate the small program with the public number, unionId is the same. Only when we bind the small program and the public number on WeChat's "open platform" can we get it.
The way to get unionId: get the user information through getUserProfile, then transmit the encryptdata and iv to the background, get unionId through decrypting encryptdata, so that we can get the openid of the user's official account through unionId, and associate the information of the user's small program with the official account information, so that the template message can be given to him. (the template message is sent by the background)
The second is to get the openid of the official account number through authorization from the official account, and then connect them with the background.
This method will jump h5 pages, so we need to use web-view (jump page to be in the public development platform) development management with business domain name to achieve, and also use a dedicated h5 page to receive the official account code value after authorization, otherwise you can't get code value after authorization, you can not return to small program.
Jump to the web view page on the login or registration page
<template>
<view>
<web-view v-if="isShow" src="receive code of h5 Page address"></web-view>
</view>
</template>
<script>
export default{
//Official account authorization page https://open.weixin.qq.com/connect/oauth2/authorize?appid= The appid&redirect_uri= of the official account receives the h5 page &response_type=code&scope=snsapi_base&state=123#wechat_redirect of code.
data(){
return{
isShow:true
}
},
onLoad(options) {
if(options.code){
this.isShow = false
}else{
this.isShow = true
}
}
}
</script>
h5 page for receiving official account code value
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
user-scalable=no,initial-scale=1.0,maximum=1.0,minimum=1.0">
<title>to grant authorization</title>
<!-- introduce jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Introduction 1.3.2 of js-sdk file -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
</body>
<script>
function getCode() {
var code = "";
var local = window.location.href; // Get page url
var appid = "official account appid";
code = getUrlCode().code; // Intercept code
if (code == null || code === "") {
// If there is no code, request it
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
local
)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
// scope=snsapi_base silent authorization, and automatically jump to the callback page. Features: no user perception;
// scope=snsapi_userinfo non silent authorization, pop-up box for the first time
} else {
// Your own business logic
// Jump back to your applet here and pass the obtained code to the applet
//Reference documents: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
wx.miniProgram.redirectTo({
url: '/pages/Applet page to return to?code=' + code
})
}
}
getCode()
// Intercept the code method in the url
function getUrlCode() {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
}
}
return theRequest;
}
</script>
</html>
If you want to jump to the tabbar page after you get the code value, you need to use a page that adds an applet to process the code value. Otherwise, you can't get the code value transmitted in the onload method of the tabbar page. After the tabbar page is loaded once, you can cut back and only perform onshow
<!-- After receiving the authorization of the official account, the code Value and pass it to the background to associate the user's small program with the official account. -->
<template>
<view style="position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
<view style="font-size: 32rpx;color: #888; "> logging in, please wait... < / View >
</view>
</template>
<script>
export default{
onLoad(e) {
// Here, you can adjust the background interface, pass the obtained code to the background and obtain the openid
this.$api.bindWechat({code:e.code})
.then(res =>{
if(res.code == 200){
uni.switchTab({
url:'/pages/index/index'
})
}else{
uni.showToast({
title:'Information binding failed',
icon:'none'
})
setTimeout(s =>{
uni.hideToast();
uni.switchTab({
url:'/pages/index/index'
})
},1500)
}
})
.catch(res =>{
uni.showToast({
title:'Information binding failed',
icon:'none'
})
setTimeout(s =>{
uni.hideToast();
uni.switchTab({
url:'/pages/index/index'
})
},1500)
})
}
}
</script>