前言：
小程式一步步的更新迭代，雖然踩坑不斷，但是總體來說是越來越強大了，今天我們就來說一下小程式的web-view元件，相信很多有公司業務的朋友已經踩過坑了，但是由於web-view對個人型別的不支援，所以也有很多朋友沒有辦法上手，不過沒關係，下面我就簡單說一下，web-view究竟要怎麼內嵌h5？又該如何配置呢？ ### 首先簡單介紹一下web-view，看過官方api的朋友可以自動忽略忽略，直接進入---配置步驟---即可
功能介紹
web-view 元件是一個可以用來承載網頁的容器，會自動鋪滿整個小程式頁面。 類似於Frame、Iframe、Frameset標記，只是對於目前來說，web-view還缺乏靈活性，不過相信很多人已經很滿足了（如果非要吐槽，我只想說，web-view生不逢我的時啊...不提了，一把辛酸淚）
使用及後期配置限制問題
- 個人型別與海外型別的小程式暫不支援使用。
- js-sdk介面限制（具體請參考 官方api ）。
- 每個頁面只能有一個< web-view />。
- 最多可以新增20個業務域名。
- 一年只可修改50次業務域名。
web-view
| 屬性 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| src | String | none | webview 指向網頁的連結。需登入小程式管理後臺配置域名白名單。 |
示例程式碼
<!-- 結構層 -->
<web-view src="h5地址連結"></web-view>
複製程式碼配置步驟
1. 配置業務域名
2. 選擇基礎庫
複製程式碼① --- 配置業務域名
步驟 | 名稱| 說明| --- |--| 一 | 校驗檔案|下載校驗檔案（GH0XFEdVsr.txt）然後找服務端的朋友配合一下，將校驗檔案放置在將要巢狀的業務域名的根目錄（無子級目錄情況下），例：h5頁面：mp.weixin.qq.com/index.html，那麼你需要配置的就是mp.weixin.qq.com/GH0XFEdVsr.txt，當然也可以指定此域名下的某一層子級目錄（指定後只有當前目錄下的html支援巢狀），校驗成功後，你才能配置第二步的業務域名。 二 | 配置域名|例：mp.weixin.qq.com/
如下圖：
② --- 選擇基礎庫
這一步是最簡單的，但確實很多朋友最容易忽略的（咳咳...），開發者工具-->詳情設定-->選擇1.6.4及以上版本即可（目前只支援到1.6.4）。
如下圖：
總結：
以上說的就是web-view簡單的配置流程，大部分的內容小程式的官方api都已經給出，這裡只是把配置流程的步驟再進一步的詳細化，變得更通俗一點，但是如果你需要在h5頁面中做某些操作.... 那就來看一下官方示例：快速通道
<! -- 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，手機微信打不開的情況，不要捉急，升級一下微信版本即可，實際專案中要做一下低版本的相容。）
END
第一篇掘金文，希望大家多多支援和包涵，也歡迎大家吐槽評論...更希望能夠認識更多的良師益友，以後會陸續分享一些自己遇到的一些問題或者是一些好玩的東西，多謝...
（注：封面來源於網際網路，如有侵權，請聯絡作者刪除；如需轉載，請附原文連結及署名，多謝）