返回顶部
首页 > 资讯 > 移动开发 >小程序web-view组件
  • 353
分享到

小程序web-view组件

小程序前端 2023-09-08 06:09:51 353人浏览 独家记忆
摘要

不久前微信小程序发布了WEB-view组件,这个消息在各个圈里引起不小的涟漪。近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件。   1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承

不久前微信小程序发布了WEB-view组件,这个消息在各个圈里引起不小的涟漪。近期正好在做小程序项目,便研究了一下这个让大家充满期待的组件。

 

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

"https://mp.weixin.qq.com/">

对,就这简单的一行代码就可以让网站的内容显示在小程序里。

4,webview网页和小程序的联系

小程序提供了webview网页中使用的jsSDK文件,引用方式如下:

1

2

3

4

5

// 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组件上能开放更多功能~

来源地址:https://blog.csdn.net/FuZhuangWang/article/details/131264145

--结束END--

本文标题: 小程序web-view组件

本文链接: https://www.lsjlt.com/news/399481.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作