H5跳轉小程序的方法

方法1 ：就是在相應的小程序中用開發者工具-雲開發-更多-靜態網站托管，在里面做H5頁面跳轉小程序，（非個人主體），目前沒有做過

方法2：就是H5綁定公眾號，然后公眾號中添加跳轉小程序按鈕，主要是開放的標簽wx-open-launch-weapp

注意事項：公眾號必須是服務號（這里面是個坑，我用訂閱號整了半天），ip白名單添加你的網頁域名，JS安全添加你的網頁域名

主要JS代碼

$.ajax({
          url:'這是接口請求地址?url=這里是你的網頁地址',
          contentType: "application/json; charset=utf-8",
          method: 'GET',
          success: function(data) {
              console.log('獲取接口成功',data)
              if(data.code==200){
                  wx.config({
                      debug: false,
                      appId: data.data.appId,//替換自己的appid
                      timestamp: data.data.timestamp, // 必填，生成簽名的時間戳
                      nonceStr: data.data.nonce, // 必填，生成簽名的隨機串
                      signature:data.data.sign,// 必填，簽名
                      jsApiList: ["updateAppMessageShareData","onMenuShareAppMessage",'chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
                     openTagList:['wx-open-launch-weapp']
                  })
              }
          },
          error: function(xhr) {
              // 導致出錯的原因較多，以后再研究
              console.log("獲取接口失敗",xhr);
          }
 })
wx.ready(function () {
//分享給朋友
wx.updateAppMessageShareData({
title: '享樂吧用笑容迎接2022', // 分享標題
desc: '享樂吧用笑容迎接2022', // 分享描述
link: 'https://static.strmall.xiangleba.com.cn/simleWeb/index.html', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: 'https://static.strmall.xiangleba.com.cn/simleWeb/img/logo.png', // 分享圖標
success : function() {
// 用戶確認分享后執行的回調函數
},
cancel : function() {
// 用戶取消分享后執行的回調函數
}
});
wx.onMenuShareAppMessage({
title: '享樂吧用笑容迎接2022', // 分享標題
desc: '享樂吧用笑容迎接2022', // 分享描述
link: 'https://static.strmall.xiangleba.com.cn/simleWeb/index.html', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: 'https://static.strmall.xiangleba.com.cn/simleWeb/img/logo.png', // 分享圖標
type: 'link', // 分享類型,music、video或link，不填默認為link
success: function () {
// 用戶點擊了分享后執行的回調函數
}
});
})
wx.error(function (res) {
console.log('驗證失敗',res);
});
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});

html,

<div class="content">
                                <wx-open-launch-weapp
                                  id="launch-btn"
                                  username="gh_XXX"
                                  path="pages/start/index.html?str=2022"
                                  style="width:100%;height:100%; position: absolute;left:0;top:-0.2rem;"
                                >
                                  <template>
                                    <button class="btn"   style="width:100%;height:100%; position: absolute;font-size:14px">打開小程序</button>
                                  </template>
                                </wx-open-launch-weapp>
                            </div>

CSS,最外面套個標簽，然后里面用絕對定位，然后隱藏。不然樣式不太好控制，外面主要靠這個按鈕去觸發打開小程序

.content{
             position:absolute;
             z-index: 2;
             left:0;
             top:0;
             width: 100%;
             height: 100%;
             opacity:0;
          }