微信中H5页面唤起 APP方案_直接打开appStore
wx-open-H5网页在微信上是无法直接打开app链接的，需要使用微信开放标签wx-open-launch-app，它主要用于微信H5网页唤醒app，该标签只有在微信中才会显示。下面由“fly63前端网”为大家整理记录使用wx-open-launch-app跳转app的历程，方便大家以后查阅和参考。
步骤一：域名和应用Appid的绑定
绑定H5域名：登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
关联移动应用：移动应用Appid在开放平台管理中心/移动应用中，根据自己的应用进行选择；开放平台绑定的每个移动应用都有一个AppID。需要注意的是：目前安全域名只绑定了一个移动应用。
关于微信外部链接内容管理规范的声明：点击查看
步骤二、获取签名
获取签名这一块由后端的同事来完成，原因很简单，因为获取access_token要的ip必须加入服务号的ip白名单中，而我们本地的IP不是固定的
官网文档：后端获取签名方式
调用这个接口我们会获取到如下参数appId、timestamp、nonceStr、signature。
步骤三、前端引入微信的jssdk
网页中需要引入weixin.js
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.j"></script>如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
当然也支持npm的方式安装：
npm install weixin-js-sdk引入：
import wx from 'weixin-js-sdk'步骤四、前端完整示例
<wx-open-launch-app id="openApp" appid="xxx" extinfo="">
<!-- template为必选项 -->
<template>
<!-- 样式写在了template中的style里才生效哦 -->
<style>
.wx-btn{
width:100%;
color: #666;
}
</style>
<button>App内查看</button>
</template>
</wx-open-launch-app>
<script>
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开
appId: '', // 必填，开发者ID
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表
});
wx.ready(() => {
console.log("ready")
})
wx.error(() => {
console.log("error")
})
var btn = document.getElementById('openApp');
btn.addEventListener('launch', () => {
console.log('success');
});
btn.addEventListener('error', (e) => {
console.log('fail', e.detail);
});
</script>说明：
config的appId为开发者ID是公众号的获取的。wx-open-launch-app标签里的appid为步骤一里配置的移动应用Appid（不要跟wx.config里面的appid弄混了）。
标签里的extinfo通常传入的是一个url，用来打开指定的页面，这里有一点需要注意的是，我们应使用一个自定义的scheme，否则我们在打开App 的过程中会出现一个选取浏览器的过程。
关于标签的样式问题：
1. wx-open-launch-app 这个标签可以加样式style
2. wx-open-launch-app 标签外部样式和内部样式是隔离的
在开发中，我们需要判断是否是微信环境，根据环境不同做相应的处理，判断微信的方法：
is_weixn() {
let ua = navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true
} else {
return false
}
}关于未成功唤醒App
当我们完成上述工作之后，准备唤起我们的app的时候，发现居然不好使！！
你遇见的问题可能是这样的：
1. IOS能成功唤起，Android无法唤起
2. Android在后台运行时，能成功唤起app，当结束app进程时，无法唤起
3. Android唤起app之后，出现一层蒙版导致无法点击
出现这一系列问题，大概率是SDK关于Android和IOS的接入配置有问题。参考以下文档
IOS接入指南
Android接入指南
总结
- 配置需严格按照文档，wx.config调用时，jsApiList必须传入至少一项Api，不能只传openTagList。
- 外部样式无法影响标签内样式，因为template下生成了document-fragment单独的doc，样式已于外界隔离。
- template样式无法使用position。
- 标签本身可以设置样式，因此对其设置absolute，外部按正常方式写，只是样式多一个relative即可。
- 内部高度无法使用百分比，需要传入真实高度，因此不适用不知道外部高度的场景。
- 弹窗唤起后，不报错的情况下，点击允许和取消都会进入launch事件，按现在逻辑无法区分用户是点击的允许还是取消的。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
