微信 7 月 11 日发布了一大堆小程序新特性,而官方发文只提了其中的几个点。今天,我就来详细解读这波「小程序升级页面体验相关能力」,其中包含 3 个新增组件标签、7 个新增 API 和强化视频组件。帮大家彻底弄明白它们能起什么作用。注:这波小程序新能力不是热更新,需更新微信版本至 6.5.11 才能体验。1. 在地图、视频和画布上,可以展示简单的图片及文字cover-view 是为了解决 video 或 canvas 上面没法放置元素的问题。举个栗子,在这之前,要在视频上放一个图或者一段字,那是很难的,借助于这个新标签就能很容易实现了。2. 在微信群聊中使用的小程序,可以将本群群名称展示在自己的页面上而 open-data 有点意思,之前群 ID 接口开放的时候,被部分用户投诉这样会泄露个人信息(开发者有办法收集群昵称)。于是,微信官方就想了这个 open-data 的方法,让同一个群的用户才可以在小程序里看到群昵称(用这样的显示方法的话,开发者貌似就没法存群昵称了)。3. 小程序中可以很方便地展示富文本,如一段排版精美的文章rich-text,本应该是我最期待的功能,但我研究了一下让我有点失望。这个不是 web 页面直接展示,它只是给带有内嵌样式的 html 代码做了一次转换,然后在小程序里展示。我拿 ckeditor 生成的富文本进行了测试,发现目前还存在很多问题,用起来相当不顺手,个人觉得比花叔团队之前做的转换组件还更不好用。经过我改造的外链样式,然后转化到小程序后,是这样的:理论上能转换,但需要做很多额外的事情,而且转换出来的内容只能做展示,没法绑定任何事件。这比自己转化成小程序别的标签还更不灵活(举个例子,如果需要做到「点击图片就预览图片」,那这个组件是做不到的)。这里好想吐槽,如果是直接用 webview 来放一个网页来承载富文本,把富文本处理的事情(例如样式的编辑)交给 web 侧去做,而不是让开发者在小程序内折腾,这样该多好。新增 API createSelectorQuery 获取元素布局信息。createSelectorQuery,这货有点牛逼,有点像 JQ 的 $ 了,当然,并没有 $ 厉害,目前只能选择某个元素,然后获取这个元素的一部分信息(例如 dataset)。新增 API onUserCaptureScreen 监听用户进行截屏事件。onUserCaptureScreen 监听用户的截屏事件,这个也有点意思,说不定以后可以做一些截屏分享的功能。例如,当用户截屏,就给他直接生成一个用当前屏幕跟其他视觉元素拼接的图片,比如做一个截屏和小程序二维码结合的、朋友圈分享用的图片。新增 API pageScrollTo 使页面滚动到指定位置。pageScrollTo,解决的时候之前不能滚动到指定位置的体验问题。新增 API setNavigationBarColor 支持小程序修改标题栏颜色。setNavigationBarColor,是让小程序能灵活的变换标题栏的样式,也是优化体验的。新增 API setKeepScreenOn 允许小程序设置屏幕保持常亮。setKeepScreenOn,这是控制屏幕亮度的 API,意思是以后打开小程序,可以控制小程序一直处于常亮状态。除此之外,还有下方两个新增的 API,大家有需求的话,可以查看官方文档详细了解。官方发文没有针对视频组件强化的描述,花叔觉得这里必须提一下,毕竟也是很有用的优化。新增 video 上下文 requestFullScreen exitFullScreen 接口,支持全屏。
新增 video 上下文 playbackRate 接口 支持倍速播放。
修复 video 上下文 seek 接口 在播放前设置无效的问题。
更新 组件 增加 loop 属性支持循环播放 详情。
更新 组件 增加 muted 属性支持静音播放 详情。
更新 组件 增加 bindfullscreenchange 事件监听视频全屏变化详情。
更新 组件 支持手势操作控制音量和亮度。
更新 组件 支持视频拖动增加 icon 提示。
更新 组件 在 Android 下切换成原生播放器。
首先,让视频可动态切换全屏或非全屏状态,这个可以实现很多比以往要好的体验。例如点击页面某个按钮就直接全屏播放某个视频,又或者是首次进入小程序时马上就全屏播放一个引导视频,等视频播放完再切换到落地页其次,playbackRate 这个接口可以让视频倍数播放。支持的倍率有 0.5/0.8/1.0/1.25/1.5,这个接口能让视频可快可慢地进行播放,可能会为部分视频类应用提供一些比较有创意的玩法这是一个优化体验的方式,想必现在 H5 里的原生视频组件都没实现这样的体验。
原文链接:http://t.cn/RKJilQ0
关注「知晓程序」微信公众号,后台回复「新能力」,获取小程序新能力全解读。
知晓云 cloud.minapp.com 是一个实时的后端服务。使用它后,开发人员只需简单地在小程序中接入 SDK,而无需管理服务器或编写后端代码,即可轻松构建功能丰富的小程序。
从今天起到正式上线,我们每天会派发三个公测邀请码,关注知晓云(微信:minacloud),后台回复「抢码」,即可参加抢码活动,名额有限,抓紧时间。
▽ 点击「阅读原文」,发现更多优质小程序。