uniapp打包apk后实现APP消息通知详细教程

发布于:2025-06-28 ⋅ 阅读:(10) ⋅ 点赞:(0)

目录

效果图​

什么是消息推送?

进入dcloud官网

1、保存证书信息

2、进入uni-push的应用消息页

3、创建服务空间

进入项目添加开发环境与代码

1、关联服务空间

2、新建云函数

3、给云函数添加公共模块

4、添加3张表

5、编写云函数

打包APK


效果图

什么是消息推送?

         在手机上看到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的,我尝试注册但很遗憾,必须得准备很多资料而且大部分是企业资料,所有这样只能实现在线推送啦。有任何问题可以下方进行留言,因为步骤确实挺多的,自己也容易忘记。


网站公告

今日签到

点亮在社区的每一天
去签到