13518219792
网站建设资讯

NEWS

网站建设资讯

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

  • web-view 网页容器
    • 属性说明
      • 使用 web-view 打开限定域名内的网页
    • 示例
      • 代码示例
    • 相关接口介绍
      • Web 态说明
      • 相关接口 1
      • 相关接口 2
      • 相关接口 3
    • Bug & Tip
    • 常见问题
      • Q：如何在 web-view 中使用拨打电话的功能或接口？
      • Q：在 web-view 中使用了 cookie ，导致存储信息与小程序不能共享的原因是什么？
      • Q：小程序使用 web-view ，分享时 path 字段指定的链接能直接是 web-view 对应的 url 而不是小程序的 path 吗？

    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）访问到的。配置后，页面打开的效果：

    注意事项：

    • 所有在 H5 页面（包括通过该页打开的其他 H5 页）出现的请求域名都需要进行上方的配置，含静态文件（js、css、图片等）
    • 当在开发者工具-项目信息-本地配置里不勾选校验域名时，可以在开发环境中临时关闭对域名的校验，但这个设置并不对线上小程序生效，即如果小程序发布上线前，没有在智能小程序管理中心进行上方的配置，那线上访问这些页面时将依然出现异常，提示出错

    示例

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    跳转页面

    • SWAN
    • JS
     
 
 
      
  
  
  
      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 页面

    • SWAN
    • JS
     
 
 
      
  
  
  
      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 页面

    • SWAN
     
 
 
      
  
  
  
      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向小程序发送消息

    代码示例

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

    • Tip：网页内 iframe 的域名也需要配置到域名白名单。
    • Tip：每个页面只能有一个web-view，web-view会自动铺满整个页面，并覆盖其他组件。
    • Tip：网页与智能小程序之间不支持除 JSSDK 提供的接口之外的通信，如果使用了 JSSDK 提供的接口，需要引入swanjs，参见上方相关接口 1 - 代码示例 。
    • Tip：避免给web-view组件设置的网页链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议做一下 encodeURIComponent ，参见上方代码示例。

    常见问题

    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://cdysf.com/article/ccsegic.html

    其他资讯