UniApp常用功能（一）

最新推荐文章于 2024-04-29 18:11:50 发布

当归67

最新推荐文章于 2024-04-29 18:11:50 发布

阅读量594

点赞数 2

分类专栏： uni-app 文章标签： vue.js 小程序 javascript

本文链接：https://blog.csdn.net/m0_60161060/article/details/119982799

版权

本文介绍了UniApp的两种推送消息实现方式，包括前端直接推送和通过服务端推送，并详细讲解了如何配置及获取参数。此外，还讨论了如何实现从浏览器跳转到APP，包括外部浏览器和微信内置浏览器的跳转步骤，以及上传图片的相关操作。

摘要由CSDN通过智能技术生成

1.推送消息

方式一
（1）前端自己推送

// unipush消息推送
getpush() {
    
	let option = {
    
		title: '主标题',
		sound: 'system',
	}
	void plus.push.createMessage('您的商品已经发货啦，可点击查看物流状态！', 'push=/pages/myOrder/index?id=123', JSON.stringify(
		option));
},

（2）前端获取推送消息传过来的参数
app.vue的onshow

// 获取推送消息上的参数
setTimeout(() => {
   
	const _handlePush = function(message) {
   
		console.log('message', message.payload)
		if (message.payload.indexOf('push') != -1) {
   
			uni.showModal({
   
				title: '提示',
				content: `unipush消息${
     message.payload}`,
				success: function(res) {
   
					if (res.confirm) {
   
						plus.push.clear();
						uni.navigateTo({
   
							url: message.payload.split('push=')[1]
						});
					} else if (res.cancel) {
   }
				}
			});
		}
	};
	plus.push.addEventListener('click', _handlePush);
	plus.push.addEventListener('receive', _handlePush);
}, 100)

 
 
 
<

方式二
（1）前端获取cid传给服务端推送，获取还是如方式一的方式获取参数

setTimeout(async () => {
    // 定时器的作用是防止获取cid有延迟
	var pinf = plus.push.getClientInfo();
	var cid = pinf.clientid; //客户端标识，要上传到你们的服务端
	console.log('cid', cid)
}, 1000);

2.浏览器跳转APP

先在manifest.json配置URL Schemes
在这里插入图片描述
URL Schemes是什么？
我的理解他是APP域名，相当于H5的https://www.xxx.com
一、外部浏览器跳转APP
（1）上图配置URL Schemes
（2）跳转

<a href="hepulan://a=1">唤起app<a>

 
 
 
 
 
 
  1

二、微信内置浏览器跳转到APP
前提：设置服务号的JS安全域名，使用开放标签进入，没绑定的点我去查看绑定如果不绑定，则使用以下方式会唤醒不了APP
（1）上图配置URL Schemes
（2）h5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>跳转到App</title>
</head>
<style>
    html {
     
        font-size: 16px;