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; }
记下点滴,等老了慢慢欣赏