uniapp 微信内置浏览器h5打开app

主要就是使用微信jssdk中的开放标签wx-open-launch-app’

使用微信 JSSDK

可以用npm下载并安装
先新建文件并在里面声明开放标签

import wx from '这是你引进来的微信jssdk地址'
export default {
	wxjs(){
		uni.request({
			url:这是你们后端返回appid、签名等的接口,
			methed:'get',
			then((res)=>{
				wx.config({
				  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				  appId: '', // 必填,公众号的唯一标识
				  timestamp: , // 必填,生成签名的时间戳
				  nonceStr: '', // 必填,生成签名的随机串
				  signature: '',// 必填,签名
				  jsApiList: [], // 必填,需要使用的JS接口列表
				  openTagList: ['wx-open-launch-app'] // 非必填,
				});
				 wx.ready(() => {
				 })
			})
		})
	}
}

在main.js声明新建文件

import integralTask from './utils/integralTask.js'
Vue.prototype.$tool = integralTask

在使用该标签的页面

<wx-open-launch-app id="launch-btn" appid="这个appid是要跳转的app在微信开放平台的appid" extinfo="这是跳转app时所带的参数">
	<script type="text/wxtag-template">
		<style>
			.btn{  
				display: flex;
				height: 31px;width: 90px;
			}  
			.txet{
				margin-left: 6px;color: #fff;font-size: 13px;line-height: 31px;
			}
			</style>
		<view class="btn">
			<text class="txet">APP打开</text>
		</view>
	</script>
</wx-open-launch-app>
<script>
	export default {
		onLoad() {
			this.$tool.wxjs()
		},
		mounted() {
			setTimeout(()=>{
				var btn = document.getElementById('launch-btn');
				btn.addEventListener('launch', function(e) {
					console.log('success成功');
				});
				btn.addEventListener('error', function(e) {
					console.log('fail', e.detail);
					uni.showModal({
						title: '系统消息',
						content: '您的手机未找到当前应用,是否去下载?',
						success: function(res) {
							if (res.confirm) {
								let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
								if (isiOS) {
									window.location.href = '这里填应用宝的iOS端app下载链接'
								}else{
									window.location.href = '这里填应用宝的android端app下载链接'
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					uni.showToast({
						title:"请在自带浏览器上打开",
						icon:"none"
					})
				});
			},1000)
		},
	}
</script>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值