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

爱范儿  •  扫码分享
我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

文 | 花叔

微信 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 里的原生视频组件都没实现这样的体验。

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


随意打赏

微信小程序官方文档微信小程序新功能微信小程序新能力微信小程序开发微信小程序能力微信小程序官方
提交建议
微信扫一扫,分享给好友吧。