专栏名称: 知晓程序
知晓程序,是爱范儿旗下专注「小程序生态」的品牌,提供小程序资讯、教程、活动、社区等服务。 更多内容请访问 minapp.com。
目录
相关文章推荐
白鲸出海  ·  中国互联网出海一周头条 ... ·  昨天  
白鲸出海  ·  TikTok全球范围裁员,安卓端Xbox应用 ... ·  3 天前  
白鲸出海  ·  与vivo一起,精准进军新兴市场 ·  3 天前  
白鲸出海  ·  腾讯出海,该学张一鸣了 ·  5 天前  
腾讯  ·  明晚八点,腾讯请你听一场音乐会! ·  1 周前  
51好读  ›  专栏  ›  知晓程序

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

知晓程序  · 公众号  · 科技公司  · 2017-07-12 11:54

正文

文 | 花叔
微信 7 月 11 日发布了一大堆小程序新特性,而官方发文只提了其中的几个点
今天,我就来详细解读这波「小程序升级页面体验相关能力」,其中包含 3 个新增组件标签、7 个新增 API 和强化视频组件。帮大家彻底弄明白它们能起什么作用。
注:这波小程序新能力不是热更新,需更新微信版本至 6.5.11 才能体验。
新增 3 个组件标签
1. 在地图、视频和画布上,可以展示简单的图片及文字
新增 可以覆盖在原生组件之上。
cover-view 是为了解决 video 或 canvas 上面没法放置元素的问题。举个栗子,在这之前,要在视频上放一个图或者一段字,那是很难的,借助于这个新标签就能很容易实现了。
2. 在微信群聊中使用的小程序,可以将本群群名称展示在自己的页面上
新增 可以展示微信开放数据。
而 open-data 有点意思,之前群 ID 接口开放的时候,被部分用户投诉这样会泄露个人信息(开发者有办法收集群昵称)。
于是,微信官方就想了这个 open-data 的方法,让同一个群的用户才可以在小程序里看到群昵称(用这样的显示方法的话,开发者貌似就没法存群昵称了)。
3. 小程序中可以很方便地展示富文本,如一段排版精美的文章
新增 可以展示富文本。
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 接口 在播放前设置无效的问题。

  • 更新 组件

  • 更新 组件

  • 更新 组件

  • 更新 组件

  • 更新 组件

  • 更新 组件

首先,让视频可动态切换全屏或非全屏状态,这个可以实现很多比以往要好的体验。
例如点击页面某个按钮就直接全屏播放某个视频,又或者是首次进入小程序时马上就全屏播放一个引导视频,等视频播放完再切换到落地页
其次,playbackRate 这个接口可以让视频倍数播放。
支持的倍率有 0.5/0.8/1.0/1.25/1.5,这个接口能让视频可快可慢地进行播放,可能会为部分视频类应用提供一些比较有创意的玩法
再有,增加了视频上手势控制音量和亮度的功能。

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

原文链接:http://t.cn/RKJilQ0

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

   
知晓云 cloud.minapp.com 是一个实时的后端服务。使用它后,开发人员只需简单地在小程序中接入 SDK,而无需管理服务器或编写后端代码,即可轻松构建功能丰富的小程序。

从今天起到正式上线,我们每天会派发三个公测邀请码,关注知晓云(微信:minacloud),后台回复「抢码」,即可参加抢码活动,名额有限,抓紧时间。


▽ 点击「阅读原文」,发现更多优质小程序