小程序跳轉(zhuǎn)h5百科-微信小程序內(nèi)嵌的h5如何跳轉(zhuǎn)到其他h5鏈接？

小程序跳轉(zhuǎn)h5

微信小程序作為一個越來越受歡迎的營銷工具，使得商家可以快速地將業(yè)務(wù)推廣到更廣泛的用戶群體。但是，在小程序中打開H5頁面有時會變得棘手。讓我們一起看看如何解決從小程序內(nèi)嵌的H5跳轉(zhuǎn)到其他H5鏈接的問題。

1、設(shè)置H5頁面路由規(guī)則

首先，你需要在小程序后臺的“設(shè)置”選項卡下找到“開發(fā)設(shè)置”，然后開啟“關(guān)聯(lián)小程序”。此外，你還需在小程序根目錄下的app.json文件中設(shè)置「H5頁面路徑配置」:

{
  "pages": [
    "pages/home/index",
    "pages/about/index",
     // H5頁面
    "pages/webview/index"
  ],
  "subPackages": [ ],
  "window": {
  	...
  },
  "networkTimeout": {
    "request": 30000,
    "downloadFile": 10000
  },
  // H5頁面路由設(shè)置
  "navigateToMiniProgramAppIdList": [ ],
  "usingComponents": { }
}

以上面的JSON代碼為例, 我們在"pages"數(shù)組里定義了三個頁面: 主頁、關(guān)于我和一個webview頁面用于打開H5頁面。注意,新增的webview必須是現(xiàn)有小程序頁面之一：即前面的 “pages”數(shù)組里已經(jīng)存在的一頁。

2、編寫跳轉(zhuǎn)代碼

定義好H5頁面路徑配置后，你還需要在小程序JS文件里編寫相應(yīng)的跳轉(zhuǎn)代碼：

wx.navigateTo({
   url: '/pages/webview/index?weburl=https://www.example.com',
 })

代碼中，“/pages/webview/index”是預(yù)定義的H5頁面路徑，“？weburl=”后面是要跳轉(zhuǎn)的H5頁面的URL地址。

3、處理返回鍵

為了讓你的H5網(wǎng)頁有很好的用戶體驗(yàn)，你需要對小程序內(nèi)嵌的H5頁面進(jìn)行返回鍵處理。只需在webview頁面的js代碼中使用wx.navigateBack方法返回。如下所示：

// “返回上一頁”按鈕事件處理
onNavigateBack: function() {
 	 wx.navigateBack({
    		delta: 1
  	});
}

4、多次跳轉(zhuǎn)問題

如果你的小程序需要多次在內(nèi)部跳轉(zhuǎn)至不同的H5 URL，則需要通過JSBridge實(shí)現(xiàn)該功能。下面是一個簡單的偽代碼示例：

//HTML代碼片段
Link 1
Link 2
//JS代碼片段
function myFunction(url) {
   var message = {
      type: 'redirect',
      data: url
   };
   // 發(fā)送消息給微信客戶端
   WeixinJSBridge.send(message);
}

以上代碼將偽造發(fā)送一個重定向請求到指定的H5網(wǎng)址。

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標(biāo)明：himall原創(chuàng)>