方法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; }