智慧小程式檔案館 —— 聊一聊 web-view 元件

百度智慧小程式學院發表於2018-09-21
WebView元件

哈嘍大家好～今天是百度智慧小程式學院“智慧小程式檔案館”的第一課，在接下來的日子裡，小編會定期 or 不定期的為您介紹、解答更多關於智慧小程式的使用方法，歡迎大家持續關注，留言互動～

很多開發智慧小程式的朋友，經常會對於 web-view 元件的使用感到困惑，不知道要如何配置，才能通過使用 web-view 元件來完成融合開發，複用自己之前的 web 頁面，今天我們就和大家好好聊一聊 web-view 元件：

web-view元件簡介

按照官網的說法來講：“web-view 元件是一個可以用來承載網頁的容器，會自動鋪滿整個智慧小程式頁面。”

其實前端的同學大可以把它理解為類似於一個全屏鋪開的，z-index最高的iframe。 訪問一個頁面時，使用web-view元件的src屬性，它將會覆蓋在該頁面所有的元件之上。(如圖1.1)

智慧小程式檔案館 —— 聊一聊 web-view 元件

圖1.1

每個頁面只能有一個web-view元件，如果有多個，則只有第一個web-view會生效。

web-view元件使用的前提條件

web-view元件中，所使用網頁的域名需要提前在開放平臺的域名白名單中進行配置。 如圖2.1與圖2.2：

智慧小程式檔案館 —— 聊一聊 web-view 元件

圖2.1

智慧小程式檔案館 —— 聊一聊 web-view 元件

圖2.2

為了監測域名的合法性，我們需要下載一個校驗檔案，並放到域名的根目錄下。這樣，開放平臺才能校驗這個域名是不是屬於你的。如果web-view元件中使用的域名沒有在域名白名單中進行配置，那麼web-view元件就不會生效。

  • 如果 web-view 使用的網頁中使用了 iframe ，那麼iframe 的 src 中使用的域名也需要配置到域名白名單中。

  • 頁面中傳送的 ajax 請求和靜態資源請求則不會受到此限制。

web--view元件中可以使用小程式中的一些API，不過前提是要在網頁中引用智慧小程式的 jssdk ，地址如下：

<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan.js"></script>
複製程式碼

這段指令碼會在window上掛載全域性變數swan，在程式碼中可以像這樣使用端能力： 

swan.webView.navigateTo({url: '/pages/detail/index'});
複製程式碼

也可以動態使用js插入：

  • 在小程式中： 

<!-- 在小程式中 -->
<web-view src="https://m.baidu.com/usrprofile?action=home&model=user&ori=index" bindmessage="mymessage"></web-view>
swan.webView.postMessage({
   data: 1
});
複製程式碼
  • 在web-view的網頁裡
var scrip = document.createElement('script');
scrip.src = 'https://b.bdstatic.com/searchbox/icms/searchbox/js/swan.js';
document.body.appendChild(scrip);
複製程式碼
  • 目前官網的這段指令碼使用的還是固定地址。所以，想要使用的同學可以在官網的JSSDK後面加個query，如：?timestamp=xxxx。
  • 防止快取造成的影響，也可下載到本地CDN進行管理。

web-view元件的UA

通過實際檢測，我們發現，在web-view中使用網頁，可以區分出來小程式與手機百度UA的不同的：

IOS中web-view的UA
Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E217 swan/1.6(web-view) baiduboxapp/10.11.0.0 (Baidu; P2 11.3)
Android中web-view的UA
Mozilla/5.0 (Linux; Android 5.1.1; vivo X7Plus Build/LMY47V; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/48.0.2564.116 Mobile Safari/537.36 T7/10.11 swan/1.6 baiduboxapp/10.10.0.12 (Baidu; P1 5.1.1)
複製程式碼

這裡可以看到，其中有swan的標識和版本號，並且有webview的標識，媽媽再也不用擔心我的網頁區分不出來手百與小程式啦～～

這裡可以給廣大使用webvie，並想檢測版本號的同學一個福利 —— 寫好的獲取版本號的正則!

var ua = `Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E217 swan/1.6(web-view) baiduboxapp/10.11.0.0 (Baidu; P2 11.3)`;
/swan\/([^(]*)\(web-view\)/g.exec(ua);
// 輸出結果： ["swan/1.6(web-view)", "1.6", index: 110, input: "Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac O…(web-view) baiduboxapp/10.11.0.0 (Baidu; P2 11.3)", groups: undefined]
複製程式碼

web-view元件與小程式通訊

web-view元件可以與小程式本體通訊，這樣可以間接的通過小程式呼叫所有swan的API，使用方法如下：

  • 在小程式中：
<!-- 在小程式中 -->
<web-view src="https://m.baidu.com/usrprofile?action=home&model=user&ori=index" bindmessage="mymessage"></web-view>
複製程式碼
  • 在web-view的網頁裡
// 在小程式web-view元件的網頁中
swan.webView.postMessage({
   data: 1
});
複製程式碼

通過這種方式，我們就可以實現和小程式的所有互動啦~~

不過需要注意的是，這種postMessage只會在特定時機（小程式後退、元件銷燬、分享）觸發哦。

相關文章