首先，请更新微信版本至 6.5.11 。
微信 7 月 11 日发布了一大堆小程序新特性，小程序迎来了一次全方位的升级，其中包含 3 个新增组件标签、7 个新增 API ，并且强化了视频组件。
这些升级和新特性带来了什么？
增强页面体验。小程序可以调整顶部标题栏的颜色了，还能获取页面布局，比如记住用户上次浏览的位置。可以在地图、视频和画布上展示简单的图片和文字。可以很方便地展示富文本，文章排版可以更精美。
提升硬件能力。小程序可以让用户手机屏幕保持亮起，还支持截屏事件通知，比如当用户在小程序中截屏保存了敏感信息时可以提醒注意隐私安全。
强化视频功能。视频可动态切换全屏非全屏，可以让视频倍数播放，增加了视频上手势控制音量和亮度的功能。
下面一一解读。
新增 3 个组件标签
1. 在地图、视频和画布上，可以展示简单的图片及文字
新增 <cover-view /> 可以覆盖在原生组件之上。
cover-view 解决了 video 或 canvas 上面没法放置元素的问题。以前，要在视频上放一个图或者一段字是很难的，借助于这个新标签就能很容易实现。
2. 在微信群聊中使用的小程序，可将群名称展示在自己的页面上
新增 <open-data /> 可以展示微信开放数据。
open-data 方法让同一个群的用户可以在小程序里看到群昵称（用这样的显示方法的话，开发者貌似就没法存群昵称了）。
3. 小程序中可以很方便地展示富文本，如一段排版精美的文章
新增 <rich-text /> 可以展示富文本。
rich-text 只是给带有内嵌样式的 html 代码做了一次转换，然后在小程序里展示，不是 web 页面直接展示。不太顺手，其实用 webview 网页承载富文本，是不是更好。
新增 7 个 API
1. 可以获取小程序中的元素布局信息
新增 API createSelectorQuery 获取元素布局信息。
createSelectorQuery，类似 jQuery 的 $ ，当然，并没有 $ 厉害，目前只能选择某个元素，然后获取这个元素的部分信息。
2. 当用户在小程序中截屏，可发送通知
新增 API onUserCaptureScreen 监听用户进行截屏事件。
onUserCaptureScreen 监听用户的截屏事件，可以做一些截屏分享的功能。例如，当用户截屏，就给他直接生成一个用当前屏幕跟其他视觉元素拼接的图片，比如做一个截屏和小程序二维码结合的、朋友圈分享用的图片。
3. 定位并记录用户的屏幕滑动情况
新增 API pageScrollTo 使页面滚动到指定位置。
pageScrollTo，解决之前不能滚动到指定位置的体验问题。
4. 可调整顶部标题栏的颜色
新增 API setNavigationBarColor 支持小程序修改标题栏颜色。
setNavigationBarColor，让小程序能灵活的变换标题栏的样式，优化体验。
5. 让用户的手机屏幕保持常亮
新增 API setKeepScreenOn 允许小程序设置屏幕保持常亮。
setKeepScreenOn，控制屏幕亮度的 API，以后打开小程序，可以控制小程序一直处于常亮状态。
6. 获取文件信息
新增 API getFileInfo 获取文件信息。
7. 控制线上版本 vConsole 的打开关闭
新增 API setEnableDebug 控制线上版本 vConsole 的打开关闭。
值得关注的强化视频组件
官方发文没有针对视频组件强化的描述。
- 新增 video 上下文 requestFullScreen exitFullScreen 接口，支持全屏。
- 新增 video 上下文 playbackRate 接口 支持倍速播放。
- 修复 video 上下文 seek 接口 在播放前设置无效的问题。
- 更新 组件 <video /> 增加 loop 属性支持循环播放 详情。
- 更新 组件 <video /> 增加 muted 属性支持静音播放 详情。
- 更新 组件 <video /> 增加 bindfullscreenchange 事件监听视频全屏变化详情。
- 更新 组件 <video /> 支持手势操作控制音量和亮度。
- 更新 组件 <video /> 支持视频拖动增加 icon 提示。
- 更新 组件 <video /> 在 Android 下切换成原生播放器。
1. 视频可动态切换全屏非全屏
例如：点击页面某个按钮就直接全屏播放某个视频，又或者是首次进入小程序时马上就全屏播放一个引导视频，等视频播放完再切换到落地页。
2. 可以让视频倍数播放
playbackRate 接口支持的倍率有 0.5/0.8/1.0/1.25/1.5，这个接口能让视频可快可慢地进行播放，可能会为部分视频类应用提供一些比较有创意的玩法。
3. 支持手势控制音量和亮度
想必现在 H5 里的原生视频组件都没有实现这样的体验。
参考官方文档：
https://mp.weixin.qq.com/debug/wxadoc/dev/api/
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/new.html
网友评论