微信7月11日发布了一大堆小程序新特性,而官方发文只提了其中几个点,今天为大家详细解读一下,主要涵盖以下内容:(注.这不是热更新,这是需要更新微信到1.4.0版本才能体验的)
新增3个组件标签:
<cover-view />
可以覆盖在原生组件之上<open-data />
可以展示微信开放数据<rich-text />
可以展示富文本解读:
cover-view是为了解决video或canvas上面没法放置元素的问题,举个栗子,在这之前,要在视频上放一个图或者一段字,那是很难的,借助于这个新标签就能很容易实现了。
而open-data有点意思,之前群接口开放的时候,被部分用户投诉这样会泄露个人信息(开发者有办法收集群昵称),于是微信官方就想了这个open-data的方法,让同一个群的用户才可以在小程序里看到群昵称(用这样的显示方法的话,开发者貌似就没法存群昵称了)。
rich-text,本应该是我最期待的功能,但我研究了一下让我有点失望,这个不是web页面直接展示,它只是给带有内嵌样式的html代码做了一次转换,然后在小程序里展示,我拿ckeditor生成的富文本进行了测试,发现目前还存在很多问题,用起来相当不顺手,个人觉得比花叔团队之前做的转换组件还更不好用。
这是在ckeditor下面的测试富文本:
经过我改造外链样式,然后转化到小程序后,是这样的:
理论上能转换,但需要做很多额外的事情,而且转换出来的内容只能做展示,没法绑定任何事件,这比自己转化成小程序别的标签还更不灵活(举个例子,如果需要做到“点击图片就预览图片”,那这个组件是做不到的)。这里好想吐槽,如果是直接用webview来放一个网页来承载富文本,把富文本处理的事情(例如样式的编辑)交给web侧去做,而不是让开发者在小程序内折腾,这样该多好。
新增7个API:
createSelectorQuery
获取元素布局信息 getFileInfo
获取文件信息 onUserCaptureScreen
监听用户进行截屏事件 pageScrollTo
使页面滚动到指定位置 setNavigationBarColor
支持小程序修改标题栏颜色setEnableDebug
控制线上版本 vConsole 的打开关闭 setKeepScreenOn
允许小程序设置屏幕保持常亮解读:
createSelectorQuery,这货有点牛逼,有点像JQ的$了,当然,并没有$厉害,目前只能选择某个元素,然后获取这个元素的一部分信息(例如dataset)。
onUserCaptureScreen监听用户的截屏事件,这个也有点意思,说不定以后可以做一些截屏分享的功能,例如当用户截屏就给他直接生成一个用当前屏幕跟其他视觉元素拼接的图片,例如:做一个截屏和小程序二维码结合的、朋友圈分享用的图片。
pageScrollTo,解决的时候之前不能滚动到指定位置的体验问题。
setNavigationBarColor,是让小程序能灵活的变换标题栏的样式,也是优化体验的。
setKeepScreenOn,这是控制屏幕亮度的API,意思是以后打开小程序,可以控制小程序一直处于常亮状态。
强化视频组件,值得关注的有:
requestFullScreen
exitFullScreen
接口 支持全屏playbackRate
接口 支持倍速播放seek
接口 在播放前设置无效的问题<video />
增加 loop 属性支持循环播放 详情<video />
增加 muted 属性支持静音播放 详情<video />
增加 bindfullscreenchange 事件监听视频全屏变化 详情<video />
支持手势操作控制音量和亮度<video />
支持视频拖动增加 icon 提示<video />
在 Android 下切换成原生播放器解读:
官方发文没有对视频组件强化的描述,花叔觉得这里必须提一下,毕竟也是很有用的优化:
首先,让视频可动态切换全屏或非全屏状态,这个可以实现很多比以往要好的体验,例如点击页面某个按钮就直接全屏播放某个视频,又或者是首次进入小程序时马上就全屏播放一个引导视频,等视频播放完再切换到落地页
其次,playbackRate这个接口可以让视频倍数播放,支持的倍率有 0.5/0.8/1.0/1.25/1.5,这个接口能让视频可快可慢地进行播放,可能会为部分视频类应用提供一些比较有创意的玩法
再有,增加了视频上手势控制音量和亮度的功能,这是一个优化体验的方式,想必现在h5里的原生视频组件都没实现这样的体验。
这次更新,变动好大,新特性很多,没法一一列举,大伙如果发现了更有意思的特性,欢迎留言反馈。