web-view組件的(de)本質是(shì)使用浮動框架标記對 iframe來(lái)對src屬性指定的(de)頁面進行加載。本文對web-view組件使用的(de)一些注意事項進行總結。

web-view組件可以(yǐ)使用src屬性來(lái)指定要(yào / yāo)在(zài)小程序中顯示的(de)頁面地(dì / de)址，這(zhè)個(gè)地(dì / de)址必須滿足下列兩個(gè)條件。

• 必須是(shì)https域名地(dì / de)址。
• 必須是(shì)在(zài)微信公衆平台中配置爲(wéi / wèi)白名單的(de)域名。

微信小程序頁面的(de)wxml文件的(de)代碼如下所示。

<web-view src=“https://www….”>web-view>

微信小程序中，一個(gè)頁面隻允許使用一個(gè)組件，并且該組件會鋪滿整個(gè)頁面并覆蓋頁面中的(de)其他(tā)組件。

同時(shí)該組件還支持以(yǐ)下事件：

• bindload：src屬性指定的(de)頁面加載成功時(shí)觸發該事件。
• binderror：src屬性指定的(de)頁面加載失敗時(shí)觸發該事件。

一般的(de)，web-view組件的(de)src屬性指定的(de)H5頁面之(zhī)間，可以(yǐ)正常的(de)采用超級鏈接a标記對進行頁面之(zhī)間的(de)條轉。但是(shì)web-view頁面要(yào / yāo)想通過手指觸碰返回小程序頁面，就(jiù)無法使用超級鏈接a标記了(le／liǎo)。那麽這(zhè)個(gè)問題應該如何解決呢？

1、在(zài)H5頁面引入JSSDK

首先需要(yào / yāo)在(zài)H5頁面中引入JSSDK，它可以(yǐ)讓H5頁面的(de)js文件執行微信小程序的(de)部分API命令。H5頁面引入JSSDK的(de)代碼如下所示。

<script src="../static/js/jweixin-1.6.0.js">script>

2、爲(wéi / wèi)需要(yào / yāo)跳轉至小程序頁面的(de)元素綁定事件

可以(yǐ)通過jQuery或原生js找到(dào)需要(yào / yāo)跳轉至小程序頁面的(de)元素，然後爲(wéi / wèi)該元素綁定click事件或touchend事件。在(zài)事件中可以(yǐ)使用下列API進行小程序頁面的(de)條轉。

• wx.miniProgram.navigateTo()
• wx.miniProgram.navigateBack()
• wx.miniProgram.switchTab()
• wx.miniProgram.reLaunch()
• wx.miniProgram.redirectTo()

上(shàng)述API的(de)使用與微信小程序中頁面跳轉的(de)API使用規範是(shì)一樣的(de)，以(yǐ)wx.miniProgram.navigateTo()爲(wéi / wèi)例，該方法的(de)API格式如下所示。

wx.miniProgram.navigateTo({
   url:'../swt/swt',            //指定跳轉至小程序頁面的(de)路徑
   success: function(){
	  console.log('success');   //頁面跳轉成功的(de)回調函數

總結
本文重點在(zài)于(yú)對web-view頁面返回小程序頁面進行了(le／liǎo)講解和(hé / huò)總結。在(zài)小程序開發過程中，web-view頁面的(de)實現還有許多開發技巧和(hé / huò)功能，主要(yào / yāo)得力于(yú)JSSDK的(de)使用。JSSDK的(de)說(shuō)明文檔如下所示。