demo圖, h5跳轉小程序
<!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_69xxxxxx" 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="">
<div style="width:88%;margin:9px auto">
<div style="font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;width:100%;box-sizing: border-box;border-radius: 2px;line-height:40px;text-align:center;background:#FE5A38;color:#fff;font-size:18px">去購買</div>
</div>
</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. username="gh_69xxxxxx" 小程序原始id 不是小程序wx開頭的id
5. path="pages/index/index.html" 后面要加.html
6. openTagList: ["wx-open-launch-weapp"] config配置參數必須填這個開放接口
7. <!-- <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>
除了這點外還有以下幾個坑點
- 不能用js來模擬點擊，有了局限性
- 樣式無法寫在外面中，只能在script標簽內內鏈寫或者行內樣式
- 無論是內鏈還是行內 都不支持rem
- 不會繼承樣式
- 如果開發標簽內需要使用圖片，不能用本地圖片，得用外網可以訪問的圖片，要不然會不顯示
官方文檔: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
最后給你們福利: 微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上 , 不然 顯示不了<wx-open-launch-weapp>
// 小程序跳轉要求 isok(){ // 微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上。 var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ; console.log(wechatInfo[1]) // alert(wechatInfo[1]) // Android 5.0及以上 var ua = navigator.userAgent.toLowerCase(); console.log(ua); if( !wechatInfo ) { // alert("僅支持微信") ; // this.$toast.fail('僅支持微信') } else if ( wechatInfo[1] < "7.0.12" ) { // alert("微信版本要求7.0.12及以上版本") ; this.$toast.fail({ duration: 8000, content: '微信版本要求7.0.12及以上版本' }); // this.$toast('微信版本要求7.0.12及以上版本') }else if (/android/i.test(navigator.userAgent)) { var test = /android\s([\w.]+)/;//IE var match = test.exec(ua); console.log(match); document.write("This is Android "+ match[1] +" browser."); //這是Android平台下瀏覽器 var version = match[1].split(".")[0]; if(version < 5){ // alert('Android系統要求5.0及以上版本'); // this.$toast('Android系統要求5.0及以上版本') this.$toast.fail({ duration: 8000, content: 'Android系統要求5.0及以上版本' }); } }else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { var test = /os\s([\w_]+)/;//IE var match = test.exec(ua); // var version = match[1].split("_")[0]; var version = match[1].split("_")[0]+'.'+match[1].split("_")[1] console.log(version) if(version < 10.4){ // alert('ios系統要求10.3及以上版本'); // this.$toast('ios系統要求10.3及以上版本') this.$toast.fail({ duration: 8000, content: 'ios系統要求10.3及以上版本' }); } // document.write("This is iOS " + version + " browser."); //這是iOS平台下瀏覽器 } }
更多參開鏈接: https://blog.csdn.net/weixin_45532305/article/details/109491862