uniapp 分享微信好友、微信朋友圈、QQ

最新推荐文章于 2025-04-06 16:42:22 发布

HXH_csdn

最新推荐文章于 2025-04-06 16:42:22 发布

阅读量3.5k

点赞数 3

文章标签： html5

本文链接：https://blog.youkuaiyun.com/HXH_csdn/article/details/109339188

版权

本文介绍如何在H5页面实现唤起APP的功能，包括判断微信环境、提示用户及跨浏览器唤起流程。提供了具体JavaScript代码示例，并说明了在不同设备上的实现差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天领导要做一个分享微信好友、微信朋友圈、QQ的功能，因为之前没有这方面的经验，所以都是一边查资料一边去做的，现在搞得差不多了，在这里给大家分享一下，希望大家多多指点

这里是先做安卓的
先上h5页面
在这里插入图片描述
分享到微信好友的页面(朋友圈和QQ就不搞上来了,长得差不多)

点击分享卡片是在微信浏览器上打开的,但是微信浏览器是禁止网页唤起app这个操作的,具体的可以去百度一下,所以我这里就做一个提示,让用户与其他浏览器打开
在这里插入图片描述
这是在另一个浏览器打开的,此时可以唤起APP

好了,大致的效果就像上面这样了,下面我们来看一下代码

<div class="btn open">打开APP</div>
<div class="btn download">下载APP</div>

//判断weixin-tip这个提示蒙版的显示与消失，微信打开的时候显示
$(window).on("load", function() {
				var winHeight = $(window).height();
				function is_weixin() {
					var ua = navigator.userAgent.toLowerCase();
					if (ua.match(/MicroMessenger/i) == "micromessenger") {
						return true;
					} else {
						return false;
					}
				}
				var isWeixin = is_weixin();
				if (isWeixin) {
					$(".weixin-tip").css("height", winHeight);
					$(".weixin-tip").show();
				}
			})
			//打开app的操作
			$('.open').click(function() {
				var ua = navigator.userAgent.toLowerCase()
				//baituanyougouapp这个要与app里配置的相同;str为?之后的参数；例如'baituanyougouapp://id=10
				var path = 'baituanyougouapp://' + str
				if (/iphone|ipad|ipod/.test(ua)) {
					window.location = path
				} else {
					window.location = path
				}
			});
			//下载app
			$('.download').click(function() {
				var ua = navigator.userAgent.toLowerCase()
				var path = 'baituanyougouapp://' + str
				if (/iphone|ipad|ipod/.test(ua)) {
					window.location = '下载路径'
				} else {
					window.location = '下载路径'
				}
			});

在uniapp上接收

//写在onLaunch里也可以
onShow: function() {
	setTimeout(function() {
					var args = plus.runtime.arguments;
					if (args) {
						// 处理args参数，如直达到某新页面等  
						
						//清空
							plus.runtime.arguments = null;
							plus.runtime.arguments = '';
						}
					}
				}, 10);
}

下面是一些配置
官方配置连接
https://ask.dcloud.net.cn/article/64
https://ask.dcloud.net.cn/article/409
在这里插入图片描述