本文已参与「新人创作礼」活动.一起开启掘金创作之路。
H5 跳转微信小程序、APP
随着微信小程序使用率越来越高，就会产生有很多需求需要H5跳转到小程序里，但是微信之前一直没有提供接口做跳转，我们只能做降级方案，在要跳转小程序的地方做了一个弹窗，弹窗里面放小程序码，引导用户长按识别小程序码，然后跳转到小程序内，整个流程非常之长，转化率可想而知也是很低的。
现在在做弋矶山信用付项目，项目需求通过点击H5页面中按钮可以直接跳转到微信小程序，用之前的方案肯定是不行，所以就在网上找资料，就去看了下微信的文档，发现微信偷偷的更新的这个接口，可以让微信浏览器下的H5跳转到小程序内。
微信官方文档：
developers.weixin.qq.com/doc/offiacc…
这里用的是JS-SDK的接口，需要使用1.6.0版本，js文件为res.wx.qq.com/open/js/jwe…（支持http和https）
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '', // 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
备注：wx-open-launch-app指H5跳转app
wx-open-launch-weapp 指H5跳转小程序
具体上代码：
HTML：
说明：
第一步：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
第二步：引入JS文件
第三步：在服务端验签获取配置信息。
第四步：在第三步成功后引入开放标签openTagList: [‘wx-open-launch-weapp’]，就可以使用了。
第五步：最好是在jsApiList里加上属性，否则会提示config：param is empty的错误。
签名算法：
需要先获取access_token，然后再获取jsapi_ticket，再将随机数，时间戳，jsapi_ticket，以及当前网页的URL进行按照字段名的ASCII 码从小到大排序使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串，然后再对该字符串进行SHA1签名。（注意字段名不要弄错了，一定要跟给出去的字段名一样，可以参考官方文档）
Ps:本人开发时遇到的问题：
- HTML样式调试不能在网页上调，在微信开发者工具调试也需要将工具升级为最新版本，以前老版本会出现真机会显示跳转按钮，工具里无法显示的BUG。
- 标签按钮样式需要自己写样式块，即用标签在标签中写，否则其他地方的样式均不识别也无作用。
- 签名校验一定一定要在后台代码处理，还有access_token和jsapi_ticket这两个一定要做缓存，否则会触发频率限制。
- 为了本地测试使用access_token需要对生产的推送做重发机制，否则本地用了access_token以后生产的token就失效了，如果没做重发机制那么会影响生产的微信推送功能。
- 需要绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
- 微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
- **实践得出，最好是在jsApiList里加上属性，否则会提示config：param is empty的错误。例如
同理以上的方法同样适用于H5跳转APP。
至此开发工作已完成，效果如下：
