昨晚的小程序新能力，這些料微信官方可沒告訴你

微信 7 月 11 日發布了一大堆小程序新特性，而官方發文只提了其中的幾個點。今天，我就來詳細解讀這波「小程序升級頁面體驗相關能力」，其中包含 3 個新增組件標籤、7 個新增 API 和強化視頻組件。

幫大家徹底弄明白它們能起什麼作用。

註：這波小程序新能力不是熱更新，需更新微信版本至 6.5.11 才能體驗。

新增可以覆蓋在原生組件之上。cover-view 是為了解決 video 或 canvas 上面沒法放置元素的問題。

舉個栗子，在這之前，要在視頻上放一個圖或者一段字，那是很難的，藉助於這個新標籤就能很容易實現了。

新增可以展示微信開放數據。而 open-data 有點意思，之前群 ID 介面開放的時候，被部分用戶投訴這樣會泄露個人信息（開發者有辦法收集群昵稱）。

於是，微信官方就想了這個 open-data 的方法，讓同一個群的用戶才可以在小程序里看到群昵稱（用這樣的顯示方法的話，開發者貌似就沒法存群昵稱了）。

新增可以展示富文本。rich-text，本應該是我最期待的功能，但我研究了一下讓我有點失望。

這個不是 web 頁面直接展示，它只是給帶有內嵌樣式的 html 代碼做了一次轉換，然後在小程序里展示。

我拿 ckeditor 生成的富文本進行了測試，發現目前還存在很多問題，用起來相當不順手，個人覺得比花叔團隊之前做的轉換組件還更不好用。

這是在 ckeditor 下面的測試富文本：

經過我改造的外鏈樣式，然後轉化到小程序后，是這樣的：

理論上能轉換，但需要做很多額外的事情，而且轉換出來的內容只能做展示，沒法綁定任何事件。

這比自己轉化成小程序別的標籤還更不靈活（舉個例子，如果需要做到「點擊圖片就預覽圖片」，那這個組件是做不到的）。

這裡好想吐槽，如果是直接用 webview 來放一個網頁來承載富文本，把富文本處理的事情（例如樣式的編輯）交給 web 側去做，而不是讓開發者在小程序內折騰，這樣該多好。

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

createSelectorQuery，這貨有點牛逼，有點像 JQ 的 $ 了，當然，並沒有 $ 厲害，目前只能選擇某個元素，然後獲取這個元素的一部分信息（例如 dataset）。

新增 API onUserCaptureScreen 監聽用戶進行截屏事件。

onUserCaptureScreen 監聽用戶的截屏事件，這個也有點意思，說不定以後可以做一些截屏分享的功能。

例如，當用戶截屏，就給他直接生成一個用當前屏幕跟其他視覺元素拼接的圖片，比如做一個截屏和小程序二維碼結合的、朋友圈分享用的圖片。

新增 API pageScrollTo 使頁面滾動到指定位置。pageScrollTo，解決的時候之前不能滾動到指定位置的體驗問題。

新增 API setNavigationBarColor 支持小程序修改標題欄顏色。setNavigationBarColor，是讓小程序能靈活的變換標題欄的樣式，也是優化體驗的。

新增 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 里的原生視頻組件都沒實現這樣的體驗。