Envio de mensagem uniApp (Aurora/Alibaba Cloud)

Índice

1. Empurrão Aurora

1.1. Crie um aplicativo no site oficial da Jiguang

1.2. Download de plug-ins

1.3. Preenchimento de código

1.4. Enviar notificação/mensagem

2. Impulso da nuvem Alibaba

2.1. Crie um aplicativo no site oficial do Alibaba Cloud

2.2. Download de plug-ins

 2.3. Preenchimento de código

2.4. Valor enviado ao backend (notificação de tipo de API

1. Empurrão Aurora

1.1. Crie um aplicativo no site oficial da Jiguang

Consulte o Documento Jiguang (jiguang.cn) =======》Documento Jiguang  >  Jiguang Push  >  Início rápido  > Criar aplicativo

Para criar um aplicativo no site oficial, a premissa é: o projeto uniapp já possui um nome de pacote Android próprio .

1.2. Download de plug-ins

Baixe o plug-in correspondente no mercado de plug-ins:

(1) SDK oficial Aurora JCore 

SDK oficial Aurora JCore - mercado de plug-ins DCloud

(2) SDK oficial Aurora JPush

SDK oficial Jiguang JPush - mercado de plug-ins DCloud

(3) Descompacte o pacote compactado baixado e coloque-o na pasta nativeplugins no diretório do projeto (se não, crie um novo você mesmo)

(4) Preencha AppKey e AppSecret na configuração do plug-in nativo do aplicativo no manifest.json do projeto (você pode obtê-lo após a criação do aplicativo no site oficial)

1.3. Preenchimento de código

No ciclo de vida onLaunch da página App.vue , escreva o seguinte código:

<script>
//插件调用
	const jpushModule = uni.requireNativePlugin('JG-JPush')
	export default {
		onLaunch: function() {
			//#ifdef APP-PLUS       
			jpushModule.setLoggerEnable(true);
			// 初始化函数
			jpushModule.initJPushService();
			jpushModule.addConnectEventListener(result => {
				let connectEnable = result.connectEnable
				console.log("jpush连接", connectEnable)
			})
			jpushModule.getRegistrationID(result => {
				// console.log("注册ID.....", result)
				this.registerID = result.registerID
				// uni.showToast({
				// 	title: result.registerID,
				// 	icon: "success",
				// })
				if (result.registerID != '') {
					uni.setStorageSync('registerID', result.registerID);
					console.log("存设备ID", this.registerID);
				}
			})

			jpushModule.isPushStopped(result => {
				let code = result.code
				console.log('连接状态回调', result)
			});
			// 设置别名
			jpushModule.setAlias({
				'alias': 'coder',
				'sequence': 1
			})
			jpushModule.addNotificationListener(result => {
				let notificationEventType = result.notificationEventType
				let messageID = result.messageID
				let title = result.title
				let content = result.content
				let extras = result.extras
				console.log('通知事件回调', result)
				// 推送一个本地通知
				jpushModule.addLocalNotification({
					messageID,
					title,
					content,
					extras
				})
			})

			// vuex防止丢失
			let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			if (isiOS) {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("pagehide", () => {
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
				})
				//在页面加载时读取localStorage里的状态信息
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
			} else {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("beforeunload", () => {
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
				})
				//在页面加载时读取localStorage里的状态信息
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
			}

			if (uni.getStorageSync.getItem("list")) {
				this.$store.replaceState(
					Object.assign({},
						this.$store.state,
						JSON.parse(uni.getStorageSync.getItem("list"))
					)
				);
			}
			plus.globalEvent.addEventListener("beforeunload", () => {
				uni.setStorageSync.setItem("list", JSON.stringify(this.$store.state));
			});
			//#endif

		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';

	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
</style>

1.4. Enviar notificação/mensagem

Depois de fazer login no site oficial, vá para a página [Message Push]-[Push Management]-[Create Push]-[Notification Message] para criar uma tarefa push.

Se for bem-sucedido, você verá a notificação em seu telefone. Este é um push de "console" e a função push de "API" em segundo plano requer configuração de back-end.

2. Impulso da nuvem Alibaba

2.1. Crie um aplicativo no site oficial do Alibaba Cloud

Consulte a documentação do site oficial   para início rápido_Mobile R&D Platform EMAS-Alibaba Cloud Help Center  

Nota: O que é criado é uma aplicação Nativa e não uma aplicação H5.

Para criar um aplicativo no site oficial, a premissa é: o projeto uniapp já possui um nome de pacote Android próprio .

2.2. Download de plug-ins

(1) Alibaba Cloud Mobile Push

Mercado de plug-ins Alibaba Cloud Mobile Push-DCloud

(2) Descompacte o pacote compactado baixado e coloque-o na pasta nativeplugins no diretório do projeto (se não, crie um novo você mesmo)

(3) Preencha AppKey e AppSecret na configuração do plug-in nativo do aplicativo no manifest.json do projeto (você pode obtê-lo após a criação do aplicativo no site oficial)

(4) O complemento 2: 2 é um plug-in de download e uso local, você também pode escolher o pacote de nuvem e, em seguida, verificar a configuração no plug-in de nuvem

Basta escolher um desses dois e configurá-lo! 

Observação: antes de empacotar o projeto , certifique-se de verificar a permissão Push (push de mensagem) em manifest.json .

 2.3. Preenchimento de código

No ciclo de vida onLaunch da página App.vue , escreva o seguinte código:

<script>
	// const jpushModule = uni.requireNativePlugin('JG-JPush')
	const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
	// const aliyunThirdPush = uni.requireNativePlugin('Aliyun-ThirdPush');
	export default {
		onLaunch: function() {
			//#ifdef APP-PLUS    
			// 通知通道创建
			const channel = uni.requireNativePlugin('Aliyun-Push-NotificationChannel');
			channel.createChannel({
				id: 'aaa',
//特别注意：发送消息在高级设置==>Android8.0特殊配置：===>通知通道：===>里面加上id
				name: '智慧校园',
				desc: '测试创建通知通道',
				importance: 3,
			});
			// 注册推送
			// const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
			aliyunPush.registerPush({}, result => {
				const event = result.event;
				if (event === 'registerPush') {
					if (result.code === 'success') {
						console.log("注册推送 成功 ");
					} else {
						console.log("注册推送 " + result.code + " " + result.msg);
					}
				} else {
					const data = JSON.stringify(result.data);
					console.log("receive push event : " + event);
					console.log("receive push data : " + data);
				}
			});
			// （可选）注册厂商通道
			// const aliyunThirdPush = uni.requireNativePlugin('Aliyun-ThirdPush');
			// aliyunThirdPush.registerThirdPush({}, result => {
			// 	const data = JSON.stringify(result);
			// 	console.log("receive third push : " + data);
			// });
			// 获取设备ID
			// const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
			const result = aliyunPush.getDeviceId();
			// console.log("getDeviceId : ", result.data.deviceId);
			if (result.data.deviceId != '') {
				uni.setStorageSync('registerID', result.data.deviceId);
				// console.log("存设备ID", result.data.deviceId);
			}

			// vuex防止丢失
			let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			if (isiOS) {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("pagehide", () => {
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
				})
				//在页面加载时读取localStorage里的状态信息
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
			} else {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("beforeunload", () => {
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
				})
				//在页面加载时读取localStorage里的状态信息
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
			}

			if (uni.getStorageSync.getItem("list")) {
				this.$store.replaceState(
					Object.assign({},
						this.$store.state,
						JSON.parse(uni.getStorageSync.getItem("list"))
					)
				);
			}
			plus.globalEvent.addEventListener("beforeunload", () => {
				uni.setStorageSync.setItem("list", JSON.stringify(this.$store.state));
			});
			//#endif

		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';

	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
</style>

2.4. Valor enviado ao backend (notificação de tipo de API)

O controle de acesso RAM (aliyun.com)     envia o AccessKey ID e o AccessKey Secret obtidos para o backend.

prestar atenção:

Ao enviar uma mensagem, Configurações avançadas==>Configuração especial do Android8.0===>Canal de notificação==>>Adicione o valor do id no código (o meu é 'aaa').

Por fim, a imagem da embalagem do projeto:

 Escolha um dos dois últimos, dependendo de suas necessidades. Selecione ' Pacote formal ' para o pacote oficial e 'Base de depuração personalizada ' para depuração .