百度智能小程序 網(wǎng)頁容器

2020-08-31 11:59 更新

web-view 網(wǎng)頁容器

解釋：web-view 組件是一個可以用來承載網(wǎng)頁的容器，會自動鋪滿整個智能小程序頁面。

屬性說明

屬性名 類型 默認(rèn)值 必填 說明 最低版本
src String 是 webview 指向網(wǎng)頁的鏈接 -
bindmessage EventHandler 否 網(wǎng)頁向小程序 postMessage 時，會在特定時機(jī)（小程序后退、組件銷毀、分享）觸發(fā)并收到消息。e.detail = { data } 1.12.0
低版本請做兼容性處理

示例 

在開發(fā)者工具中打開


代碼示例 1

<view>
    <web-view src="{{src}}"></web-view>
</view>

Page({
    data: {
        src: 'https://smartprogram.baidu.com'
    },
    // 接收H5頁傳過來的參數(shù)
    onLoad(options) {
        console.log(options.webViewUrl);
    }
});

相關(guān)接口介紹

相關(guān)接口 1

web-view 網(wǎng)頁中可使用 JSSDK 提供的接口返回智能小程序頁面。 支持的接口有：

舊版本 swan.xxxx，已更新為 swan.webView.xxxx。
接口名 說明
swan.webView.navigateTo 參數(shù)與智能小程序接口一致
swan.webView.navigateBack 參數(shù)與智能小程序接口一致
swan.webView.switchTab 參數(shù)與智能小程序接口一致
swan.webView.reLaunch 參數(shù)與智能小程序接口一致
swan.webView.redirectTo 參數(shù)與智能小程序接口一致
swan.webView.getEnv 獲取當(dāng)前環(huán)境
swan.webView.postMessage 向小程序發(fā)送消息

代碼示例 2

<!-- html -->
<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.21.js" rel="external nofollow" ></script>
// javascript
swan.webView.navigateTo({url: '/pages/detail/index'});
swan.webView.postMessage({data: 'foo'});
swan.webView.postMessage({data: {foo: 'bar'} });
swan.webView.getEnv(function(res) {console.log(res.smartprogram);}); // true

相關(guān)接口 2

web-view 網(wǎng)頁中支持的接口有：

接口模塊 接口說明 具體接口 備注
設(shè)備 撥打電話 swan.makePhoneCall
開放接口 打開小程序 swan.navigateToSmartProgram 2.0.18 版本開始，支持使用 envVersion 打開不同版本的小程序
開放接口 登錄 swan.login
剪貼板 設(shè)置剪貼板 swan.setClipboardData
設(shè)備 獲取網(wǎng)絡(luò)類型 swan.getNetworkType
媒體 預(yù)覽圖片 swan.previewImage
開放接口 分享 swan.openShare 需傳入當(dāng)前要分享的小程序的 appKey
地理位置 使用內(nèi)置地圖打開地點(diǎn) swan.openLocation
地理位置 獲取地理位置 swan.getLocation
圖像接口 拍照或上傳 swan.chooseImage

相關(guān)接口 3

用戶分享時可獲取當(dāng)前 web-view 的 URL，即在 onShareAppMessage 回調(diào)中返回 webViewUrl 參數(shù)。

代碼示例 3

Page({
    onShareAppMessage(options) {
        console.log(options.webViewUrl);
        return {
            title: '智能小程序官方示例',
            content: '世界很復(fù)雜，百度更懂你——小程序簡介或詳細(xì)描述',
            imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
            path: '/index/index', // 此處寫小程序頁面path
            success(res) {
                // 分享成功
            },
            fail(err) {
                // 分享失敗
            }
        }
    }
})

使用 web-view 打開限定域名內(nèi)的網(wǎng)頁

訪問智能小程序管理中心，進(jìn)入對應(yīng)的小程序管理后臺，點(diǎn)擊“設(shè)置->開發(fā)設(shè)置->業(yè)務(wù)域名”，即可在業(yè)務(wù)域名中下載、配置校驗文件并配置業(yè)務(wù)域名。

Bug & Tip

  • Tip：網(wǎng)頁內(nèi) iframe 的域名也需要配置到域名白名單。
  • Tip：每個頁面只能有一個 <web-view/>，<web-view/> 會自動鋪滿整個頁面，并覆蓋其他組件。
  • Tip：網(wǎng)頁與智能小程序之間不支持除 JSSDK 提供的接口之外的通信，如果使用了 JSSDK 提供的接口，需要引入 swanjs，參見上方代碼示例 2。
  • Tip：避免給組件設(shè)置的網(wǎng)頁鏈接中帶有中文字符，在 iOS 中會有打開白屏的問題，建議做一下 encodeURIComponent。

參考示例

參考示例 1: 在特定時機(jī)接收到 H5 傳遞參數(shù)的函數(shù) 
在開發(fā)者工具中打開 

<view>
    <web-view src="{{src}}" bindmessage="postMessage"></web-view>
</view>
Page({
    data: {
        src: 'https://smartprogram.baidu.com'
    },
    // 小程序后退、組件銷毀、分享時，由此函數(shù)來接收H5頁傳過來的參數(shù)
    postMessage(options) {
        console.log(options);
    }
});

參考示例 2: 如何判斷 H5 頁面是否在小程序 web-view 打開 

在開發(fā)者工具中打開 

// isWebView 若為 true，則是在小程序的 web-view 中打開
const isWebView = /swan\//.test(window.navigator.userAgent) || /^webswan-/.test(window.name);

常見問題

Q：web-view 頁面里如何使用撥打電話接口
Q：如何在 web-view 中使用撥打電話的功能

A：如果想在 web-view 使用 JSSDK 提供的接口能力，需要引入 swanjs 包，如下示例：

圖中 “2.0.6.js”版本為舉例，開發(fā)時請參考代碼示例 2 中的最新版本號進(jìn)行填寫。

完整的 H5 示例：

生成的 h5 站點(diǎn)地址放入小程序 web-view 的 src 即可。

代碼示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>call phone</title>
        <script src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.6.js" rel="external nofollow" ></script>
    </head>
    <body>
        <button onclick="callMobile()">clickMe</button>
    </body>
    <script type="text/javascript">
        function callMobile() {
            swan.makePhoneCall({
                phoneNumber: '10086' 
            });
        }
    </script>
</html>

Q：在 web-view 中使用了 cookie，導(dǎo)致存儲信息與小程序不能共享的原因是什么

  1. 小程序中如需設(shè)置 cookie 建議使用 Storage； 參見詳情 。
  2. 如需要共享小程序參數(shù)到 webview 頁面中， 可在 webview 的 src 中加上鏈接參數(shù)。

Q：小程序使用 web-view，分享時path字段指定的鏈接能直接是 web-view 對應(yīng)的 url 而不是小程序的 path 嗎

A：web-view 網(wǎng)頁與小程序之間不支持除 JSSDK 提供的接口之外的通信；

A：不能，使用 onShareAppMessage 或者 swan.openShare 進(jìn)行分享時，path只能設(shè)置為小程序頁面的 path，不能設(shè)置為 h5 頁面的 url。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號