小程序一步步的更新迭代，雖然踩坑不斷，但是總體來(lái)說(shuō)是越來(lái)越強大了，今天我們就來(lái)說(shuō)一下小程序的web-view組件，相信很多有公司業(yè)務(wù)的朋友已經(jīng)踩過(guò)坑了，但是由于web-view對個(gè)人類(lèi)型的不支持，所以也有很多朋友沒(méi)有辦法上手，不過(guò)沒(méi)關(guān)系，下面我就簡(jiǎn)單說(shuō)一下，web-view究竟要怎么內嵌h5？又該如何配置呢？
### 首先簡(jiǎn)單介紹一下web-view，看過(guò)官方api的朋友可以自動(dòng)忽略忽略，直接進(jìn)入---配置步驟---即可
功能介紹
web-view 組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì )自動(dòng)鋪滿(mǎn)整個(gè)小程序頁(yè)面。
類(lèi)似于Frame、Iframe、Frameset標記，只是對于目前來(lái)說(shuō)，web-view還缺乏靈活性，不過(guò)相信很多人已經(jīng)很滿(mǎn)足了（如果非要吐槽，我只想說(shuō)，web-view生不逢我的時(shí)啊...不提了，一把辛酸淚）
使用及后期配置限制問(wèn)題
1. 個(gè)人類(lèi)型與海外類(lèi)型的小程序暫不支持使用。
2. js-sdk接口限制（具體請參考 官方api ）。
3. 每個(gè)頁(yè)面只能有一個(gè)< web-view />。
4. 最多可以添加20個(gè)業(yè)務(wù)域名。
5. 一年只可修改50次業(yè)務(wù)域名。
web-view
| 屬性 | 類(lèi)型 | 默認值 | 說(shuō)明 | |
|---|---|---|---|---|
| src | String | none | webview 指向網(wǎng)頁(yè)的鏈接。需登錄小程序管理后臺配置域名白名單。 |
示例代碼
<!-- 結構層 --> <web-view src="h5地址鏈接"></web-view>
配置步驟
1. 配置業(yè)務(wù)域名 2. 選擇基礎庫
① --- 配置業(yè)務(wù)域名
| 步驟 | 名稱(chēng) | 說(shuō)明 |
|---|---|---|
| 一 | 校驗文件 | 下載校驗文件（GH0XFEdVsr.txt）然后找服務(wù)端的朋友配合一下，將校驗文件放置在將要嵌套的業(yè)務(wù)域名的根目錄，例：h5頁(yè)面：mp.weixin.qq.com/index.html，那么你需要配置的就是mp.weixin.qq.com/GH0XFEdVsr.txt，校驗成功后，你才能配置第二步的業(yè)務(wù)域名。 |
| 二 | 配置域名 | 例：mp.weixin.qq.com/ |
如下圖：
② --- 選擇基礎庫
這一步是最簡(jiǎn)單的，但確實(shí)很多朋友最容易忽略的（咳咳...），開(kāi)發(fā)者工具-->詳情設置-->選擇1.6.4及以上版本即可（目前只支持到1.6.4）。
如下圖：
總結：
以上說(shuō)的就是web-view簡(jiǎn)單的配置流程，大部分的內容小程序的官方api都已經(jīng)給出，這里只是把配置流程的步驟再進(jìn)一步的詳細化，變得更通俗一點(diǎn)，但是如果你需要在h5頁(yè)面中做某些操作....
那就來(lái)看一下官方示例：快速通道
<! -- html -->
< script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></ script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'}) // 這里封裝一下就可以跳轉了...
（注：若遇到調試工具正常起跑web-view，手機微信打不開(kāi)的情況，不要捉急，升級一下微信版本即可，實(shí)際項目中要做一下低版本的兼容。）
