前言:
最近公司有一個這樣的需要,需要從我們在現(xiàn)有的公眾號H5頁面中加一個跳轉(zhuǎn)到第三方小程序的按鈕。之前只知道小程序之間是可以相互跳轉(zhuǎn)的,今天查閱了下微信開發(fā)文檔原來現(xiàn)在H5網(wǎng)頁也支持小程序之間的跳轉(zhuǎn)了,下面就簡單描述一下對接的流程。
微信公眾號詳細(xì)對接文檔:
1
公眾號關(guān)聯(lián)小程序:
注意:在對接跳轉(zhuǎn)之前我們需要在需要跳轉(zhuǎn)的小程序關(guān)聯(lián)到我們的公眾號中。公眾號可以關(guān)聯(lián)同一主體的小程序10個,不同主體的3個。
1、進入公眾號后臺h5頁面老是彈出廣告,路徑:廣告與服務(wù)——小程序—小程序管理—添加
2、關(guān)聯(lián)小程序—管理員微信掃碼確認(rèn)
3、搜索小程序名稱或APPID綁定
4、綁定成功等待小程序管理者同意
查看小程序原始id:
小程序原始idh5頁面老是彈出廣告,即小程序?qū)?yīng)的以gh_開頭的id
找到關(guān)聯(lián)成功的小程序,鼠標(biāo)放入其中找到詳情查看小程序原始id
綁定JS接口安全域名:
登錄微信公眾平臺進入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
微信JS-SDK的使用步驟,配置信息生成詳細(xì)說明(.NET版):
跳轉(zhuǎn)標(biāo)簽、前提條件和屬性說明:跳轉(zhuǎn)小程序:wx-open--weapp
用于頁面中提供一個可跳轉(zhuǎn)指定小程序的按鈕。使用此標(biāo)簽后,用戶需在網(wǎng)頁內(nèi)點擊標(biāo)簽按鈕方可跳轉(zhuǎn)小程序。H5通過開放標(biāo)簽打開小程序的場景值為1167。
開放對象已認(rèn)證的服務(wù)號,服務(wù)號綁定“JS接口安全域名”下的網(wǎng)頁可使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。已認(rèn)證的非個人主體的小程序,使用小程序云開發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁,可以使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。錯誤提示
若跳轉(zhuǎn)時出現(xiàn)以下頁面,表示網(wǎng)頁綁定的服務(wù)號或小程序無權(quán)限,請檢查是否符合上述開放對象條件。
屬性
名稱
必填
默認(rèn)值
備注
是
所需跳轉(zhuǎn)的小程序原始id,即小程序?qū)?yīng)的以gh_開頭的id
path
否
所需跳轉(zhuǎn)的小程序內(nèi)頁面路徑及參數(shù)(不填寫的話默認(rèn)跳轉(zhuǎn)小程序首頁)
代碼實現(xiàn):
注意:使用瀏覽器或者微信開發(fā)工具調(diào)試wx-open--weapp開發(fā)標(biāo)簽都不會顯示,只有在真機中才會有效果(前提還是接口注入權(quán)限驗證配置通過)。
H5打開小程序 <script type="text/wxtag-template"> </script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script type="text/javascript"> var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { console.log('fail', e.detail); }); wx.ready(function () { var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork' var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger' if (isWeixin) { wx.config({ //debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印 appId: 'ccccxxxx4354353453', // 必填,公眾號的唯一標(biāo)識 timestamp: 0123456, // 必填,生成簽名的時間戳 nonceStr: 'nonceStr', // 必填,填任意非空字符串即可 signature: 'signature', // 必填,填任意非空字符串即可 jsApiList: ['showOptionMenu', 'chooseImage', 'previewImage'], // 必填,隨意一個接口即可 openTagList: ['wx-open-launch-weapp'], // 填入打開小程序的開放標(biāo)簽名 }) } else { alert("請在微信中打開"); } }) </script>
實現(xiàn)效果: