日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：web-view網(wǎng)頁(yè)容器
  • web-view 網(wǎng)頁(yè)容器
    • 屬性說(shuō)明
      • 使用 web-view 打開限定域名內(nèi)的網(wǎng)頁(yè)
    • 示例
      • 代碼示例
    • 相關(guān)接口介紹
      • Web 態(tài)說(shuō)明
      • 相關(guān)接口 1
      • 相關(guān)接口 2
      • 相關(guān)接口 3
    • Bug & Tip
    • 常見問題
      • Q：如何在 web-view 中使用撥打電話的功能或接口？
      • Q：在 web-view 中使用了 cookie ，導(dǎo)致存儲(chǔ)信息與小程序不能共享的原因是什么？
      • Q：小程序使用 web-view ，分享時(shí) path 字段指定的鏈接能直接是 web-view 對(duì)應(yīng)的 url 而不是小程序的 path 嗎？

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

    解釋：web-view 組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿整個(gè)智能小程序頁(yè)面。navigationStyle: custom 對(duì) web-view 組件無(wú)效

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

    屬性說(shuō)明

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

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

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

    如何在根目錄下放置校驗(yàn)文件？

    舉例：小程序 appid = 123456

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

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

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

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

    注意事項(xiàng)：

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

    示例

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

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

    在 WEB IDE 中打開

    掃碼體驗(yàn)

    代碼示例

    請(qǐng)使用百度APP掃碼

    代碼示例

    跳轉(zhuǎn)頁(yè)面

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
      4. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  // onLoad 時(shí)接收 H5 頁(yè)傳過來(lái)的參數(shù),可寫在承載 web-view 的小程序頁(yè)，也可以寫在非 web-view 頁(yè)，此處為非 web-view 頁(yè)示例
      3. 
  
  
  
    3.  onLoad(options) {
      4. 
  
  
  
    4.  if (options.key) {
      5. 
  
  
  
    5.  swan.showToast({
      6. 
  
  
  
    6.  title: `接受到來(lái)自H5頁(yè)的參數(shù)為：${options.key}`,
      7. 
  
  
  
    7.  icon: 'none'
      8. 
  
  
  
    8.  });
      9. 
  
  
  
    9.  console.log('接受到來(lái)自H5頁(yè)的參數(shù)為', options); // {key: 'fromWebview'}
      10. 
  
  
  
    10.  }
      11. 
  
  
  
    11.  },
      12. 
  
  
  
    12.  toWebView() {
      13. 
  
  
  
    13.  // 進(jìn)入 H5 頁(yè)
      14. 
  
  
  
    14.  swan.navigateTo({
      15. 
  
  
  
    15.  url: '/index/index'
      16. 
  
  
  
    16.  })
      17. 
  
  
  
    17.  }
      18. 
  
  
  
    18. });
      19.

    web-view 頁(yè)面

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
 
 
 
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  data: {
      3. 
  
  
  
    3.  src: `https://smartprogram.baidu.com/docs/html/web-view/web-view.html?${encodeURIComponent('中文參數(shù)=value')}`
      4. 
  
  
  
    4.  },
      5. 
  
  
  
    5.  // onLoad 時(shí)接收H5頁(yè)傳過來(lái)的參數(shù),刷新本 H5 頁(yè)的時(shí)候，也可以接收
      6. 
  
  
  
    6.  onLoad(options) {
      7. 
  
  
  
    7.  // 這里Key為示例，可更換為其他
      8. 
  
  
  
    8.  if (options.key) {
      9. 
  
  
  
    9.  swan.showToast({
      10. 
  
  
  
    10.  title: `接受到來(lái)自H5頁(yè)的參數(shù)為：${options.key}`,
      11. 
  
  
  
    11.  icon: 'none'
      12. 
  
  
  
    12.  });
      13. 
  
  
  
    13.  // {key: 'fromWebview'}
      14. 
  
  
  
    14.  console.log('接受到來(lái)自H5頁(yè)的參數(shù)為', options); 
      15. 
  
  
  
    15.  }
      16. 
  
  
  
    16.  // 分享出去的收口機(jī)制，相當(dāng)于刷新
      17. 
  
  
  
    17.  if (options.path) {
      18. 
  
  
  
    18.  swan.showToast({
      19. 
  
  
  
    19.  title: `小程序分享回流后打開的H5頁(yè)為：${options.path}`,
      20. 
  
  
  
    20.  icon: 'none'
      21. 
  
  
  
    21.  });
      22. 
  
  
  
    22.  this.setData('src', options.path);
      23. 
  
  
  
    23.  }
      24. 
  
  
  
    24.  },
      25. 
  
  
  
    25.  // web-view 通過 swan.webView.postMessage 向小程序發(fā)送消息，小程序通過 bindmessage 事件來(lái)監(jiān)聽網(wǎng)頁(yè)向小程序發(fā)送的消息，接收時(shí)機(jī)：小程序后退、組件銷毀、分享時(shí)
      26. 
  
  
  
    26.  postMessage(options) {
      27. 
  
  
  
    27.  swan.showToast({
      28. 
  
  
  
    28.  title: '接收到了H5發(fā)送的message，詳細(xì)信息請(qǐng)到控制臺(tái)查看',
      29. 
  
  
  
    29.  icon: 'none'
      30. 
  
  
  
    30.  })
      31. 
  
  
  
    31.  console.log('H5頁(yè)傳過來(lái)的參數(shù)為:', options);
      32. 
  
  
  
    32.  // options 為
      33. 
  
  
  
    33.  // {
      34. 
  
  
  
    34.  // currentTarget: {
      35. 
  
  
  
    35.  // id: '_5302',
      36. 
  
  
  
    36.  // offsetLeft: 0,
      37. 
  
  
  
    37.  // offsetTop: 0,
      38. 
  
  
  
    38.  // dataset: {}
      39. 
  
  
  
    39.  // },
      40. 
  
  
  
    40.  // detail: {
      41. 
  
  
  
    41.  // data:["foo"]
      42. 
  
  
  
    42.  // },
      43. 
  
  
  
    43.  // 'target': {
      44. 
  
  
  
    44.  // id: '_5302',
      45. 
  
  
  
    45.  // offsetLeft: 0,
      46. 
  
  
  
    46.  // offsetTop: 0,
      47. 
  
  
  
    47.  // dataset: {}
      48. 
  
  
  
    48.  // },
      49. 
  
  
  
    49.  // timeStamp: 8,
      50. 
  
  
  
    50.  // type: "message",
      51. 
  
  
  
    51.  // }
      52. 
  
  
  
    52.  },
      53. 
  
  
  
    53.  onShareAppMessage(options) {
      54. 
  
  
  
    54.  // 獲取當(dāng)前的URL, 真機(jī)可以，工具暫不能返回此字段
      55. 
  
  
  
    55.  console.log('H5頁(yè)的url', options.webViewUrl);
      56. 
  
  
  
    56.  return {
      57. 
  
  
  
    57.  title: '智能小程序官方示例',
      58. 
  
  
  
    58.  content: '世界很復(fù)雜，百度更懂你——小程序簡(jiǎn)介或詳細(xì)描述',
      59. 
  
  
  
    59.  imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
      60. 
  
  
  
    60.  // 此處寫小程序頁(yè)面path
      61. 
  
  
  
    61.  path: `/index/index?path=${options.webViewUrl}`, 
      62. 
  
  
  
    62.  success(res) {
      63. 
  
  
  
    63.  // 分享成功
      64. 
  
  
  
    64.  },
      65. 
  
  
  
    65.  fail(err) {
      66. 
  
  
  
    66.  // 分享失敗
      67. 
  
  
  
    67.  }
      68. 
  
  
  
    68.  };
      69. 
  
  
  
    69.  }
      70. 
  
  
  
    70. });
      71.

    H5 頁(yè)面

    • SWAN
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
  
  
  
      4. 
  
  
  
    4.  
      5. 
  
  
  
    5.  web-view
      6. 
  
  
  
    6.  
      7. 
  
  
  
      8. 
  
  
  
      9. 
  
  
  
      10. 
  
  
  
    10.  
      11. 
  
  
  
    11.  
      相關(guān)接口1
      12. 
  
  
  
    12.  
      onLoad接收參數(shù)
      13. 
  
  
  
    13.  
      14. 
  
  
  
    14.  
      15. 
  
  
  
    15.  
      16. 
  
  
  
    16.  
      小程序接收web-view傳過來(lái)的參數(shù)
      17. 
  
  
  
    17.  
      18. 
  
  
  
    18.  
      19. 
  
  
  
    19.  
      20. 
  
  
  
    20.  
      相關(guān)接口2
      21. 
  
  
  
    21.  
      22. 
  
  
  
    22.  
      23. 
  
  
  
    23.  
      24. 
  
  
  
    24.  
      25. 
  
  
  
    25.  
      26. 
  
  
  
    26.  
      27. 
  
  
  
    27.  
      28. 
  
  
  
    28.  
      29. 
  
  
  
    29.  
      30. 
  
  
  
    30.  
      31. 
  
  
  
    31.  
      相關(guān)接口3
      32. 
  
  
  
    32.  
      33. 
  
  
  
    33.  
      功能1:H5頁(yè)面之間跳轉(zhuǎn)有返回按鈕
      34. 
  
  
  
    34.  
      35. 
  
  
  
    35.

    • 相關(guān)接口介紹

    Web 態(tài)說(shuō)明

    JSSDK 2.0.21 以上版本支持 Web 態(tài)環(huán)境。

    相關(guān)接口 1

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

    舊版本 swan.xxxx，已更新為 swan.webView.xxxx。

    接口名 說(shuō)明
    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ā)送消息

    代碼示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      2. 
  
  
  
      3. 
 
 
 
     
 
 
      
  
  
  
    1. // javascript
      2. 
  
  
  
    2. swan.webView.navigateTo({url: '/pages/detail/index'});
      3. 
  
  
  
    3. swan.webView.postMessage({data: 'foo'});
      4. 
  
  
  
    4. swan.webView.postMessage({data: {foo: 'bar'} });
      5. 
  
  
  
    5. // 如何判斷 H5 頁(yè)面是否在小程序 web-view 打開：
      6. 
  
  
  
    6. // 方法1：
      7. 
  
  
  
    7. swan.webView.getEnv(function(res) {console.log(res.smartprogram);}); // true
      8. 
  
  
  
    8. // isWebView 若為 true，則是在小程序的 web-view 中打開
      9. 
  
  
  
    9. // 方法2：
      10. 
  
  
  
    10. const isWebView = /swan\//.test(window.navigator.userAgent) || /^webswan-/.test(window.name);
      11.

    相關(guān)接口 2

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

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

    相關(guān)接口 3

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

    Bug & Tip

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

    常見問題

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

    A：如果想在 web-view 使用 JSSDK 提供的接口能力，需要引入 swanjs 包，請(qǐng)參考代碼示例 - H5 頁(yè)面。

    “2.0.21.js”版本為舉例，開發(fā)時(shí)請(qǐng)參考相關(guān)接口 1 - 代碼示例中的最新版本號(hào)進(jìn)行填寫。

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

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

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

    1. 小程序中如需設(shè)置 cookie 建議使用 Storage 。
    2. 如需傳遞小程序參數(shù)到 web-view 組件的 H5 頁(yè)面中， 可加在 web-view 的 src 后。

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

    A：不能，使用 onShareAppMessage 或者 swan.openShare 進(jìn)行分享時(shí)，path只能設(shè)置為小程序頁(yè)面的 path ，不能設(shè)置為 H5 頁(yè)面的 url ，若想回到對(duì)應(yīng)的 H5 頁(yè)，參見上方代碼示例 - 跳轉(zhuǎn)頁(yè)面。


    文章標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：web-view網(wǎng)頁(yè)容器
    本文鏈接：http://m.5511xx.com/article/ccsegic.html