uniapp小程序通过公众号发模板消息

这功能的一个难点是怎么用户的公众号信息和小程序关联起来，这样才能将信息给他有两种方法实现（用户得关注了公众号）：第一种：通过unionId来关联，小程序的openid和公众号的openid是不同的，当我们将小程序和公众号关联起来后，unionId是一样的，只有当我们在微信“开放”平台将小程序和公众号绑定后才能拿到。拿到unionId的方法：通过getUserProfile拿到用户信息，然后将enc

前端菜鸟丶Ndie

2835人浏览 · 2021-10-26 11:07:43

前端菜鸟丶Ndie · 2021-10-26 11:07:43 发布

这功能的一个难点是怎么将用户的公众号信息和小程序关联起来，这样才能将信息准确的发给他
有两种方法实现（用户得关注了公众号）：
第一种：通过unionId来关联，小程序的openid和公众号的openid是不同的，当我们将小程序和公众号关联起来后，unionId是一样的，只有当我们在微信“开放”平台将小程序和公众号绑定后才能拿到。
拿到unionId的方法：通过getUserProfile拿到用户信息，然后将encryptdata、iv传给后台，通过解密encryptdata来获得unionId，这样我们可以让后台通过unionId来获取用户在公众号上的openid，并将用户小程序的信息和公众号的信息关联起来，这样就可以指定的发模板消息给他了（模板消息由后台发送）

unionId机制链接

encryptdata解密

第二种：通过公众号授权来获取用户公众号的openid，然后后台就可以将他们关联起来了。
这种方法会跳转h5页面，所以要用web-view（跳转页面要在公众开发平台》》开发管理里配业务域名）来实现，并且还要用一个专门的h5页面来接收授权后获取到的公众号code值，不然授权后你拿不到code值，你也返回不了小程序

在登录或注册的页面就跳到该web-view页面

<template>
	<view>
		<web-view v-if="isShow" src="接收code的h5页面地址"></web-view>
	</view>
</template>

<script>
	export default{
		//公众号授权页面 https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号的appid&redirect_uri=接收code的h5页面&response_type=code&scope=snsapi_base&state=123#wechat_redirect
		data(){
			return{
				isShow:true
			}
		},
		onLoad(options) {
			if(options.code){
				this.isShow = false
			}else{
				this.isShow = true
			}
		}
	}
</script>

接收公众号code值的h5页面

<!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>授权</title>
	    <!-- 引入jquery-->
	    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	    <!-- 引入 1.3.2的js-sdk文件 -->
	    <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; // 获取页面url
	        var appid = "公众号appid";
	        code = getUrlCode().code; // 截取code
	        if (code == null || code === "") {
	            // 如果没有code，则去请求
	            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      静默授权,自动跳转到回调页的  特点：用户无感知；
	            // scope=snsapi_userinfo  非静默授权，第一次有弹框
	        } else {
	            // 你自己的业务逻辑
	            // 在这里跳回自己的小程序，并且把获取到的code传递给小程序
	            //参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
	            wx.miniProgram.redirectTo({ 
	                url: '/pages/要返回的小程序页面?code=' + code
	            })
	        }
	    }
	    getCode()
	    // 截取url中的code方法
	    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>

如果你拿到code值后要跳转到tabbar页面，这时还要添加一个小程序的页面来处理将code值才行，不然你在tabbar页面的onload方法里是拿不到传过来的code值，tabbar页面加载一次后再切回来只执行onshow

<!-- 接收公众号授权后得到的code值，并传给后台将该用户的小程序和公众号关联起来 -->
<template>
	<view style="position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
		<view style="font-size: 32rpx;color: #888;">正在登录中，请稍后....</view>
	</view>
</template>

<script>
	export default{
		onLoad(e) {
			// 在这里可以调后台接口，把拿到的code传给后台，获取openid
			this.$api.bindWechat({code:e.code})
			.then(res =>{
				if(res.code == 200){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					uni.showToast({
						title:'信息绑定失败',
						icon:'none'
					})
					setTimeout(s =>{
						uni.hideToast();
						uni.switchTab({
							url:'/pages/index/index'
						})
					},1500)
				}
			})
			.catch(res =>{
				uni.showToast({
					title:'信息绑定失败',
					icon:'none'
				})
				setTimeout(s =>{
					uni.hideToast();
					uni.switchTab({
						url:'/pages/index/index'
					})
				},1500)
			})
		}
	}
</script>