『小程序開發』關於微信小程序web-view組件內嵌h5的具體配置流程

前言：

小程序一步步的更新迭代，雖然踩坑不斷，可是整體來講是愈來愈強大了，今天咱們就來講一下小程序的web-view組件，相信不少有公司業務的朋友已經踩過坑了，可是因爲web-view對我的類型的不支持，因此也有不少朋友沒有辦法上手，不過不要緊，下面我就簡單說一下，web-view究竟要怎麼內嵌h5？又該如何配置呢？ ### 首先簡單介紹一下web-view，看過官方api的朋友能夠自動忽略忽略，直接進入---配置步驟---便可

功能介紹

web-view 組件是一個能夠用來承載網頁的容器，會自動鋪滿整個小程序頁面。 相似於Frame、Iframe、Frameset標記，只是對於目前來講，web-view還缺少靈活性，不過相信不少人已經很知足了（若是非要吐槽，我只想說，web-view生不逢個人時啊...不提了，一把辛酸淚）

使用及後期配置限制問題

1. 我的類型與海外類型的小程序暫不支持使用。
2. js-sdk接口限制（具體請參考 官方api ）。
3. 每一個頁面只能有一個< web-view />。
4. 最多能夠添加20個業務域名。
5. 一年只可修改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

第一篇掘金文，但願你們多多支持和包涵，也歡迎你們吐槽評論...更但願可以認識更多的良師益友，之後會陸續分享一些本身遇到的一些問題或者是一些好玩的東西，多謝...

（注：封面來源於互聯網，若有侵權，請聯繫做者刪除；如需轉載，請附原文連接及署名，多謝）