目录
效果图



什么是消息推送?
在手机上看到APP的通知,都是来源于消息推送,比如钉钉的打卡下班的通知,大部分是服务端主动发送提醒客户端的一个场景。此文章案例实现消息推送,是用DCloud的推送服务。下面正式讲解流程。
进入dcloud官网
1、保存证书信息
我们开发APP,打包apk的时候通常需要一个打包证书文件
在这里是需要复制证书文件中的一些信息的。我们点击证书详情进去。复制如下3个信息
MD5、SHA1、SHA256,可以先用记事本保存起来后,点击各平台信息
在点击页面中的新增。把刚才保存的信息填入即可提交。
2、进入uni-push的应用消息页
在当前应用可以选择需要开通的应用 ,点击选择对应包名就可以自动出来了。这里我只选择了安卓平台,因为我是安卓手机。这里还需要添加服务空间的,我们接下来去创建。
3、创建服务空间
在这里需要完成实名认证。没有认证将无法使用。
点击新建选择阿里云后,选择免费后立即购买,由于我创建好了就不能在继续免费了。刚创建成功时需要平台要求等待10分钟,当状态为正常后便可正常使用。
进入项目添加开发环境与代码
1、关联服务空间
在要使用通知功能的项目右键,选择创建uniCloud云开发环境在选择阿里云。
创建好后在右键选择关联服务空间。
2、新建云函数
这里全部默认就好,取一个函数名称。
3、给云函数添加公共模块
我这里是勾选了两个。这里还有一个细节,这个目前是需要添加三张表的。
这是uniapp官网的原话
那么我们就开始添加这3张表
4、添加3张表
进入云空间,选择云数据库,点击哪个加号就可以选择了。我这里已经是创建好了
这里我还没有好的方法,只能是勾选一个然后慢慢找,找到后创建即可。
5、编写云函数
现在差不多万事具备,就差敲代码了,
进入index.js文件
这里就引用官网的实例代码了。
// 简单的使用示例
'use strict';
const uniPush = uniCloud.getPushManager({appId:"__UNI__XXXXXX"}) //注意这里需要传入你的应用appId,用于指定接收消息的客户端
exports.main = async (event, context) => {
return await uniPush.sendMessage({
"push_clientid": uni.getStorageSync("cid"), //填写上一步在uni-app客户端获取到的客户端推送标识push_clientid
"title": "打卡提醒",
"content": "下班了别忘了打卡!",
"payload": {
"text":"体验一下uni-push2.0"
}
})
};
这里就可以上传云函数了。
随后可以在APP.vue里面获取手机设备的cid,我们可以进入APP.vue进行编辑,新增如下代码
<script>
export default {
onLaunch() {
console.log('App Launch')
uni.getPushClientId({
success: (res) => {
uni.setStorageSync("cid",res.cid)
},
fail(err) {
console.log(err)
}
});
uni.onPushMessage((res) => {
console.log("收到推送消息:",res) //监听推送消息
if(res.data){
console.log(res.data)
uni.createPushMessage(res.data) //收到消息推送,创建系统状态栏及锁屏通 知
}
})
},
}
</script>
我的页面代码如下
// 测试按钮触发
<template>
<button @click="testNotification">测试通知功能</button>
</template>
<script>
export default {
methods: {
testNotification() {
this.sendLocalNotification();
},
sendLocalNotification(){
uni.request({
url: 'https://这里是云空间的地址/testPush', //云函数地址
data: {
title: '测试通知',
content: '点击此通知跳转到测试页面',
payload: JSON.stringify({
page: '/pages/index/test'
})
},
method:'post',
success(result) {
console.log('发送通知',result);
},
fail({errMsg}) {
console.log('request fail', errMsg)
}
})
}
},
}
</script>
地址获取方式,点击详情后在页面最下方。我代码中的testPush是和下面url第二输入框一致,第二个框是可以进行编辑的。
打包APK
进入manifest.json文件后,找到“安卓/iOS模块配置”将推送服务勾选。随后等待打包运行即可。
这里只完成了在线推送,离线推送是需要接入厂商的sdk的,我尝试注册但很遗憾,必须得准备很多资料而且大部分是企业资料,所有这样只能实现在线推送啦。有任何问题可以下方进行留言,因为步骤确实挺多的,自己也容易忘记。