最近收到一个需求：用户可以通过指定链接或二维码进入微信小程序，指定链接进入的微信小程序与正常微信小程序进入的有一些区别。
实现需求的想法：用h5页面跳转微信小程序，使用微信开放标签<wx-open-launch-weapp>。（后来 铁 和我说其实微信ju hua🌻码也可以实现这样子的效果😥）
期间遇到的问题：1、按照官网文档步骤下来后发现按钮无法显示；
2、按钮显示后，无法跳转微信小程序。
出现问题的原因：1、官方文档中说的一些内容没有搞清楚；
2、自己是个前端小小白菜什么专业术语都不懂，被后台唬~~过去。
解决问题：1、咱们先来看看微信的官方文档怎么说，嗯嗯~
首先，与咱们的微信版本和手机版本有关系，标准如下，如果这个没有符合要求，就先升级一下吧。
- 微信版本要求为：7.0.12及以上
- 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
2、按照文档的要求，在与微信小程序绑定的微信公众号里面去设置好“JS接口安全域名”，同时也加好“IP白名单”。
这里需要注意的点是：a、与微信小程序绑定的微信公众号必须为已认证的服务号，服务号与订阅号最快的辨别方式是，服务号是直接出现在微信聊天窗口的（就像是我和爸爸的聊天一样），订阅号是由微信里面的一个订阅号进去里面有很多很多的微信公众号。这里官方有提供一个“接口测试号申请”（，这里的测试号是订阅号，也是导致我后面按钮没有出现的原因之一。
b、“JS接口安全域名”和“IP白名单”，这个让专门管理微信公众号的同仁帮忙设置，安全域名例如：home.cnblogs.com，而不是；IP白名单为后台请求的ip，这里必须加上，如果不加则无法请求接口，微信小程序中可以不加。
3、在h5页面中通过config接口注入权限验证配置并申请所需开放标签，这有一个点后台唬我，说是“timestamp”，“nonceStr”，“signature”让我自己去请求接口都一样的，这里一定要后台请求接口返回给自己，我忘了配置了IP白名单，就前台自己请求，就请求不到access_token等，我这里是等了服务端然后通过接口去请求，然后自己手动生成的签名测试的。权限签名算法可查看官网文档，如果和我一样是自己去手动请求要生成签名可以使用这个“微信JS接口签名校验工具”，输入“时间戳”，“通过接口获得到的jsapi_ticket”，“随机字符串”，“需要跳转的链接”，就可以生成签名。
<script>
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
这里填与微信小程序绑定的微信公众号的appid', // 必填，公众号的唯一标识
timestamp: '', // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '', // 必填，签名
这里为必填内容，如果没有要使用的JS接口列表可以随便挑选一个写上去，不然对后续有问题（）
是打开微信小程序就使用['wx-open-launch-weapp']
});
wx.ready(function() {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.error(function(res) {
console.log(res)
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
</script>
4、这里可以直接将官方的例子拿过来使用了，具体样式可以后续根据要求改变。
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx（这里是微信小程序的原始id）" path="pages/home/index?user=123&action=abc（要跳转的小程序路径可以加参数）">
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script> 5、这样子就可以出现“打开小程序”的按钮了，不过我最后还是没有能打开微信小程序，因为还没有发布，当正式发布后，就可以正常打开了，以及后续工作任务啦~(虽然我还没有看到正式发布后的效果🐷)
最后：谢 铁 对我的指导和帮助~(ง •_•)ง
不管自己会不会，学到知识开始贯通，才管自己会不会
