[转]小程序web-view组件

摘要:
截止当前版本,小程序基本不能获取网页的数据,只有在用户分享的时候,可以从返回的参数中获取web-view组件当前显示的页面路径。另外,小程序tab页面有切换时只加载一次并缓存页面的特性,这一特性对web-view组件页面同样适用。比如在对小程序数据做统计时,并不能很好的收集用户在webview页面的行为。期待小程序在web-view组件上能开放更多功能~

本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html

1,web-view这个组件是什么鬼?
官网的介绍:web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。简单来说,这个组件是一个和当前页面一样大小的容器,容器里显示的是属性src引用的url的内容。类似于html中的iframe框架。不同的是iframe可以自定义大小边框等样式,webview自动铺满整个小程序页面。
2,这个组件能给我们带来什么?
小程序的页面开发虽然和HTML开发类似,但小程序有自己定义的标签,且不支持HTML标签。这样HTML那些丰富的标签在小程序开发中完全无用武之地,也就限制了页面的表现形式。对于已经开发了移动网站的项目来说,若想要开发个小程序版本,就只能优雅降级重新开发了,有了这个组件,搭个框架简单一行代码就够了。更新小程序版本的话,需要微信审核,如果把内容放在嵌入的网页上,热更新搞定。除了这些,网站上那些运营方案也让大家跃跃欲试。
3,web-view组件使用
虽然开放了这个组件,但使用时有很多限制:
使用限制:对个人类型和海外类型的小程序暂不支持
指向域名的限制:域名必须为https协议且经过ICP备案
域名修改限制:一个小程序最多可添加20个域名,一年可修改50次
小程序基础库限制:基础裤1.6.4以上版本支持这个组件,低版本需做兼容
注:配置域名时,并不是随便一个备案过的https就可以的,需要从配置后台下载校验文件放在域名根目录下,验证通过后才能配置成功。
克服以上重重难关后,在小程序项目中新建页面,配置路径,页面加入以下代码:
1
2
3
<!-- wxml -->
<!-- src地址是需要指向的网站地址 -->
<web-view src="https://mp.weixin.qq.com/"></web-view>
对,就这简单的一行代码就可以让网站的内容显示在小程序里。
4,webview网页和小程序的联系
小程序提供了webview网页中使用的JSSDK文件,引用方式如下:
1
2
3
4
5
<!-- html -->
<script type="text/javascript"src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
// javascript
wx.miniProgram.navigateTo({url:'/path/to/page'})
引入SDK后可以调用小程序JSSDK提供的接口,虽然不如小程序原生接口丰富,也能获取到设备网络状态、地理位置等信息,另外还提供了微信扫一扫、摇一摇、长按识别、拍照等接口。
截止当前版本,小程序基本不能获取网页的数据,只有在用户分享的时候,可以从返回的参数中获取web-view组件当前显示的页面路径。
由上可见webview网页和小程序间数据的联系非常弱。还有没有可以传输更多数据的方式呢?不死心又验证了两者的localStorage,结果是并不互通。
5,web-view组件其他表现
Q:web-view组件对网页重定向的表现
A:如果重定向的域名在当前小程序的业务域名下,可以重定向(301、301均可);否则提示无法打开
Q:打开web-view组件页面,其他页面是否被销毁
A:页面是否被销毁,不受当前页面是否为web-view组件页的影响。另外,小程序tab页面有切换时只加载一次并缓存页面的特性,这一特性对web-view组件页面同样适用。若将web-view组件页设置为tab页面,web-view组件页和加载的业务域名网站同样会被缓存,且设置为tab页的web-view组件页会保留tab组件显示。
Q:webview页面通过scheme打开手机app的表现
A:小程序并不能正确解析app配置的scheme,所以也不能通过scheme打开app。若通过scheme做跳转,在开发者工具中调试时会出现“ERR_UNKNOWN_URL_SCHEME”的错误,在移动客户端上表现为没有反应。
6,总结
小程序和网页间数据交互还太弱,对小程序第三方组件开发者来说并不能很好发挥作用。比如在对小程序数据做统计时,并不能很好的收集用户在webview页面的行为。如果小程序和webview网页的存储能打通,将带来更多可能性,但微信对每个小程序Storage设置的上限为10MB,而且其存储类型和浏览器也并不一致,所以打通的可能性并不大。如果在小程序中能监听到webview页面内url请求,也许可以尝试像hybrid一样通过url传递数据做统计。期待小程序在web-view组件上能开放更多功能~

免责声明:文章转载自《[转]小程序web-view组件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Tomcat的配置文件详解深入跟踪MFC程序的执行流程下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Struts 2.x仍然明显落后于时代。 Struts 2.x这一类老牌Web MVC开发框架仅能用于开发瘦客户端应用,无法用来开发对于交互体验要求更高的应用。

后来我在工作中陆续使用过Struts 1.x和Struts 2.x。我曾经把一个开源的基于Struts 1.x的自助式广告联盟应用移植到Spring MVC,还基于Struts 2.x做过网站开发。Struts 1.x的主要问题是框架的侵入性太大,不利于代码重用和单元测试。Struts 2.x确实进步很大,完全基于POJO,学习曲线低了很多,还支持零配置(...

Charles https乱码处理

第一步:设置手机代理 1.查看本机电脑ip地址打开Help -> Local IP Address 即可看到,记录下这个ip地址后面有用(手机设置代理需要输入的ip地址)。     打开Proxy -> Proxy Settings... 查看代理端口配置,默认值为8888记下这个端口(手机设置代理需要的端口号)。 设置手机代理保证手机和电...

matlab矢量场数值可视化(动态数值模拟)

https://blog.csdn.net/eric_e/article/details/81294092 D3.js实现数据可视化 三维可视化 风场可视化(数据插值):风场是动态变化的,实时刷新的,数据实时动态性较高 windy:https://download.csdn.net/download/weixin_38690337/10724155http...

开源中国社区项目部署

一.官方网站 https://git.oschina.net/ 开源中国社区成立于2008年8月,其目的是为中国的IT技术人员提供一个全面的、快捷更新的用来检索开源软件以及交流使用开源经验的平台 目前国内有很多公司会将公司的项目部署在OSChina 二.与GitHUB的对比 服务器在国内,速度更快 免费账户同样可以建立私有项目,而GitHUB上要建...

Django(一):从socket到MVC

一、socket的http套路 web应用本质上是一个socket服务端,用户的浏览器是一个socket客户端。socket处在应用层与传输层之间,是操作系统中I/O系统的延伸部分(接口),负责系统进程和应用之间的通信。 HTTP协议又称超文本传输协议。 1 //浏览器发送一个HTTP请求; 2 //服务器收到请求,根据请求信息,进行函数处理,生成一个H...

小米open-falcon监控系统接入手册

一、新项目接入 0、官方文档: https://book.open-falcon.org/zh_0_2/usage/getting-started.html 1、联系运维人员确定可以使用监控系统: (1)机器内网ip (2)报警接收人的信息(账户,密码) 2、登陆网页,按照官方文档配置监控项: (1)配置机器组hostgroup (2)配置报警模版temp...