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="100%;height:100%; position: absolute;left:0;top:-0.2rem;"
                                >
                                  <template>
                                    <button class="btn"   style="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;
          }