web-view 网页容器

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

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

    举例：小程序 appid = 123456

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

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

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

    正确配置的情况下，这个txt文件应该是能够通过这些地址（如：
    web-view 网页容器 - 图2

    注意事项：

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

    在 WEB IDE 中打开

    扫码体验

    代码示例

    百度智能小程序

    请使用百度APP扫码

    代码示例

    跳转页面

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

    web-view 页面

    • SWAN
    1. Page({
    2.     data: {
    3.         src: `https://smartprogram.baidu.com/docs/html/web-view/web-view.html?${encodeURIComponent('中文参数=value')}`
    4.     },
    5.     // onLoad 时接收H5页传过来的参数,刷新本 H5 页的时候，也可以接收
    6.     onLoad(options) {
    7.         // 这里Key为示例，可更换为其他
    8.         if (options.key) {
    9.             swan.showToast({
    10.                 title: `接受到来自H5页的参数为：${options.key}`,
    11.                 icon: 'none'
    13.             // {key: 'fromWebview'}
    14.             console.log('接受到来自H5页的参数为', options);  
    15.         }
    16.         // 分享出去的收口机制，相当于刷新
    17.         if (options.path) {
    18.             swan.showToast({
    19.                 title: `小程序分享回流后打开的H5页为：${options.path}`,
    20.                 icon: 'none'
    21.             });
    22.             this.setData('src', options.path);
    23.         }
    24.     },
    25.     // web-view 通过 swan.webView.postMessage 向小程序发送消息，小程序通过 bindmessage 事件来监听网页向小程序发送的消息，接收时机：小程序后退、组件销毁、分享时
    26.     postMessage(options) {
    27.         swan.showToast({
    28.             title: '接收到了H5发送的message，详细信息请到控制台查看',
    29.             icon: 'none'
    30.         })
    31.         console.log('H5页传过来的参数为:', options);
    32.         // options 为
    33.         // {
    34.         //     currentTarget: {
    35.         //         id: '_5302',
    36.         //         offsetLeft: 0,
    37.         //         offsetTop: 0,
    38.         //         dataset: {}
    39.         //     },
    40.         //     detail: {
    41.         //     },
    42.         //     'target': {
    43.         //         id: '_5302',
    45.         //         offsetTop: 0,
    46.         //         dataset: {}
    47.         //     },
    48.         //     timeStamp: 8,
    49.         //     type: "message",
    50.         // }
    51.     },
    52.     onShareAppMessage(options) {
    53.         // 获取当前<web-view>的URL, 真机可以，工具暂不能返回此字段
    54.         console.log('H5页的url', options.webViewUrl);
    55.         return {
    56.             title: '智能小程序官方示例',
    57.             content: '世界很复杂，百度更懂你——小程序简介或详细描述',
    58.             imageUrl: 'https://b.bdstatic.com/miniapp/images/bgt_icon.png',
    59.             // 此处写小程序页面path
    60.             path: `/index/index?path=${options.webViewUrl}`, 
    61.             success(res) {
    62.                 // 分享成功
    63.             },
    64.             fail(err) {
    65.                 // 分享失败
    66.             }
    67.         };
    68.     }
    69. });

    H5 页面

    • SWAN

    相关接口 1

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

    代码示例

    • SWAN
    • JS
    1. <!-- html -->
    2. <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.22.js"></script>

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

    相关接口 3

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

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

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

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

    “2.0.21.js”版本为举例，开发时请参考中的最新版本号进行填写。

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

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

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

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

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