学习路之uniapp--unipush2.0推送功能--给自己发通知

学习路之uniapp--unipush2.0推送功能--服务端推送消息

一、绑定云空间及创建云函数

  • package.json
bash 复制代码
{
  "name": "server-push",
  "dependencies": {},
  "main": "index.js",
  "extensions": {
    "uni-cloud-push": {}
  }
}
  • index.js
js 复制代码
'use strict';
const uniPush = uniCloud.getPushManager({appId:"__UNI__5630355"}) //注意这里需要传入你的应用appId,用于指定接收消息的客户端
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event);
	
	let obj = JSON.parse(event.body)
	console.log('obj : ', obj);
	const res = await uniPush.sendMessage({
		"push_clientid": obj.cids, // 设备id,支持多个以数组的形式指定多个设备,如["cid-1","cid-2"],数组长度不大于1000  
		"title": obj.title, // 标题  
		"content": obj.content, // 内容  
		"payload": obj.data, // 数据  
		"force_notification": true, // 服务端推送 需要加这一句  
		"request_id": obj.request_id //请求唯一标识号,10-32位之间;如果request_id重复,会导致消息丢失   
	})
	//返回数据给客户端
	return res
};

二、编写发送界面

js 复制代码
<template>
	<view class="content">
		<input v-model="title" placeholder="输入标题" />
		<input v-model="content" placeholder="输入标题" />
		<text class="title">接收的设备:</text>
		<text v-for="(item, index) in deviceIds"  >
			{{item}}
		</text>
		
		<button @click="send">发送</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deviceIds:[],//接收消息的设备
				title: '我是通知标题',
				content:'我是通知内容'+Math.floor(Math.random() * 100),
			}
		},
		onLoad() {
			uni.getPushClientId({
				success: (res) => {
					let push_clientid = res.cid
					console.log('客户端推送标识cid:', push_clientid,typeof push_clientid)
					this.deviceIds.push(push_clientid)
				}
			})
		},
		methods: {
			send(){
				console.log('aaaaaaaa');
				let send_data = {
					cids: this.deviceIds, // 使用存储的设备 ID
					title: this.title,
					content: this.content,
					data: {},
					request_id: "",
				};
				uniCloud.callFunction({
					name: "server-push", // 填写你自己的云函数名称
					data: {
						body: JSON.stringify(send_data) // 将数据转换为 JSON 字符串并赋值给 body
					},
					success(dataRes) {
						console.log("云函数返回的参数", dataRes)
					},
					fail(err) {
						console.log("云函数报错", err)
					},
					complete() {}
				})
			}
		}
	}
</script>

<style>
	.content {
		padding: 20px;
		text-align: center;
	}
	
	input {
		border: 1rpx solid #cecece;margin-top: 50rpx;height: 80rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	button {
	    padding: 10px 20px;
	    background-color: #007aff;
	    color: white;
	    border: none;
	    border-radius: 5px;
	    cursor: pointer;
	}
	button:hover {
	    background-color: #0056b3;
	}
	.button-text {
	    color: #fff;
	    font-size: 12px;
	}
</style>

三、效果

后期展望:

使用自已服务器接口获取CID集合,然后存在deviceIds数组,

再调用云函数

js 复制代码
uniCloud.callFunction({
					name: "server-push", // 填写你自己的云函数名称
					data: {
						body: JSON.stringify(send_data) // 将数据转换为 JSON 字符串并赋值给 body
					},
					success(dataRes) {
						console.log("云函数返回的参数", dataRes)
					},
					fail(err) {
						console.log("云函数报错", err)
					},
					complete() {}
				})

就可以实现全局、点对点通知。

createPushMessage+ websocket

uni.createPushMessage(OBJECT)

创建本地通知栏消息

相关推荐
2501_915106321 小时前
iOS 打包 IPA 全流程详解,签名配置、工具选择与跨平台上传实战指南
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张1 小时前
iOS 混淆实操指南多工具组合实现 IPA 混淆、加固与发布治理 IPA 加固
android·ios·小程序·https·uni-app·iphone·webview
十五春会1 天前
【uniapp】App平台展示pdf文件
pdf·uni-app
请叫我欧皇i1 天前
保姆级教程vscode创建uniapp vue3+ts+pinia项目并实现自动导入、打包功能
ide·vscode·uni-app
海鸥两三1 天前
Uni-App(Vue3 + TypeScript)项目结构详解 ------ 以 Lighting-UniApp 为例,提供源代码
vue.js·typescript·uni-app·1024程序员节
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生1 天前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
2501_915918411 天前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915909061 天前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview