web-view 网页容器

    在开发者工具中预览效果

    请使用百度APP扫码

    代码示例1 ：

    在开发者工具中预览效果

    2.     data: {
    3.         src: 'https://smartprogram.baidu.com'
    4.     },
    5.     onLoad(options) {
    6.         console.log(options.webViewUrl);
    7.     }
    8. });

    代码示例2 - 在特定时机接受到H5传递参数的函数 ：

    在开发者工具中预览效果

    1. <view>
    2.     <web-view src="{{src}}"></web-view>
    3. </view>
    2. let UA = window.navigator.userAgent;
    3. var regex = /swan\//;
    4. console.log( regex.test(UA) );// 若为true，则是在小程序的web-view中打开

    代码示例4 - 原生页面与H5页面之间的跳转刷新：

    在开发者工具中预览效果

    • 在 detail文件中
    1. <web-view src="{{url}}"></web-view>
    • 在 index 文件中
    1. Page({
    2.     data: { },
    3.         swan.navigateTo({
    4.             url: "/detail/detail?webViewUrl=https://smartprogram.baidu.com&Math.radom()"
    6.     }
    7. });

    相关接口1

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

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

    相关接口2

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

    相关接口3

    代码示例：

    1. Page({
    2.     onShareAppMessage(options) {
    3.         console.log(options.webViewUrl);
    4.     }
    5. })

    进入智能小程序开发者平台，单击“设置->开发设置”，即可在业务域名中下载、配置校验文件并配置业务域名。

    web-view 网页容器 - 图2

    • Tip：网页内 iframe 的域名也需要配置到域名白名单。
    • Tip：每个页面只能有一个 <web-view/>，<web-view/> 会自动铺满整个页面，并覆盖其他组件。
    • Tip：网页与智能小程序之间不支持除 JSSDK 提供的接口之外的通信。
    • Tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。
    • Tip：如果使用了 JSSDK 提供的接口，需要引入 。
    • Tip：H5 运行时，通过 window.navigator.userAgent 获取浏览器 userAgent。当 userAgent 字符串中包含小程序标识：‘swan/’时，则说明当前环境为小程序 web-view。