智能小程序档案馆

2020-06-14 12:13| 发布者:

今天是百度智能小程序学院“智能小程序档案馆”的第一课,接下来的日子里我们会为您介绍更多关于智能小程序的知识哦~

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

按照官网的说法来讲:“web-view 组件是一个可以用来承载网页的容器,会自动铺满整个智能小程序页面。” 其实前端的同学大可以把它理解为类似于一个全屏铺开的,z-index最高的iframe。 访问一个页面时,使用web-view组件的src属性,它将会覆盖在该页面所有的组件之上,(如图1.1)。每个页面只能有一个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

!-- 在小程序中 --web-view src=https://m.baidu.com/usrprofile?action=homemodel=userori=index bindmessage=mymessage/web-viewswan.webView.postMessage({data: 1});

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。

通过实际检测,我们发现,在**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组件可以与小程序本体通讯,这样可以间接的通过小程序调用所有swan的API,使用方法如下:

!-- 在小程序中 --web-view src=https://m.baidu.com/usrprofile?action=homemodel=userori=index bindmessage=mymessage/web-view

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

<
>
昆明腾瑞网络有限公司积极引导客户理解互联网对企业的品牌价值,并充分把握中小型企业信息化管理的个性化需求,提供真正有价值的信息化服务产品,让企业在全球一体化的经济体系下的竞争中处于不败之地,不仅深谙互联网核心技术的开发,而且对全球互联网市场和IT行业的大势均有精确的把控。

联系我们

昆明龙泉路实力壹方城6栋1702号

0871-65125379(服务时间:9:00-18:00)

3568089682@qq.com

在线咨询 官方微信官方微信

网站建设 微信开发 售后服务 咨询电话0871-65125379 返回顶部
返回顶部