智能小程序档案馆 —— 聊一聊 web-view 组件

哈喽大家好～今天是百度智能小程序学院“智能小程序档案馆”的第一课，在接下来的日子里，小编会定期 or 不定期的为您介绍、解答更多关于智能小程序的使用方法，欢迎大家持续关注，留言互动～

很多开发智能小程序的朋友，经常会对于 web-view 组件的使用感到困惑，不知道要如何配置，才能通过使用 web-view 组件来完成融合开发，复用自己之前的 web 页面，今天我们就和大家好好 聊一聊 web-view 组件 ：

web-view组件简介

按照官网的说法来讲：“ web-view 组件是一个可以用来承载网页的容器，会自动铺满整个智能小程序页面。”

其实前端的同学大可以把它理解为类似于一个全屏铺开的， z-index 最高的 iframe 。 访问一个页面时，使用 web-view 组件的 src 属性，它将会覆盖在该页面所有的组件之上。(如图1.1)

每个页面只能有一个web-view组件，如果有多个，则只有第一个web-view会生效。

web-view组件使用的前提条件

web-view组件中，所使用网页的域名需要提前在开放平台的域名白名单中进行配置。 如图2.1与图2.2：

为了监测域名的合法性，我们需要下载一个校验文件，并放到域名的根目录下。这样，开放平台才能校验这个域名是不是属于你的。如果 web-view 组件中使用的域名没有在域名白名单中进行配置，那么 web-view 组件就不会生效。

• 如果 web-view 使用的网页中使用了 iframe ，那么iframe 的 src 中使用的域名也需要配置到域名白名单中。

• 页面中发送的 ajax 请求和静态资源请求则不会受到此限制。

web--view组件中可以使用小程序中的一些API，不过前提是要在网页中引用智能小程序的 jssdk ，地址如下：

<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan.js"></script>
复制代码

这段脚本会在window上挂载全局变量swan，在代码中可以像这样使用端能力：

swan.webView.navigateTo({url: '/pages/detail/index'});
复制代码

也可以动态使用js插入：

• 在小程序中：

<!-- 在小程序中 -->
<web-view src="https://m.baidu.com/usrprofile?action=home&model=user&ori=index" bindmessage="mymessage"></web-view>
swan.webView.postMessage({
   data: 1
});
复制代码

• 在web-view的网页里

var scrip = document.createElement('script');
scrip.src = 'https://b.bdstatic.com/searchbox/icms/searchbox/js/swan.js';
document.body.appendChild(scrip);
复制代码

• 目前官网的这段脚本使用的还是固定地址。所以，想要使用的同学可以在官网的JSSDK后面加个query，如：?timestamp=xxxx。
• 防止缓存造成的影响，也可下载到本地CDN进行管理。

web-view组件的UA

通过实际检测，我们发现，在 web-view 中使用网页，可以区分出来小程序与手机百度UA的不同的：

IOS中web-view的UA
Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E217 swan/1.6(web-view) baiduboxapp/10.11.0.0 (Baidu; P2 11.3)
Android中web-view的UA
Mozilla/5.0 (Linux; Android 5.1.1; vivo X7Plus Build/LMY47V; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/48.0.2564.116 Mobile Safari/537.36 T7/10.11 swan/1.6 baiduboxapp/10.10.0.12 (Baidu; P1 5.1.1)
复制代码

这里可以看到，其中有swan的标识和版本号，并且有webview的标识，妈妈再也不用担心我的网页区分不出来手百与小程序啦～～

这里可以给广大使用webvie，并想检测版本号的同学一个福利 —— 写好的获取版本号的正则!

var ua = `Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E217 swan/1.6(web-view) baiduboxapp/10.11.0.0 (Baidu; P2 11.3)`;
/swan\/([^(]*)\(web-view\)/g.exec(ua);
// 输出结果： ["swan/1.6(web-view)", "1.6", index: 110, input: "Mozilla/5.0 (iPhone; CPU iPhone OS 11_3 like Mac O…(web-view) baiduboxapp/10.11.0.0 (Baidu; P2 11.3)", groups: undefined]
复制代码

web-view组件与小程序通讯

web-view组件可以与小程序本体通讯，这样可以间接的通过小程序调用所有swan的API，使用方法如下：

• 在小程序中：

<!-- 在小程序中 -->
<web-view src="https://m.baidu.com/usrprofile?action=home&model=user&ori=index" bindmessage="mymessage"></web-view>
复制代码

• 在web-view的网页里

// 在小程序web-view组件的网页中
swan.webView.postMessage({
   data: 1
});
复制代码

通过这种方式，我们就可以实现和小程序的所有交互啦~~

不过需要注意的是，这种postMessage只会在特定时机（小程序后退、组件销毁、分享）触发哦。