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

- 作者：知晓程序
- 发布时间：2017-07-12 15:00
- 原文：https://www.ifanr.com/minapp/871041

![](https://s3.ifanr.com/wp-content/uploads/2017/07/xnl-1.jpeg)

文 \| 花叔

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

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

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

### 新增 3 个组件标签

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

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

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

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

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

而 open-data 有点意思，之前[群 ID 接口](http://www.ifanr.com/minapp/832270)开放的时候，被部分用户投诉这样会泄露个人信息（开发者有办法收集群昵称）。

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

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

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

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

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

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

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

![](https://s3.ifanr.com/wp-content/uploads/2017/07/WechatIMG553.jpeg)

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

![](https://s3.ifanr.com/wp-content/uploads/2017/07/WechatIMG561.jpeg)

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

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

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

### 新增 7 个 API

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

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

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

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

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

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

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

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

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

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

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

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

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

![](https://s3.ifanr.com/wp-content/uploads/2017/07/haushu.gif)

#### **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](https://s3.ifanr.com/wp-content/uploads/2017/02/zxcx_0208.png)