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，這個時候終於看到按鈕了，然后點擊看是否成功，如果提示小程序未發布，先將需要跳轉的小程序發布到線上