创新互联百度小程序教程：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向小程序发送消息

    代码示例

     
 
 
      
  
  
  
      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网页容器
    标题链接：http://www.mswzjz.cn/qtweb/news3/4053.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    动态网站知识

    行业网站建设

    微信小程序　　 　专业LED亮化工程　　 　广汉锦华　　 　成都发电车出租　　 　成都app软件开发　　 　美美搬家　　 　网站优化排名　　 　四川电信高防服务器托管　　 　电信机房托管服务器　　 　成都网站推广　　 　网站建设报价方案　　 　企业网站建设公司　　 　成都做网站建设公司　　 　主机租用　　 　成都网站建设　　 　小谭建站　　 　高端网站设计推广　　 　崇州网站建设　　 　成都服务器托管　　 　APP定制开发