算是个系列内容吧,最终要实现的是将uniCloud作为后端完成“扫码关注公众号后完成网站登录”
将要涉及的内容可能包括:
0.准备工作(本节)
1.接受并解析xml消息
2.请求access_token并缓存
3.生成带参数二维码
4.引入、封装redis缓存方法
5.开通、配置、初始化uniPush2.0(本节)
6.解析不同情况下用户扫码时推送的事件并完成登录
系列内容全部基于uniCloud+vk-uniCloud(云函数路由)+uni-app
编辑器HbuilderX最新版
云空间为阿里云
公众号为认证服务号
uniPush1.0的时候就用过,但说实话,2.0比1.0好用太多。虽然背后都是个推,但由于加入了uniCloud云函数的支持,开发者可以很轻松的完成推送的流程。
笔者最终完成扫码登录的网站,就是基于uniPush2.0实现了实时弹幕
,有点聊天社区的雏形了,而这总共也就二十多行代码就搞定了。
在扫码、关注、登录网站的环节中,uniPush取代的是以前长轮询
的功能,实现了当用户扫码关注后,实时的推送结果给前端,几乎0延迟。
一、开通uniPush2.0
在你项目的根目录,右侧找到web配置,勾选uniPush2.0(先申请)
二、配置
如果你云空间只有一个项目,那就无所谓。但像我一个云空间可能面对N个项目,各项目又都有自己的云空间做前端托管,就需要在关联云空间那里把各个空间都关联上,否则会无法推送。
三、前端初始化
来看看究竟有多简单:
首先,我们需要在app.vue
的onLaunch
生命周期中初始化:
uni.getPushClientId({
success: res => {
// 这里我们获取到的推送标识可以视为是这个设备的唯一标识
let push_clientid = res.cid;
// 缓存到vuex,方便页面上调用传给生成二维码的接口
vk.vuex.set('$user.push_clientid', push_clientid);
},
fail(err) {
console.log(err);
}
});
然后,我们同样在onLaunch
生命周期中进行消息的监听:
uni.onPushMessage(res => {
// 这里因为我们只是web端,所以获取的内容实际上是透传的内容,也就是payload字段的内容
let payload = res.data.payload;
if (payload.type == 'barrage') {
// 我其他的处理
} else if (payload.type == 'login') {
// 这里在发送时设置的type
// 这里的处理逻辑放到最后那节一起说,否则看不明白
}
});
最后,来看看云函数里如何完成发送
const uniPush = uniCloud.getPushManager({ appId: '你的appid' });
// 通过unipush推送给客户端扫码成功的消息
await uniPush.sendMessage({
"push_clientid": redisData.pushClientid, // pushClientid代表你要发消息给谁
"title": "扫码成功",
"content": "感谢关注,现在进入登录环节", // 这两项意义不大
"payload": {
type: 'login', // 登录消息
tokenRes, // 这里我还发了token和userInfo,具体的逻辑下一节一起看
userInfo: uniUserInfo
}
})
这样,就完成了uniPush2.0的开通、配置、云函数发送、前端监听接收的全部流程。
最后那一节,将把前边所有的内容串起来,来处理用户扫码后的那个逻辑,最终实现登录。