#### web-view > 基礎庫 1.6.4 開始支持，低版本需做[兼容處理](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) web-view 組件是一個可以用來承載網頁的容器，會自動鋪滿整個小程序頁面。**個人類型與海外類型的小程序暫不支持使用。** | 屬性名 | 類型 | 默認值 | 說明 | | ----------- | ------------ | ---- | ---------------------------------------- | | src | String | | webview 指向網頁的鏈接。需登錄[小程序管理后臺](https://mp.weixin.qq.com/)配置域名白名單。 | | bindmessage | EventHandler | | 網頁向小程序 postMessage 時，會在特定時機（小程序后退、組件銷毀、分享）觸發并收到消息。e.detail = { data } | 示例代碼： ``` <!-- wxml --> <!-- 指向微信公眾平臺首頁的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view> ``` ##### 相關接口 1 `<web-view/>`網頁中可使用[JSSDK 1.3.2](https://res.wx.qq.com/open/js/jweixin-1.3.2.js)提供的接口返回小程序頁面。 支持的接口有： | 接口名 | 說明 | 最低版本 | | --------------------------- | ---------- | ---------------------------------------- | | wx.miniProgram.navigateTo | 參數與小程序接口一致 | [1.6.4](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | wx.miniProgram.navigateBack | 參數與小程序接口一致 | [1.6.4](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | wx.miniProgram.switchTab | 參數與小程序接口一致 | [1.6.5](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | wx.miniProgram.reLaunch | 參數與小程序接口一致 | [1.6.5](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | wx.miniProgram.redirectTo | 參數與小程序接口一致 | [1.6.5](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | wx.miniProgram.postMessage | 向小程序發送消息 | [1.7.1](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | wx.miniProgram.getEnv | 獲取當前環境 | [1.7.1](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | 示例代碼： ``` <!-- html --> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> // javascript wx.miniProgram.navigateTo({url: '/path/to/page'}) wx.miniProgram.postMessage({ data: 'foo' }) wx.miniProgram.postMessage({ data: {foo: 'bar'} }) wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true }) ``` ##### 相關接口 2 `<web-view/>`網頁中**僅支持以下JSSDK接口**： | 接口模塊 | 接口說明 | 具體接口 | | ----------- | --------- | ------------------ | | 判斷客戶端是否支持js | | checkJSApi | | 圖像接口 | 拍照或上傳 | chooseImage | | | 預覽圖片 | previewImage | | | 上傳圖片 | uploadImage | | | 下載圖片 | downloadImage | | | 獲取本地圖片 | getLocalImgData | | 音頻接口 | 開始錄音 | startRecord | | | 停止錄音 | stopRecord | | | 監聽錄音自動停止 | onVoiceRecordEnd | | | 播放語音 | playVoice | | | 暫停播放 | pauseVoice | | | 停止播放 | stopVoice | | | 監聽語音播放完畢 | onVoicePlayEnd | | | 上傳接口 | uploadVoice | | | 下載接口 | downloadVoice | | 智能接口 | 識別音頻 | translateVoice | | 設備信息 | 獲取網絡狀態 | getNetworkType | | 地理位置 | 使用內置地圖 | getLocation | | | 獲取地理位置 | openLocation | | 搖一搖周邊 | 開啟ibeacon | startSearchBeacons | | | 關閉ibeacon | stopSearchBeacons | | | 監聽ibeacon | onSearchBeacons | | 微信掃一掃 | 調起微信掃一掃 | scanQRCode | | 微信卡券 | 拉取使用卡券列表 | chooseCard | | | 批量添加卡券接口 | addCard | | | 查看微信卡包的卡券 | openCard | | 長按識別 | 小程序圓形碼 | 無 | ##### 相關接口 3 用戶分享時可獲取當前`<web-view/>`的URL，即在`onShareAppMessage`回調中返回`webViewUrl`參數。 示例代碼： ``` Page({ onShareAppMessage(options) { console.log(options.webViewUrl) } }) ``` ##### 相關接口 4 在網頁內可通過`window.__wxjs_environment`變量判斷是否在小程序環境，建議在`WeixinJSBridgeReady`回調中使用，也可以使用[JSSDK 1.3.2](https://res.wx.qq.com/open/js/jweixin-1.3.2.js)提供的`getEnv`接口。 示例代碼： ``` // web-view下的頁面內 function ready() { console.log(window.__wxjs_environment === 'miniprogram') // true } if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) { document.addEventListener('WeixinJSBridgeReady', ready, false) } else { ready() } // 或者 wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true }) ``` ##### Bug & Tip 1. **網頁內iframe的域名也需要配置到域名白名單。** 2. 開發者工具上，可以在 `<web-view/>` 組件上通過右鍵 - 調試，打開 `<web-view/>` 組件的調試。 3. 每個頁面只能有一個`<web-view/>`，`<web-view/>`會自動鋪滿整個頁面，并覆蓋其他組件。 4. `<web-view/>`網頁與小程序之間不支持除JSSDK提供的接口之外的通信。 5. 在iOS中，若存在JSSDK接口調用無響應的情況，可在`<web-view/>`的src后面加個#wechat_redirect解決。