×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：web-view网页容器

web-view 网页容器

解释：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个智能小程序页面。navigationStyle: custom 对 web-view 组件无效

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、虚拟空间、营销软件、网站建设、秀英网站维护、网站推广。

属性说明

属性名 类型 默认值 必填 说明 最低版本
srcString是web-view 指向网页的链接-
bindmessageEventHandler否网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }1.12.0
低版本请做兼容性处理

使用 web-view 打开限定域名内的网页

访问智能小程序管理中心，进入对应的小程序管理后台，点击“设置 -> 开发设置 -> 业务域名”，即可在业务域名中下载、配置校验文件并配置业务域名。

如何在根目录下放置校验文件？

举例：小程序 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文件应该是能够通过这些地址（如：https://a.baidu.com/bd\_mapp\_domaincer\_123456.txt）访问到的。配置后，页面打开的效果：

注意事项：

示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

跳转页面

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
    4. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  // onLoad 时接收 H5 页传过来的参数,可写在承载 web-view 的小程序页，也可以写在非 web-view 页，此处为非 web-view 页示例
    3. 
  
  
  
  3.  onLoad(options) {
    4. 
  
  
  
  4.  if (options.key) {
    5. 
  
  
  
  5.  swan.showToast({
    6. 
  
  
  
  6.  title: `接受到来自H5页的参数为：${options.key}`,
    7. 
  
  
  
  7.  icon: 'none'
    8. 
  
  
  
  8.  });
    9. 
  
  
  
  9.  console.log('接受到来自H5页的参数为', options); // {key: 'fromWebview'}
    10. 
  
  
  
  10.  }
    11. 
  
  
  
  11.  },
    12. 
  
  
  
  12.  toWebView() {
    13. 
  
  
  
  13.  // 进入 H5 页
    14. 
  
  
  
  14.  swan.navigateTo({
    15. 
  
  
  
  15.  url: '/index/index'
    16. 
  
  
  
  16.  })
    17. 
  
  
  
  17.  }
    18. 
  
  
  
  18. });
    19.

web-view 页面

 
 
 
    
  
  
  
    2. 
 
 
 
 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  data: {
    3. 
  
  
  
  3.  src: `https://smartprogram.baidu.com/docs/html/web-view/web-view.html?${encodeURIComponent('中文参数=value')}`
    4. 
  
  
  
  4.  },
    5. 
  
  
  
  5.  // onLoad 时接收H5页传过来的参数,刷新本 H5 页的时候，也可以接收
    6. 
  
  
  
  6.  onLoad(options) {
    7. 
  
  
  
  7.  // 这里Key为示例，可更换为其他
    8. 
  
  
  
  8.  if (options.key) {
    9. 
  
  
  
  9.  swan.showToast({
    10. 
  
  
  
  10.  title: `接受到来自H5页的参数为：${options.key}`,
    11. 
  
  
  
  11.  icon: 'none'
    12. 
  
  
  
  12.  });
    13. 
  
  
  
  13.  // {key: 'fromWebview'}
    14. 
  
  
  
  14.  console.log('接受到来自H5页的参数为', options); 
    15. 
  
  
  
  15.  }
    16. 
  
  
  
  16.  // 分享出去的收口机制，相当于刷新
    17. 
  
  
  
  17.  if (options.path) {
    18. 
  
  
  
  18.  swan.showToast({
    19. 
  
  
  
  19.  title: `小程序分享回流后打开的H5页为：${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 向小程序发送消息，小程序通过 bindmessage 事件来监听网页向小程序发送的消息，接收时机：小程序后退、组件销毁、分享时
    26. 
  
  
  
  26.  postMessage(options) {
    27. 
  
  
  
  27.  swan.showToast({
    28. 
  
  
  
  28.  title: '接收到了H5发送的message，详细信息请到控制台查看',
    29. 
  
  
  
  29.  icon: 'none'
    30. 
  
  
  
  30.  })
    31. 
  
  
  
  31.  console.log('H5页传过来的参数为:', 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.  // 获取当前的URL, 真机可以，工具暂不能返回此字段
    55. 
  
  
  
  55.  console.log('H5页的url', options.webViewUrl);
    56. 
  
  
  
  56.  return {
    57. 
  
  
  
  57.  title: '智能小程序官方示例',
    58. 
  
  
  
  58.  content: '世界很复杂，百度更懂你——小程序简介或详细描述',
    59. 
  
  
  
  59.  imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
    60. 
  
  
  
  60.  // 此处写小程序页面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 页面

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  web-view
    6. 
  
  
  
  6.  
    7. 
  
  
  
    8. 
  
  
  
    9. 
  
  
  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    相关接口1
    12. 
  
  
  
  12.  
    onLoad接收参数
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
  16.  
    小程序接收web-view传过来的参数
    17. 
  
  
  
  17.  
    18. 
  
  
  
  18.  
    19. 
  
  
  
  19.  
    20. 
  
  
  
  20.  
    相关接口2
    21. 
  
  
  
  21.  
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23.  
    24. 
  
  
  
  24.  
    25. 
  
  
  
  25.  
    26. 
  
  
  
  26.  
    27. 
  
  
  
  27.  
    28. 
  
  
  
  28.  
    29. 
  
  
  
  29.  
    30. 
  
  
  
  30.  
    31. 
  
  
  
  31.  
    相关接口3
    32. 
  
  
  
  32.  
    33. 
  
  
  
  33.  
    功能1:H5页面之间跳转有返回按钮
    34. 
  
  
  
  34.  
    35. 
  
  
  
  35.

    • 相关接口介绍

    Web 态说明

    JSSDK 2.0.21 以上版本支持 Web 态环境。

    相关接口 1

    web-view 网页中可使用 JSSDK 提供的接口返回智能小程序页面。 支持的接口有：

    旧版本 swan.xxxx，已更新为 swan.webView.xxxx。

    接口名 说明
    swan.webView.navigateTo参数与智能小程序接口一致
    swan.webView.navigateBack参数与智能小程序接口一致
    swan.webView.switchTab参数与智能小程序接口一致
    swan.webView.reLaunch参数与智能小程序接口一致
    swan.webView.redirectTo参数与智能小程序接口一致
    swan.webView.getEnv获取当前环境
    swan.webView.postMessage向小程序发送消息

    代码示例

     
 
 
      
  
  
  
      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 页面是否在小程序 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.

    相关接口 2

    web-view 网页中支持的接口有：

    接口模块 接口说明 具体接口 备注
    设备拨打电话swan.makePhoneCall
    设备设置剪贴板swan.setClipboardData
    设备获取网络类型swan.getNetworkType
    位置使用内置地图查看位置swan.openLocation
    位置获取地理位置swan.getLocation
    媒体拍照或上传swan.chooseImage
    媒体预览图片swan.previewImage
    用户接口分享swan.openShare需传入当前要分享的小程序的 appKey
    用户接口打开小程序swan.navigateToSmartProgram2.0.18 版本开始，支持使用 envVersion 打开不同版本的小程序
    开放接口登录swan.login

    相关接口 3

    用户分享时可获取当前 web-view 的 URL，即在 onShareAppMessage 回调中返回 webViewUrl 参数，参见上方代码示例。

    Bug & Tip

    常见问题

    Q：如何在 web-view 中使用拨打电话的功能或接口？

    A：如果想在 web-view 使用 JSSDK 提供的接口能力，需要引入 swanjs 包，请参考代码示例 - H5 页面。

    “2.0.21.js”版本为举例，开发时请参考相关接口 1 - 代码示例中的最新版本号进行填写。

    生成的 H5 站点地址放入小程序 web-view 的 src 即可。

    Q：在 web-view 中使用了 cookie ，导致存储信息与小程序不能共享的原因是什么？

    A：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信：

    1. 小程序中如需设置 cookie 建议使用 Storage 。
    2. 如需传递小程序参数到 web-view 组件的 H5 页面中， 可加在 web-view 的 src 后。

    Q：小程序使用 web-view ，分享时 path 字段指定的链接能直接是 web-view 对应的 url 而不是小程序的 path 吗？

    A：不能，使用 onShareAppMessage 或者 swan.openShare 进行分享时，path只能设置为小程序页面的 path ，不能设置为 H5 页面的 url ，若想回到对应的 H5 页，参见上方代码示例 - 跳转页面。


    标题名称：创新互联百度小程序教程：web-view网页容器
    分享URL：http://cdbrznjsb.com/article/ccsegic.html

    其他资讯

    让你的专属顾问为你服务