不久前微信小程序发布了web-view组件，这个消息在各个圈里引起不小的涟漪。近期正好在做小程序的项目，便研究了一下这个让大家充满期待的组件。
官网的介绍：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。简单来说，这个组件是一个和当前页面一样大小的容器，容器里显示的是属性src引用的url的内容。类似于html中的iframe框架。不同的是iframe可以自定义大小边框等样式，webview自动铺满整个小程序页面。
小程序的页面开发虽然和HTML开发类似，但小程序有自己定义的标签，且不支持HTML标签。这样HTML那些丰富的标签在小程序开发中完全无用武之地，也就限制了页面的表现形式。对于已经开发了移动网站的项目来说，若想要开发个小程序版本，就只能优雅降级重新开发了，有了这个组件，搭个框架简单一行代码就够了。更新小程序版本的话，需要微信审核，如果把内容放在嵌入的网页上，热更新搞定。除了这些，网站上那些运营方案也让大家跃跃欲试。
注：配置域名时，并不是随便一个备案过的https就可以的，需要从配置后台下载校验文件放在域名根目录下，验证通过后才能配置成功。
//javascriptwx.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组件的更多相关文章一套代码小程序&Web&Native运行的探索06组件系统
接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考:
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 !--compone ...
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
一般我们进行取余运算第一个想到的就是用百分号%,但当除数是个很大的数值,超出了int范围时,这样取余就不准确了. php大数(浮点数)取余函数 /** * php大数取余 * * @param int ...
本文是浙江大学出版社的LEMON语法分析生成器(LALR 1类型)源代码情景分析学习笔记. 用到的Windows下的编译器介绍MinGW(
UNIOn ALL只是简单的将两个结果合并后就返回.这样,如果返回的两个结果集中有重复的数据,那么返回的结果集就会包含重复的数据了. 从效率上说,UNIOn ALL 要比UNIOn快很多,所以,如果可 ...
工具:VirtualBox,ubuntu14.04 1.选择要设置共享文件夹的虚拟机,点击设置 点击共享文件夹,新建文件夹,选择路径 2.打开虚拟机,从上方工具栏中找到设备,然后点击安装增强功能(由于 ...
PCB行业研究 PCB产业上下游 关于HDI电路板 主要用于手机行业,对电路板面积有严格要求. 啥时候铜材料上涨
