h5跳轉(zhuǎn)微信小程序
首先我們先來看一下目前微信官方提供的兩種打開微信小程序的方式以及相關(guān)適用場景
| 打開方式 | 適用場景 | 場景值 | 使用方式 | 備注 | 官網(wǎng)鏈接 |
|---|---|---|---|---|---|
| URL Scheme | 短信、郵件、等微信外網(wǎng)頁打開小程序 | 1065 | location.href = 'weixin://dl/business/?t= *TICKET*' |
TICKET由服務(wù)端接口返回（openlink） | 獲取 URL Scheme |
wx-open-launch-weapp |
微信內(nèi)網(wǎng)頁 | 1167 | 頁面配置<wx-open-launch-weapp>標(biāo)簽 |
需配置JS接口域名或云開發(fā)靜態(tài)網(wǎng)站托管綁定的域名下網(wǎng)頁 | https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html |
目前的應(yīng)用場景是在公眾號打開我們的網(wǎng)頁，然后跳轉(zhuǎn)到微信小程序的對應(yīng)頁面（因?yàn)槭俏⑿艃?nèi)網(wǎng)頁，微信提倡用jssdk的標(biāo)簽跳轉(zhuǎn)，urlscheme是否可以待驗(yàn)證），下面總結(jié)下都需要哪些條件：
一. jssdk
- 綁定域名
具體配置JS接口安全域名(MP_verify_A1x6SQCniCBqVPK2.txt文件千萬不要忘記下載，否則再怎么調(diào)試都會報(bào)錯(cuò))
引入JS文件
通過config接口注入權(quán)限驗(yàn)證配置
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印。
appId: '', // 必填，公眾號的唯一標(biāo)識
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
??這里需要后臺調(diào)用微信接口，返回js需要的參數(shù)https://blog.csdn.net/qq_38420688/article/details/90577741
- 跳轉(zhuǎn)小程序：wx-open-launch-weapp
用于頁面中提供一個(gè)可跳轉(zhuǎn)指定小程序的按鈕。使用此標(biāo)簽后，用戶需在網(wǎng)頁內(nèi)點(diǎn)擊標(biāo)簽按鈕方可跳轉(zhuǎn)小程序。H5通過開放標(biāo)簽打開小程序的場景值為1167。
4.1 已認(rèn)證的服務(wù)號，服務(wù)號綁定JS接口安全域名下的網(wǎng)頁可使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
4.2 已認(rèn)證的非個(gè)人主體的小程序，使用小程序云開發(fā)的靜態(tài)網(wǎng)站托管綁定的域名下的網(wǎng)頁，可以使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
若跳轉(zhuǎn)時(shí)出現(xiàn)以下頁面，表示網(wǎng)頁綁定的服務(wù)號或小程序無權(quán)限，請檢查是否符合上述開放對象條件。 <img src="https://res.wx.qq.com/op_res/AVNO5G9YvNvN45ZU0budE1Xv6i1NfyHD-DYJnDyLxv6yjFVhwD_SqdzWxEKAtaPs" alt="無權(quán)限提示" style="zoom:30%;" />
- 代碼示例
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn { padding: 12px }</style>
<button class="btn">打開小程序</button>
</script>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
二. URL Scheme
通過服務(wù)端接口或在小程序管理后臺「工具」-「生成 URL Scheme」入口可以獲取打開小程序任意頁面的 URL Scheme。適用于從短信、郵件、微信外網(wǎng)頁等場景打開小程序。 通過 URL Scheme 打開小程序的場景值為 1065。
生成的 URL Scheme 如下所示：
weixin://dl/business/?t= *TICKET*
iOS系統(tǒng)支持識別 URL Scheme，可在短信等應(yīng)用場景中直接通過Scheme跳轉(zhuǎn)小程序。
Android系統(tǒng)不支持直接識別 URL Scheme，用戶無法通過 Scheme 正常打開小程序，開發(fā)者需要使用 H5 頁面中轉(zhuǎn)，再跳轉(zhuǎn)到 Scheme 實(shí)現(xiàn)打開小程序，跳轉(zhuǎn)代碼示例如下：
location.href = 'weixin://dl/business/?t= *TICKET*'
該跳轉(zhuǎn)方法可以在用戶打開 H5 時(shí)立即調(diào)用，也可以在用戶觸發(fā)事件后調(diào)用。
