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

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

浏览量:3689 时间: 来源:weixin_33881041

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

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

web-view组件简介

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

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

 
 图1.1

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

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

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

图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的UAMozilla/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的UAMozilla/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只会在特定时机(小程序后退、组件销毁、分享)触发哦。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎