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

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

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

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

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

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

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

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

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

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

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

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

• URL Scheme

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

通過后端接口生成的 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 實現(xiàn)打開小程序，跳轉(zhuǎn)代碼示例如下：

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

效果：

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

• URL Link

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

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

效果：

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

最新評論