智慧小程式檔案館 —— 聊一聊 web-view 元件
哈嘍大家好～今天是百度智慧小程式學院“智慧小程式檔案館”的第一課，在接下來的日子裡，小編會定期 or 不定期的為您介紹、解答更多關於智慧小程式的使用方法，歡迎大家持續關注，留言互動～
很多開發智慧小程式的朋友，經常會對於 web-view 元件的使用感到困惑，不知道要如何配置，才能通過使用 web-view 元件來完成融合開發，複用自己之前的 web 頁面，今天我們就和大家好好聊一聊 web-view 元件：
web-view元件簡介
按照官網的說法來講：“web-view 元件是一個可以用來承載網頁的容器，會自動鋪滿整個智慧小程式頁面。”
其實前端的同學大可以把它理解為類似於一個全屏鋪開的，z-index
每個頁面只能有一個web-view元件，如果有多個，則只有第一個web-view會生效。
web-view元件使用的前提條件
web-view元件中，所使用網頁的域名需要提前在開放平臺的域名白名單中進行配置。 如圖2.1與圖2.2：
為了監測域名的合法性，我們需要下載一個校驗檔案，並放到域名的根目錄下。這樣，開放平臺才能校驗這個域名是不是屬於你的。如果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" 這段指令碼會在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只會在特定時機（小程式後退、元件銷燬、分享）觸發哦。