百度小程序-web-view内嵌h5页

开发文档

smartprogram.baidu.com/docs/develo…

开发方式

1. 小程序内

     <!-- swan -->
    <!-- 首页的 web-view -->
    <web-view src="https://m.baidu.com"></web-view>
   

   使用 web-view 打开限定域名内的网页 进入智能小程序开发者平台，单击“设置->开发设置”，即可在业务域名中下载、配置校验文件并配置业务域名。

2. h5内html引入公共swan.js

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

3. h5内的端能力需要使用小程序api代替，例如：登录，分享，跳转等，具体哪些api可用可参见使用文档

     // 跳转到小程序内的其他页面
       swan.webView.navigateTo({url: '/pages/detail/index'});
       // 判断当前h5页是在小程序内
       swan.webView.getEnv(function(res) { console.log(res.smartprogram) // true })
       // 分享，这里有个注意点和小程序内不同的是一定要带这个appkey
       swan.openShare({
          appKey: 'xxxx',
          title: shareConf.title,
          content: shareConf.content,
          imageUrl: iconUrl,
          //  'https://b.bdstatic.com/searchbox/icms/searchbox/img/po/act/newuserredpack/box_logo.png',
          path: '/pages/mall/index?idfrom=share'
      })
   

Bug & Tip:

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