H5跳转微信小程序

如题，最近有项目需要H5跳转到微信小程序，之前的认知中，跳转到微信小程序只有通过公众号、小程序、扫码这几种方式。终于H5支持跳转小程序了，废话不多说直接贴代码

1、需要微信公众号，并且是已经认证过的服务号。文档链接:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html,这个和获取微信公众号个人信息接口有点类似。

wx.config({
            // debug: false, // 调试时可开启
            appId: jsonData.content.appId, // <!-- replace -->
            timestamp: jsonData.content.timestamp, // 必填，填任意数字即可
            nonceStr: jsonData.content.nonceStr, // 必填，填任意非空字符串即可
            signature: jsonData.content.signature, // 必填，填任意非空字符串即可
            jsApiList: jsonData.content.jsApiList, // 必填，随意一个接口即可 
            openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
        })

唯一不同的是添加了：openTagList开放列表。这个接口是需要从服务器请求的，jsondata是服务器返回的数据信息。

2、H5中需要加入标签：

<wx-open-launch-weapp id="launchdiv" username="小程序原始ID" path="小程序页路径">
                    <template >
                        <button id="btn" >打开小程序</button>    
                    </template>
                </wx-open-launch-weapp>

以上就是所需参数：小程序原始ID和小程序的页面路径，需要注意的地方：template 标签必须有，它所包含的标签设置样式的话要直接写在标签里面，要不然不起作用。如果使用微信浏览器直接点开就可以跳转小程序，

如果是使用手机浏览器的话需要小程序生成URL Scheme,进入小程序点击工具

最后把生成的url scheme 放到H5里面，代码如下：window.location.href = "weixin://dl/business/?t=arfgrpQvnWt";就可以完成浏览器跳转小程序了。

3、记得实现引入jssdk.js.

以上就可以完成从H5跳转微信小程序了，如有不懂评论区留言。