微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景整理

一、微信小程序內(nèi)嵌的h5

• 微信小程序跳轉(zhuǎn)內(nèi)嵌的h5：

<web-view :src="loadUrl"></web-view>

在微信小程序內(nèi)編寫(xiě)webview文件，通過(guò)webview去跳轉(zhuǎn)h5，loadUrl為h5的地址

• 嵌套的h5跳回微信小程序內(nèi)部

 import wx from 'weixin-js-sdk';
 wx.miniProgram.navigateTo({
  	url: "/pages/index/index",
 });

h5中引入微信jsSdk，通過(guò)wx.miniProgram.navigateTo返回至微信小程序內(nèi)部

二、非嵌套，h5需要跳轉(zhuǎn)打開(kāi)某個(gè)微信小程序

可以通過(guò)wx-open-launch-weapp，URL Scheme和URL Link三種方式，每天生成 URL Scheme 和 URL Link 總數(shù)量上限為50萬(wàn)

• 開(kāi)放標(biāo)簽：wx-open-launch-weapp

參考文檔：wx-open-launch-weapp

• URL Scheme

服務(wù)端API，該接口用于獲取小程序 scheme 碼，適用于短信、郵件、外部網(wǎng)頁(yè)、微信內(nèi)等拉起小程序的業(yè)務(wù)場(chǎng)景。目前僅針對(duì)國(guó)內(nèi)非個(gè)人主體的小程序開(kāi)放
注意事項(xiàng)：
1.微信內(nèi)的網(wǎng)頁(yè)如需打開(kāi)小程序請(qǐng)使用微信開(kāi)放標(biāo)簽-小程序跳轉(zhuǎn)按鈕，無(wú)公眾號(hào)也可以直接使用小程序身份開(kāi)發(fā)網(wǎng)頁(yè)并免鑒權(quán)跳轉(zhuǎn)小程序，見(jiàn)云開(kāi)發(fā)靜態(tài)網(wǎng)站跳轉(zhuǎn)小程序。符合開(kāi)放范圍的小程序可以下發(fā)支持打開(kāi)小程序的短信
2.該功能基本覆蓋當(dāng)前用戶正在使用的微信版本，開(kāi)發(fā)者無(wú)需進(jìn)行低版本兼容
3.只能生成已發(fā)布的小程序的 URL Scheme
4.通過(guò) URL Scheme 跳轉(zhuǎn)到微信時(shí)，可能會(huì)觸發(fā)系統(tǒng)彈框詢問(wèn)，若用戶選擇不跳轉(zhuǎn)，則無(wú)法打開(kāi)小程序。請(qǐng)開(kāi)發(fā)者妥善處理用戶選擇不跳轉(zhuǎn)的場(chǎng)景
部分瀏覽器會(huì)限制打開(kāi)網(wǎng)頁(yè)直接跳轉(zhuǎn)，可參考示例網(wǎng)頁(yè)設(shè)置跳轉(zhuǎn)按鈕

通過(guò)后端接口生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*

iOS系統(tǒng)支持識(shí)別 URL Scheme，可在短信等應(yīng)用場(chǎng)景中直接通過(guò)Scheme跳轉(zhuǎn)小程序。Android系統(tǒng)不支持直接識(shí)別 URL Scheme，用戶無(wú)法通過(guò) Scheme 正常打開(kāi)小程序，開(kāi)發(fā)者需要使用 H5 頁(yè)面中轉(zhuǎn)，再跳轉(zhuǎn)到 Scheme 實(shí)現(xiàn)打開(kāi)小程序，跳轉(zhuǎn)代碼示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'

效果：

該跳轉(zhuǎn)方法可以在用戶打開(kāi) H5 時(shí)立即調(diào)用，也可以在用戶觸發(fā)事件后調(diào)用。

• URL Link

服務(wù)端API，獲取小程序 URL Link，適用于短信、郵件、網(wǎng)頁(yè)、微信內(nèi)等拉起小程序的業(yè)務(wù)場(chǎng)景。目前僅針對(duì)國(guó)內(nèi)非個(gè)人主體的小程序開(kāi)放
注意事項(xiàng)：
1.只能生成已發(fā)布的小程序的 URL Link。
2.在微信內(nèi)或者安卓手機(jī)打開(kāi) URL Link 時(shí)，默認(rèn)會(huì)先跳轉(zhuǎn)官方 H5 中間頁(yè)，如果需要定制 H5 內(nèi)容，可以使用云開(kāi)發(fā)靜態(tài)網(wǎng)站。
通過(guò)后端接口生成的 URL Scheme 如下所示：

https://wxaurl.cn/TICKET 或 https://wxmpurl.cn/TICKET

效果：

到此這篇關(guān)于微信小程序與h5的相互跳轉(zhuǎn)場(chǎng)景分析的文章就介紹到這了,更多相關(guān)微信小程序與h5跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論