• 媒体品牌
    爱范儿
    关注明日产品的数字潮牌
    APPSO
    先进工具,先知先行,AIGC 的灵感指南
    董车会
    造车新时代,明日出行家
    玩物志
    探索城市新生活方式,做你的明日生活指南
  • 知晓云
  • 制糖工厂
    扫描小程序码,了解更多

昨晚的小程序新能力,这些料微信官方可没告诉你

小程序

2017-07-12 15:00

文 | 花叔

微信 7 月 11 日发布了一大堆小程序新特性,而官方发文只提了其中的几个点

今天,我就来详细解读这波「小程序升级页面体验相关能力」,其中包含 3 个新增组件标签、7 个新增 API 和强化视频组件。帮大家彻底弄明白它们能起什么作用。

注:这波小程序新能力不是热更新,需更新微信版本至 6.5.11 才能体验。

新增 3 个组件标签

1. 在地图、视频和画布上,可以展示简单的图片及文字

新增 <cover-view /> 可以覆盖在原生组件之上。

cover-view 是为了解决 video 或 canvas 上面没法放置元素的问题。举个栗子,在这之前,要在视频上放一个图或者一段字,那是很难的,借助于这个新标签就能很容易实现了。

2. 在微信群聊中使用的小程序,可以将本群群名称展示在自己的页面上

新增 <open-data /> 可以展示微信开放数据。

而 open-data 有点意思,之前群 ID 接口开放的时候,被部分用户投诉这样会泄露个人信息(开发者有办法收集群昵称)。

于是,微信官方就想了这个 open-data 的方法,让同一个群的用户才可以在小程序里看到群昵称(用这样的显示方法的话,开发者貌似就没法存群昵称了)。

3. 小程序中可以很方便地展示富文本,如一段排版精美的文章

新增 <rich-text /> 可以展示富文本。

rich-text,本应该是我最期待的功能,但我研究了一下让我有点失望。

这个不是 web 页面直接展示,它只是给带有内嵌样式的 html 代码做了一次转换,然后在小程序里展示。

我拿 ckeditor 生成的富文本进行了测试,发现目前还存在很多问题,用起来相当不顺手,个人觉得比花叔团队之前做的转换组件还更不好用。

这是在 ckeditor 下面的测试富文本:

经过我改造的外链样式,然后转化到小程序后,是这样的:

理论上能转换,但需要做很多额外的事情,而且转换出来的内容只能做展示,没法绑定任何事件。

这比自己转化成小程序别的标签还更不灵活(举个例子,如果需要做到「点击图片就预览图片」,那这个组件是做不到的)。

这里好想吐槽,如果是直接用 webview 来放一个网页来承载富文本,把富文本处理的事情(例如样式的编辑)交给 web 侧去做,而不是让开发者在小程序内折腾,这样该多好。

新增 7 个 API

1. 可以获取小程序中的元素布局信息

新增 API createSelectorQuery 获取元素布局信息。

createSelectorQuery,这货有点牛逼,有点像 JQ 的 $ 了,当然,并没有 $ 厉害,目前只能选择某个元素,然后获取这个元素的一部分信息(例如 dataset)。

2. 当用户在小程序中截屏,可发送通知

新增 API onUserCaptureScreen 监听用户进行截屏事件。

onUserCaptureScreen 监听用户的截屏事件,这个也有点意思,说不定以后可以做一些截屏分享的功能。

例如,当用户截屏,就给他直接生成一个用当前屏幕跟其他视觉元素拼接的图片,比如做一个截屏和小程序二维码结合的、朋友圈分享用的图片。

3. 定位并记录用户的屏幕滑动情况

新增 API pageScrollTo 使页面滚动到指定位置。

pageScrollTo,解决的时候之前不能滚动到指定位置的体验问题。

4. 小程序可灵活调整顶部标题栏的颜色

新增 API setNavigationBarColor 支持小程序修改标题栏颜色。

setNavigationBarColor,是让小程序能灵活的变换标题栏的样式,也是优化体验的。

 

5. 让用户的手机屏幕保持常亮

新增 API setKeepScreenOn 允许小程序设置屏幕保持常亮。

setKeepScreenOn,这是控制屏幕亮度的 API,意思是以后打开小程序,可以控制小程序一直处于常亮状态。

除此之外,还有下方两个新增的 API,大家有需求的话,可以查看官方文档详细了解。

  • 新增 API getFileInfo 获取文件信息。
  • 新增 API setEnableDebug 控制线上版本 vConsole 的打开关闭。

强化视频组件

官方发文没有针对视频组件强化的描述,花叔觉得这里必须提一下,毕竟也是很有用的优化。

值得关注的强化视频组件有:

  • 新增 video 上下文 requestFullScreen exitFullScreen 接口,支持全屏。
  • 新增 video 上下文 playbackRate 接口 支持倍速播放。
  • 修复 video 上下文 seek 接口 在播放前设置无效的问题。
  • 更新 组件 <video /> 增加 loop 属性支持循环播放 详情。
  • 更新 组件 <video /> 增加 muted 属性支持静音播放 详情。
  • 更新 组件 <video /> 增加 bindfullscreenchange 事件监听视频全屏变化详情。
  • 更新 组件 <video /> 支持手势操作控制音量和亮度。
  • 更新 组件 <video /> 支持视频拖动增加 icon 提示。
  • 更新 组件 <video /> 在 Android 下切换成原生播放器。

首先,让视频可动态切换全屏或非全屏状态,这个可以实现很多比以往要好的体验。

例如点击页面某个按钮就直接全屏播放某个视频,又或者是首次进入小程序时马上就全屏播放一个引导视频,等视频播放完再切换到落地页

其次,playbackRate 这个接口可以让视频倍数播放。

支持的倍率有 0.5/0.8/1.0/1.25/1.5,这个接口能让视频可快可慢地进行播放,可能会为部分视频类应用提供一些比较有创意的玩法

再有,增加了视频上手势控制音量和亮度的功能。

这是一个优化体验的方式,想必现在 H5 里的原生视频组件都没实现这样的体验。

关注「知晓程序」微信公众号,后台回复「新能力」,获取小程序新能力全解读。

zxcx_0208

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中

小程序商店 minapp.com,一扫即用的小程序大全。微信公众号「知晓程序」,做中国最好的小程序报道。

本篇来自栏目

解锁订阅模式,获得更多专属优质内容