h5跳转小程序

1、html页面引入 https://res.wx.qq.com/open/js/jweixin-1.6.0.js

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2、html页面 添加标签 wx-open-launch-weapp，并设置username（小程序的原始id，公众平台可以拿到gh_xxxxxx）,path（跳转的小程序页面，路径要加.html，带参的话在wx-open-launch-weapp标签上setAttribute.(）），注意 设置wx-open-launch-weapp的样式,按钮的样式必须写在template内部。

    #launch-btn{

        display: block;

        width: 100%;

    }

<wx-open-launch-weapp id="launch-btn" username="gh_fdcf82b6fa07" path="pages/index/index.html?id=111">
        <template>
            <style>
                .btn{
                    color: #fff;
                    font-size: 18px;
                    text-align: center;
                    width: 206px;
                    height: 44px;
                    line-height: 44px;
                    margin: 53px auto;
                    background-color: #572b8c;
                    border-radius: 30px;
                    letter-spacing: 2px;
                }
            </style>
            <div class="btn">跳转小程序</div>
        </template>
    </wx-open-launch-weapp>

　　3、调接口拿到小程序签名配置信息，拿到配置信息后，向配置信息内添加openTagList:['wx-open-launch-weapp']

    $.ajax({
        type: 'GET',
        url: '接口路径',
        dataType: 'json',
        success: function(res){
            res.openTagList = ['wx-open-launch-weapp']
            res.debug = true
            wx.config(res)
            wx.ready(function () {
                cb && cb()
            })  
        },
        error: function(xhr, type){
          console.log(`${type}: ${xhr}`)
        }
      })

4、到目前为止，在浏览器，或者开发工具上都没办法看到你加按钮，所以最好提前写好样式。配置安全域名：1、把h5放到服务器，拿到域名后登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。2、把h5上传到腾讯云上。

5、用手机查看线上h5，这个时候终于看到按钮了，然后点击看是否成功，如果提示小程序未发布，先将需要跳转的小程序发布到线上