算是个系列内容吧,最终要实现的是将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.vueonLaunch生命周期中初始化:

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的开通、配置、云函数发送、前端监听接收的全部流程。
最后那一节,将把前边所有的内容串起来,来处理用户扫码后的那个逻辑,最终实现登录。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐