<wx-open-launch-weapp>詳解
阿新 • • 發佈：2020-12-15
demo圖, 我這邊寫的是 點選圖片就跳轉.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <link rel="stylesheet" href="./css/common.css"> <title>微信公眾號h5頁面跳轉小程式</title> <style> html,body{ overflow: scroll; -webkit-overflow-scrolling: scroll; overflow-scrolling: scroll; background:rgba(246,246,246,1); } #app{ width: 100%; height: 100%; text-align: center; } img{ width: 100%; } </style> </head> <body> <div id="app"> <wx-open-launch-weapp id="launch-btn" username="gh_69b54a153fff" path="pages/index/index.html" @error="handleErrorFn" @launch="handleLaunchFn" > <!-- <template> <style>.btn { padding: 12px }</style> <button class="btn">開啟小程式</button> </template> --> <!-- <img src="./img/apple.png" alt=""> --> <script type="text/wxtag-template"> <img style="width:100%;" class="btn" src="https://ixxxxx/o_1epg43d4p1ldu1umolp61f4t17s5f.png" alt="">
<p>跳轉小程式</p> </script> </wx-open-launch-weapp> </div> <script src="./js/vue.js"></script> <script src="./js/jquery-2.1.1.min.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> var app = new Vue({ el: '#app', data: { dataList:null }, methods: { handleErrorFn(e){ console.log('fail', e.detail); alert('vuefail') }, handleLaunchFn(e){ console.log('success'); alert('vuesuccess') }, //獲取資料 卡片詳情 getData(){ var tagUrl = location.href; tagUrl = encodeURIComponent(tagUrl); // console.log(tagUrl)
// 自己後臺介面 傳當前頁面路徑引數, 獲取 config配置引數 $.get("https://xxxxxxxxxgetWxParams?url=" + tagUrl, function(res) { if (res.error == '00') { wx.config({ debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。 appId: 'wx22wxxxxxx', // 必填，()我們這裡填的服務號)公眾號的唯一標識 timestamp: res.result.timestamp, // 必填，生成簽名的時間戳 nonceStr: res.result.nonceStr, // 必填，生成簽名的隨機串 signature: res.result.signature, // 必填，簽名 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', "checkJsApi" ],// 必填，需要使用的JS介面列表 openTagList: ["wx-open-launch-weapp"] }); // config之後會自動呼叫ready方法 wx.ready(function() { // 驗證介面是否註冊完成 wx.checkJsApi({ jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'wx-open-launch-weapp' ], success: function(res) { console.log("驗證介面是否註冊完成-成功"); } }); // 微信朋友圈 wx.onMenuShareTimeline({ title: param.title, // 分享標題 desc: param.content, // 分享描述 link: param.url, // 分享連結 imgUrl: param.pic, // 分享圖示 type: 'link', // 分享型別,music、video或link，不填預設為link dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空 success: function() { // 使用者確認分享後執行的回撥函式 // alert('已分享'); }, cancel: function() { // 使用者取消分享後執行的回撥函式 console.log('已取消分享') } }); //獲取“分享給朋友” wx.onMenuShareAppMessage({ title: param.title, // 分享標題 desc: param.content, // 分享描述 link: param.url, // 分享連結 imgUrl: param.pic, // 分享圖示 type: 'link', // 分享型別,music、video或link，不填預設為link dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空 success: function() { // 使用者確認分享後執行的回撥函式 // alert('已分享'); }, cancel: function() { // 使用者取消分享後執行的回撥函式 // alert('已取消'); console.log('已取消分享') } }) }); wx.error(function(res) { // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。 }); } }) }, }, created(){ }, mounted (){ this.getData() } }) </script> </body> </html>
1.前提, 微信公眾後臺 服務號!! 配置了js安全域名 和 ip白名單!!!!!
2.真機測試 才會顯示!!!!!!!!
3.用圖片的話,要線上的
4. <!-- <template>
<style>.btn { padding: 12px }</style> <button class="btn">開啟小程式</button> </template> --> //template不支援的話 就用下面的, 樣式要行內樣式 <script type="text/wxtag-template"> <img style="width:100%;" class="btn" src="https://ixxxxx/o_1epg43d4p1ldu1umolp61f4t17s5f.png" alt="">
<p>跳轉小程式</p> </script>
wx2