微信开发标签-wx-open-launch-app

最新推荐文章于 2024-07-08 14:34:45 发布

yj小耳朵

最新推荐文章于 2024-07-08 14:34:45 发布

阅读量908

点赞数

分类专栏：微信开发标签文章标签：前端

本文链接：https://blog.csdn.net/yjITcsdn/article/details/115698855

版权

微信开发标签专栏收录该内容

1 篇文章 0 订阅

订阅专栏

写在前面的话

今天，你的小伙伴找你帮忙砍价了吗？
在这里插入图片描述
人生不如意之事十有八九，踩坑记文又增加了。

在微信浏览器中打开打一个H5页面后，要能打开指定App。因微信限制问题，可以采取其他办法。比如在H5中引导用户在浏览器中打开链接，或者才有微信官方提供的方法。

还是进入正题吧。。。。。

开发标签说明

wx-open-launch-app是用于页面中提供一个可跳转指定App的按钮。
属性

名称	必填	默认值	备注
appid	是		所需跳转的AppID
extinfo	否		跳转所需额外信息

事件

名称	返回值	备注
ready		标签初始化完毕，可以进行点击操作
launch		用户点击跳转按钮并对确认弹窗进行操作后触发
error	{ errMsg: string }	用户点击跳转按钮后出现错误

errMsg说明
- ‘launch:fail’
- ‘launch:fail_check fail’

引入jsdk

JSSDK使用步骤

在vue中使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src='https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js' type="text/javascript" charset="utf-8"></script>
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>在微信中打开App</title>
	</head>
	<body>
		
		<a id="toApp" >
			<div class="bottom">
				<wx-open-launch-app id="launch-btn" :appid="appId" :extinfo="extinfo" class="launch-btn" v-if="is_weixin"> 
					 <script type="text/wxtag-template">  
							<style>.btn {font-size: 16px;color: #fff;text-align:center;margin:0}</style>
					     <p class="btn"> 前往App中打开</button>
					   </script>
				</wx-open-launch-app>
				<p @click="launch" v-else>前往App中打开</p>
			</div>
		</a>
	</body>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		a {
			text-decoration: none;
			-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
			-webkit-user-select: none;
			-moz-user-focus: none;
			-moz-user-select: none;
		} 

		.right {
			position: absolute;
			right: 24px;
			top: 10px;
			width: 18px;
			height: 24px;
		}

		.right img {
			width: 18px;
			height: 24px;
		}

		p {
			text-align: center;
		}

		.top {
			margin: 34px auto 129px;
		}

		.top p:nth-of-type(1) {
			margin-bottom: 8px;
		}

		.top p {
			font-size: 14px;
			color: #fff;
		}

		.center {
			text-align: center;
			color: #fff;
			font-size: 18px;
		}

		.center p:nth-of-type(1) {
			margin: 26px 0 7px;
		}

		.center img {
			/* display: inline-block; */
			text-align: center;
			width: 90px;
			height: 90px;
		}

		.bottom {
			margin: 218px auto 0;
			width: 270px;
			height: 45px;
			background: #3BBEA3;
			box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.22);
			border-radius: 22.5px;
			text-align: center;
			font-size: 16px;
			line-height: 45px;
			color: #fff !important;
		}

		.bottom p {
			color: #fff !important;
		}
		.launch-btn{
			 width: 270px;
		   height: 45px;
		   display: block; 
		}
	</style>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
	<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
	
	<script>
		window.vConsole = new window.VConsole()
		Vue.config.ignoredElements = [
		    'wx-open-launch-app',
		]
		new Vue({
			el: '#toApp',
			data() {
				return {
					toUrl: '',
					enable: false,
					is_weixin: true,
					extinfo:'',
					appId:'你的移动应用appid'
				}
			},
			mounted() {
				this.checkVersion()
				this.initUrl() 
				if(this.is_weixin){
					this.initConfig()
					let btn = document.getElementById('launch-btn')
					btn.addEventListener('launch', function (e) {
					    console.log('success')
					 })
					 btn.addEventListener('error', function (e) {
					    console.log('fail', e.detail)
					 })
				}
			}, 
			methods: {
				async initConfig() { 
					let params = {url:window.location.href}
					console.log(params)
					let res = await axios.get('后端地址，获取wx.config的参数',{params})
					if (res.data.config) {
						let { debug,appId, timestamp, nonceStr, signature, jsApiList, openTagList } = res.data.config 
						wx.config({
							debug,
							appId, // 必填，公众号的唯一标识
							timestamp, // 必填，生成签名的时间戳
							nonceStr, // 必填，生成签名的随机串
							signature, // 必填，签名，见附录1
							jsApiList,
							openTagList // 获取开放标签权限
						})
						 wx.ready(function () { 
							 
						 })
						 wx.error((err) => {
						       console.log(err, 'error') // 如果报错打印报错信息
						  });
					}
					console.log(res.data.config)
				},
				/*初始化url*/
				initUrl() {
					var url = location.search
					var taskId = 0
					var p = ""
					if (url.indexOf("?") != -1) {
						p = url.substr(url.indexOf("?"))
						console.log(p)
						var str = url.substr(1)
						ss = str.split("&")
						for (var i = 0; i < ss.length; i++) {
							params = ss[i].split('=')
							if (params.length == 2 && params[0] == 'taskid') {
								taskId = params[1]
								break
							}
						}
						if (p.indexOf("taskid") != -1) {
							p = p + "&page=report"
						}
					}
					this.extinfo = p
					this.toUrl = '你的App地址' + p
				},
				/* 微信版本号大于 7.0.12 开放标签才可进行 唤醒 app 跳转*/
				checkVersion() {
					let ua = navigator.userAgent
					console.log(ua)
					let uaCase = ua.toLowerCase()
					if (uaCase.match(/MicroMessenger/i) == "micromessenger") {
						this.is_weixin = true
					} else {
						this.is_weixin = false
						// return false
					}
					console.log('is_weixin', this.is_weixin)
					let wechatInfo = ua.match(/MicroMessenger\/([\d\.]+)/i)
					if(wechatInfo){
						let v = wechatInfo[1].split('.') 
						console.log('版本',v)
						// 微信版本要求在7.0.12及以上
						if(v[0] > 7){
							this.enable = true
						}else if(v[0] == 7 && v[1] > 0){
							this.enable = true
						}else{
							this.enable = false
						} 
					}
					console.log('enable',this.enable)
				 //  系统版本
				 //  let match = /android\s([\w.]+)/.exec(uaCase) || /os\s([\w_]+)/.exec(uaCase)
				 // 	var version = match[1].split(".||_")[0];
					// console.log('match',match)
 
				},
				launch() {
					console.log('点击了launch', this.enable,this.is_weixin)
					// this.setClipboard()
					if (!this.is_weixin) {
						this.redirectToApp()
					}
				},
				redirectToApp() {
					console.log('跳转页面', this.toUrl)
					setTimeout(() => {
						window.location.href = this.toUrl
					}, 400)
				}, 
			}
		})
	</script> 
</html>

参考地址
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

上一篇：vconsole的使用

yj小耳朵

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
微信开发标签-wx-open-launch-app

写在前面的话开发标签说明引入jsdk在vue中使用今天，你的小伙伴找你帮忙砍价了吗？人生不如意之事十有八九，踩坑记文又增加了。在微信浏览器中打开打一个H5页面后，要能打开指定App。因微信限制问题，可以采取其他办法。比如在H5中引导用户在浏览器中打开链接，或者才有微信官方提供的方法。还是进入正题吧。。。。。开发标签说明wx-open-launch-app是用于页面中提供一个可跳转指定App的按钮。属性名称必填默认值备注appid是所需跳转的AppID
复制链接

扫一扫

专栏目录