• web-view 網(wǎng)頁容器
  • 屬性說明
    • 使用 web-view 打開限定域名內(nèi)的網(wǎng)頁
  • 示例
    • 代碼示例
  • 相關(guān)接口介紹
    • Web 態(tài)說明
    • 相關(guān)接口 1
    • 相關(guān)接口 2
    • 相關(guān)接口 3
  • Bug & Tip
  • 常見問題
    • Q：如何在 web-view 中使用撥打電話的功能或接口？
    • Q：在 web-view 中使用了 cookie ，導(dǎo)致存儲信息與小程序不能共享的原因是什么？
    • Q：小程序使用 web-view ，分享時 path 字段指定的鏈接能直接是 web-view 對應(yīng)的 url 而不是小程序的 path 嗎？

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

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、秀英網(wǎng)站維護、網(wǎng)站推廣。

屬性說明

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

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

如何在根目錄下放置校驗文件？

舉例：小程序 appid = 123456

1. 配置域名為：https://a.baidu.com 則需要把校驗文件放置到 a.baidu.com 域名下，最后的鏈接地址為：https://a.baidu.com/bd\_mapp\_domaincer\_123456.txt

2. 配置域名為：https://baidu.com 則需要把校驗文件放置到 baidu.com 域名下，最后的鏈接地址為：https://baidu.com/bd\_mapp\_domaincer\_123456.txt

3. 配置域名為：https://xx.bb.baidu.com 則需要把校驗文件放置到 xx.bb.baidu.com 域名下，最后的鏈接地址為：https://xx.bb.baidu.com/bd\_mapp\_domaincer\_123456.txt

正確配置的情況下，這個txt文件應(yīng)該是能夠通過這些地址（如：https://a.baidu.com/bd\_mapp\_domaincer\_123456.txt）訪問到的。配置后，頁面打開的效果：

注意事項：

• 所有在 H5 頁面（包括通過該頁打開的其他 H5 頁）出現(xiàn)的請求域名都需要進行上方的配置，含靜態(tài)文件（js、css、圖片等）
• 當(dāng)在開發(fā)者工具-項目信息-本地配置里不勾選校驗域名時，可以在開發(fā)環(huán)境中臨時關(guān)閉對域名的校驗，但這個設(shè)置并不對線上小程序生效，即如果小程序發(fā)布上線前，沒有在智能小程序管理中心進行上方的配置，那線上訪問這些頁面時將依然出現(xiàn)異常，提示出錯
  

示例

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

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

在 WEB IDE 中打開

掃碼體驗

代碼示例

請使用百度APP掃碼

代碼示例

跳轉(zhuǎn)頁面

• SWAN
• JS

 
 
 

  
  
  

  
  
  
 點擊進入 H5 頁面
  
  
  

 
 
 

 
 
 

  
  
  
Page({
  
  
  
 // onLoad 時接收 H5 頁傳過來的參數(shù),可寫在承載 web-view 的小程序頁，也可以寫在非 web-view 頁，此處為非 web-view 頁示例
  
  
  
 onLoad(options) {
  
  
  
 if (options.key) {
  
  
  
 swan.showToast({
  
  
  
 title: `接受到來自H5頁的參數(shù)為：${options.key}`,
  
  
  
 icon: 'none'
  
  
  
 });
  
  
  
 console.log('接受到來自H5頁的參數(shù)為', options); // {key: 'fromWebview'}
  
  
  
 }
  
  
  
 },
  
  
  
 toWebView() {
  
  
  
 // 進入 H5 頁
  
  
  
 swan.navigateTo({
  
  
  
 url: '/index/index'
  
  
  
 })
  
  
  
 }
  
  
  
});
 
 
 

web-view 頁面

• SWAN
• JS

 
 
 

  
  
  
Page({
  
  
  
 data: {
  
  
  
 src: `https://smartprogram.baidu.com/docs/html/web-view/web-view.html?${encodeURIComponent('中文參數(shù)=value')}`
  
  
  
 },
  
  
  
 // onLoad 時接收H5頁傳過來的參數(shù),刷新本 H5 頁的時候，也可以接收
  
  
  
 onLoad(options) {
  
  
  
 // 這里Key為示例，可更換為其他
  
  
  
 if (options.key) {
  
  
  
 swan.showToast({
  
  
  
 title: `接受到來自H5頁的參數(shù)為：${options.key}`,
  
  
  
 icon: 'none'
  
  
  
 });
  
  
  
 // {key: 'fromWebview'}
  
  
  
 console.log('接受到來自H5頁的參數(shù)為', options); 
  
  
  
 }
  
  
  
 // 分享出去的收口機制，相當(dāng)于刷新
  
  
  
 if (options.path) {
  
  
  
 swan.showToast({
  
  
  
 title: `小程序分享回流后打開的H5頁為：${options.path}`,
  
  
  
 icon: 'none'
  
  
  
 });
  
  
  
 this.setData('src', options.path);
  
  
  
 }
  
  
  
 },
  
  
  
 // web-view 通過 swan.webView.postMessage 向小程序發(fā)送消息，小程序通過 bindmessage 事件來監(jiān)聽網(wǎng)頁向小程序發(fā)送的消息，接收時機：小程序后退、組件銷毀、分享時
  
  
  
 postMessage(options) {
  
  
  
 swan.showToast({
  
  
  
 title: '接收到了H5發(fā)送的message，詳細信息請到控制臺查看',
  
  
  
 icon: 'none'
  
  
  
 })
  
  
  
 console.log('H5頁傳過來的參數(shù)為:', options);
  
  
  
 // options 為
  
  
  
 // {
  
  
  
 // currentTarget: {
  
  
  
 // id: '_5302',
  
  
  
 // offsetLeft: 0,
  
  
  
 // offsetTop: 0,
  
  
  
 // dataset: {}
  
  
  
 // },
  
  
  
 // detail: {
  
  
  
 // data:["foo"]
  
  
  
 // },
  
  
  
 // 'target': {
  
  
  
 // id: '_5302',
  
  
  
 // offsetLeft: 0,
  
  
  
 // offsetTop: 0,
  
  
  
 // dataset: {}
  
  
  
 // },
  
  
  
 // timeStamp: 8,
  
  
  
 // type: "message",
  
  
  
 // }
  
  
  
 },
  
  
  
 onShareAppMessage(options) {
  
  
  
 // 獲取當(dāng)前的URL, 真機可以，工具暫不能返回此字段
  
  
  
 console.log('H5頁的url', options.webViewUrl);
  
  
  
 return {
  
  
  
 title: '智能小程序官方示例',
  
  
  
 content: '世界很復(fù)雜，百度更懂你——小程序簡介或詳細描述',
  
  
  
 imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
  
  
  
 // 此處寫小程序頁面path
  
  
  
 path: `/index/index?path=${options.webViewUrl}`, 
  
  
  
 success(res) {
  
  
  
 // 分享成功
  
  
  
 },
  
  
  
 fail(err) {
  
  
  
 // 分享失敗
  
  
  
 }
  
  
  
 };
  
  
  
 }
  
  
  
});
 
 
 

H5 頁面

• SWAN

 
 
 

  
  
  

  
  
  

  
  
  

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  

  
  
  

  
  
  

  
  
  
 

  
  
  
 
相關(guān)接口1
  
  
  
 
onLoad接收參數(shù)
  
  
  
 點我跳轉(zhuǎn)小程序其他頁
  
  
  
 點我刷新
  
  
  
 是否運行在小程序中
  
  
  
 
小程序接收web-view傳過來的參數(shù)
  
  
  
 點擊向小程序發(fā)送消息
  
  
  
 小程序后退
  
  
  
 請點擊右上方膠囊分享
  
  
  
 
相關(guān)接口2
  
  
  
 點擊撥打電話
  
  
  
 設(shè)置剪貼板
  
  
  
 獲取網(wǎng)絡(luò)類型
  
  
  
 分享
  
  
  
 打開小程序
  
  
  
 打開地圖查看當(dāng)前位置
  
  
  
 獲取當(dāng)前地理位置
  
  
  
 拍照或上傳
  
  
  
 預(yù)覽圖片
  
  
  
 用戶登陸
  
  
  
 
相關(guān)接口3
  
  
  
 請點擊右上方膠囊分享
  
  
  
 
功能1:H5頁面之間跳轉(zhuǎn)有返回按鈕
  
  
  
 點擊跳轉(zhuǎn)到另一個 H5 頁面