<web-view>概況

使用 <web-view> 標籤能在小程式中開啟外部網頁，但是要開啟的網頁的域名必須跟小程式的業務域名（業務域名可以在小程式的後臺管理介面新增）一致，否則在真機上是打不開的。如果開發工具上勾選了‘不校驗域名’，在開發的時候還是能開啟的，但也沒用，線上是打不開的。

不管有沒有內容，<web-view> 會佔滿整個螢幕。

<web-view> 內嵌H5，更新程式碼釋出上線可以繞過稽核。

<web-view>的限制

• 使用限制：對個人型別和海外型別的小程式暫不支援
• 指向域名的限制：域名必須為 https 協議且經過ICP備案
• 域名修改限制：一個小程式最多可新增20個域名，一年可修改50次
• 基礎庫限制：基礎庫 1.6.4 以上版本支援這元件

注：配置域名時，需要從配置後臺下載校驗檔案放在域名根目錄下，驗證通過後才能配置成功。

例項：

1. index.wxml

<button bindtap='goBaidu'>點選跳轉</button>

2. index.js

    goBaidu () {
        wx.navigateTo({
            url: '../outer/outer'
        })
    },

3. outer.wxml

<web-view src="https://www.baidu.com/"></web-view>
 

4. app.json

"pages":[  
    "pages/index/index", 
    "pages/outer/outer"  
], 

報錯：

開發的時候有時會遇到如下提示：

原因是內嵌的H5頁面也是要通過微信授權才能開發的，像開發小程式一樣把自己新增到H5頁面的開發者裡面去就好了。

小程式和內嵌頁面的聯絡

小程式提供了H5網頁中使用的JSSDK檔案，如下引用：

<!-- 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'})
 

引入SDK後可以呼叫小程式JSSDK提供的API，雖然不如小程式原生API豐富，但也有獲取裝置網路狀態、地理位置、微信掃一掃、搖一搖、長按識別、拍照等介面。

截止目前為止，小程式基本不能獲取網頁的資料，只有在使用者分享的時候，可以從返回的引數中獲取 <web-view> 元件當前顯示的頁面路徑。