需求分析
微信小程序需要给用户(单个或多个)推送业务消息。
- 没有支付业务(不能用服务通知)
- 不能有数量限制(根据业务需求消息数量不少)
微信公众号有消息模版可以给用户推送消息
需要公众号关联小程序(互相跳转)
如何解决小程序用户于公众号用户匹配
通过UnionID来实现小程序和公众号openId关联。
- 用户关注公众号,直接持久化用户unionId和openId。
- 通过微信开发的api同步公众号关注用户信息。
在小程序中只需要获取unionId就可以找到对应的公众号openId,进行消息发送。
通过在小程序中获取微信公众号的code
- 后台解析微信公众号的code,获取openId,和小程序的openId及账号信息进行关联。
主要讨论在小程序中如何获取公众号code
- 使用小程序的 web-view组件,打开H5公众号授权页面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<template>
<view>
<web-view :src='src_url'></web-view>
</view>
</template>
<script>
export default {
data() {
return {
src_url: 'https://XXXXXXXXXXXXXXXX',
}
}
}
</script>
<style>
</style> - H5页面部署在服务器上,小程序跳转当前页面后,直接访问微信公众号进行授权,微信授权完成后返回当前页面,页面解析授权是否完成,授权成功后跳转回小程序的登录页面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html>
<head>
<meta charset="utf-8">
<title>微信授权中</title>
</head>
<body>
<div></div>
<!-- 微信jssdk -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
var wxcode = getQueryVariable("code");
let httpUrl = 'https://XXXXXXXXXXXXXXXXXXXXXX';
if (wxcode) {
//console.log(wxcode);
try {
wx.miniProgram.redirectTo({
url: '/pages/rn-login/rn-wxlogin?code=' + wxcode,
})
} catch (e) {
wx.miniProgram.redirectTo({
url: '/pages/rn-login/rn-wxlogin?code=' + wxcode,
})
}
} else {
try {
var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
+ "XXXXXXXXXXX"
+ '&redirect_uri='
+ httpUrl
+ '&response_type=code'
+ '&scope=snsapi_base'
+ '&state=STATE#wechat_redirect';
window.location.href = url;
} catch (e) {
var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
+ "XXXXXXXXXXXXXXXX"
+ '&redirect_uri='
+ httpUrl
+ '&response_type=code'
+ '&scope=snsapi_base'
+ '&state=STATE#wechat_redirect';
window.location.href = url;
}
}
</script>
</body>
</html> - 小程序登录页面通过onload来监听授权参数信息并获得
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24onLoad: function(option) {
try {
if (option && option.code) {
getApp().globalData.isFristGetCode = true;
uni.reLaunch({
url: './rn-login?code=' + option.code
});
}
//启动一个计数器,检测5秒后时候获取到code
setTimeout(function() {
//检测获取到code没有
if (!getApp().globalData.isFristGetCode) {
uni.reLaunch({
url: './rn-login'
});
}
}, 5000);
} catch (e) {
//TODO handle the exception
uni.reLaunch({
url: './rn-login'
});
}
}