web-view組件(jiàn)的(de)本質是(shì)使☆∏用(yòng)浮動框架标記對(duì) iframe₽• >來(lái)對(duì)src屬性指定的(de)頁面進§γ₽•行(xíng)加載。本文(wén)對(duì)web-view組件(jiàn)使用(yò≈ ↔₹ng)的(de)一(yī)些(xiē)注意事(shì)項進行(xíng)總結。

web-view組件(jiàn)可(kě)以使用(yòng↑£)src屬性來(lái)指定要(yào)在小(xiǎo)程序中顯示的(‌σde)頁面地(dì)址，這(zhè)個(gè)地(dì)址必須滿足下(xià)列兩個₩↔✔₩(gè)條件(jiàn)。

• 必須是(shì)https域名地(dì)址。
• 必須是(shì)在微(wēi)信公衆平台中配置為(wèi)白(b±φ←∏ái)名單的(de)域名。

微(wēi)信小(xiǎo)程序頁面的(de)wxml文(wén)件(jiànσ‌)的(de)代碼如(rú)下(xià)所示。

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

微(wēi)信小(xiǎo)程序中，一(yī)個(gè)頁面隻允許使$₹✘♣用(yòng)一(yī)個(gè)組件(jiàn)，并σ&≈且該組件(jiàn)會(huì)鋪滿整個(gè)頁面并覆蓋頁面中的(de)↕&其他(tā)組件(jiàn)。

同時(shí)該組件(jiàn)還(hái)支持以下(xià)事(shì)€≥件(jiàn)：

• bindload：src屬性指定的(de)頁面加載成功∏γ時(shí)觸發該事(shì)件(jiàn)。
• binderror：src屬性指定的(de)頁面加載失敗時(shí)觸發該事(shì)件(jiàn↕✔≥∏)。

一(yī)般的(de)，web-view組件(jiàn)的(de)src屬性δ¶指定的(de)H5頁面之間(jiān)，可(kě)以正常的(de)→•γ≥采用(yòng)超級鏈接a标記對(duì)進行(xín♣£₩$g)頁面之間(jiān)的(de)條轉。但(dàn)是(shì)web-view↓¥♦§頁面要(yào)想通(tōng)過手指觸碰返回小(xiǎo)程序頁面，就(jiù)無法使用(y÷★♦'òng)超級鏈接a标記了(le)。那(nà)麽這(z ₽ hè)個(gè)問(wèn)題應該如(rú)何解決呢(ne)？

1、在H5頁面引入JSSDK

首先需要(yào)在H5頁面中引入JSSDK，它可(kě)以讓H5頁面的(d>​e)js文(wén)件(jiàn)執行(xíng)微(wēi)信小(xiǎo)程序的(de)部λ §σ分(fēn)API命令。H5頁面引入JSSDK的(de)代碼如(rú)下(xià®↔£)所示。

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

2、為(wèi)需要(yào)跳(tiào)轉至小(xiǎo)程序頁面的(de €)元素綁定事(shì)件(jiàn)

可(kě)以通(tōng)過jQuery或原生(shēng)js找到(dào)需要(y€✔ào)跳(tiào)轉至小(xiǎo)程序頁面的(d÷γ×e)元素，然後為(wèi)該元素綁定click事(shì)件γ™✘‍(jiàn)或touchend事(shì)件(jiàn)。在事(shì)件(jiàn)中可(↑←×kě)以使用(yòng)下(xià)列API進行(x&↔₹íng)小(xiǎo)程序頁面的(de)條轉。

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

上(shàng)述API的(de)使用(yòng)與微(wēi)信小(xiǎo)程序中頁面跳(ti•✔£λào)轉的(de)API使用(yòng)規範是(shì)一(yī)樣的(de)，以wx.£‌↓miniProgram.navigateTo()為(wèi₽₽↕)例，該方法的(de)API格式如(rú)下(xià)所示。

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

總結
本文(wén)重點在于對(duì)web-view頁面返回小(xiǎo∞​♥)程序頁面進行(xíng)了(le)講解和(hé)總結。在小(xiǎo)程序開(kāi)發α™ 過程中，web-view頁面的(de)實現(xiàn)☆∑π還(hái)有(yǒu)許多(duō)開(kāi)發技(‍φjì)巧和(hé)功能(néng)，主要(yào)得(de)♦"Ω±力于JSSDK的(de)使用(yòng)。JSSDK的(de)說(shuōλ ✔≤)明(míng)文(wén)檔如(rú)下(xià)所示。