一、介绍
1 该标签做什么用的？
在微信内置浏览器端打开App，简单说就是在微信端打开某网页，可以在网页中打开App;
注：打开的网页不能是通过链接进入，而是通过分享的卡片等形式。
2 需求
需求是：通过App分享到微信的卡片，用户打开后，可以点击网页中的某个按钮，如果App存在，则打开该App，并进入指定的页面。App不存在，则进入应用市场的下载页面；
3 前期准备
首先公众号是本人通过nodeJs搭建的，App及分享到微信端的网页都是通过uniapp开发的。
配置相关：
1 服务号需要认证！且服务号和移动应用是同主体，或者有关联关系！
2 绑定JS接口安全域名：在微信号后台操作；绑定的域名是分享到微信端的网页的域名。
3 在微信开放平台的应用管理--公众号，关联需要跳转的App。
填写的信息包含：安全域名，移动应用名称，Appid；具体信息视实际情况哈！
以上是开发前的配置准备。
本人开发的思路是，客户端页面在初始化时请求服务端中的接口，将网页的url及参数传给该接口，服务端获取到url进行签名算法，回传给客户端签名，时间戳等参数，客户端通过config接口进行权限验证，验证成功后，开放标签便生效。
一、客户端
1 引入js-jdk：
方式很多，由于本人网页开发是uniapp框架，所以用的npm。其他不同框架，不同引入方式。在此不多叙述。
2 通过config接口注入权限验证配置并申请所需开放标签
以下代码的timestamp,nonceStr,signature都是从服务端过来的数据，客户端的这些参数要与服务端做签名时的参数一致，不能分别做各自的随机数，时间戳等。
由于jsApiList是必填的，所以可任意填一个简单的即可。主要是对开放标签做权限的校验。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [’onMenuShareAppMessage'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-app] // 可选，需要使用的开放标签列表
});
config验证通过后，会通过ready进行成功后的操作；
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
通过error接口处理失败验证。
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
总结：在页面初始化时，访问接口，获取到的签名等数据。config验证成功后，开放标签才能展示，如果验证失败，标签是不会展示的。当然，如果你去掉了标签中的script脚本，标签都会显示的，但这样做就没有什么意义了。
3 标签
<wx-open-launch-app
id="launch-btn"
appid="移动应用的AppID"
:extinfo="extinfo" //跳转携带信息，用于app接收后处理
@ready='ready'
@launch='launch'
@error='error'
>
<script type="text/wxtag-template">
<style>.btn {color: #FFFFFF;background-color: #19be6b;}</style>
<button class="btn" >App内查看</button>
</script>
</wx-open-launch-app>
1 ready事件是标签初始化完毕后，就可以进行点击操作；这个事件可以用于一些标签和其他按钮切换的操作。即一旦触发该事件，即表示标签可以进行操作了。
2 launch事件是用户点击跳转按钮并对确认弹窗进行操作后触发；实际上，我在该事件中并没有做任何操作，因为没有打印出任何有价值的信息，无法进行提示信息。
3 error事件是用户点击跳转按钮后出现错误。这里可以处理点击按钮失败后，跳转到应用市场或其他下载页面。
注：
extinfo这个是跳转app时携带的信息，用于App端获取后进一步做相关操作；我用的是字符串形式，主要app端便于获取及兼容等其他原因。
二、服务端
1 在服务端主要做的是签名，以及将config需要的数据传给客户端。
const arr=[
`jsapi_ticket=${ticket}`,// jsapi_ticket，通过与微信服务器交互所得，具体参考公众号文档
`noncestr=${noncestr}`, // 随机字符串
`timestamp=${timestamp}`,// 时间戳
`url=${url}`// 是需要访问的网页路径，包含参数；文档中说不能包含hash(#)，但实际上包含也没什么影响.
]
const signature = sha1(arr.sort().join('&'))
将上述参数返回给客户端。用于config验证。
三、App端
App是由uniapp开发的，所以在onLaunch函数中通过plus.runtime.arguments获取；或者在onShow函数中获取；但这两个分别有缺陷之处；
onLaunch缺陷：如果App已经启动了，通过开放标签再次打开App，是接受不到参数的；原因是onLaunch函数不再触发。
onShow缺陷：如果开放标签已经打开App，并进行了打开后业务的操作，如果用户此时触发onHide函数，再次回到App时，会再次触发onShow，即业务会再次被触发。
var args= plus.runtime.arguments;
获取到该参数后，进行响应业务的操作。
四、注意事项
1 开发工具调试：
开发工具的调试，不要在开发工具中直接操作，这样即便代码写的没问题也会报错；用手机扫描该页面的二维码进行调试就行；
2 真机调试
在真机微信端测试时，要通过点击卡片等形式进入，不能直接通过url地址进入网页，否则也是会一直报莫名其妙的错误的！
3 开放标签的动态隐藏
对开放标签做v-if或v-show的隐藏要非常注意。因为开放标签和config的验证是同步进行的，不能先config验证是否成功，再判断是否显示开放标签，这样做，即便config验证通过，开放标签页不能显示；
4 在uniapp或者vue相关框架中报警告
开放标签属于自定义标签，Vue会给予未知标签的警告，可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。
