關閉

7大性感拓展組件賦能你的小程序

聊聊目前微信小程序使用度和關注度比較高的7個拓展組件及2個插件服務。

2019年微信小程序生態繼續保持高速蓬勃的發展,截止2019年上八年日活達到2.5億。微信在搜索端也開放了全量搜索,微信PC端目前也在內測電腦上直接打開小程序的服務,逐漸提升小程序的曝光量,進一步實現全面覆蓋。

隨著小程序生態逐漸穩定,能夠清晰認知到微信小程序有哪些基礎能力與拓展組件,不管在產品設計上還是運營推廣上都能達到事半功倍的效果。否則你根本不知道你能設計出怎樣的產品。

從微信小程序面世以來,不斷有一些開源組件庫出來。下面主要聊聊目前微信小程序使用度和關注度比較高的7個拓展組件及2個插件服務。微信小程序自家的WeUI框架封裝出來的組件與微信原生視覺一致的組件庫。一能令用戶使用感知更加統一,二能讓企業/開發者達到降本增效的結果。

一:7大拓展組件

Dialog彈窗組件

Dialog組件在WeUI上表現形式目前有3種:

第一種是Android和IOS上都比較常見的原生對話框形式,顯示一個標題和內容以及操作按鈕。

第二種是模擬Dialog,包含標題、圖片和操作按鈕,主要利用圖片代替文字來傳遞信息。

第三種是半屏彈窗Dialog,顯示主副標題、主副內容和操作按鈕。主要輔助完成當前頁面任務時;提醒用戶并引導用戶進行下一步操作。

可自定義屬性:按鈕數量(建議不超過2個)、按鈕文本、蒙層、對話標題、關閉彈窗的事件、圖片等等

Slideview組件

Slideview組件左滑動后顯示按鈕組合供用戶進行操作(收藏、刪除等),這種形式印象中最早主要應用在iOS平臺的程序開發上。適用于內容重復性比較強的列表頁面。

比如想要刪除一條內容,選中所需刪除的內容所在的區域,往屏幕左邊滑動即可調出對應按鈕組合,再點擊一下即可刪除成功?;瑒觿h除屬于二次確認的一種,因為需要兩步交互才能操作成功,所以更適用于重復性強且誤操作高的頁面。

可自定義屬性:是否顯示icon、按鈕樣式數量及文本、顯示及隱藏觸發的事件等等

Navigation導航欄組件

Navigation是小程序的頂部導航組件,從不支持自定義導航欄,到支持全局自定義導航欄,再到現在的支持單頁面配置,不斷的在完善。有很多優秀的小程序導航欄設計得非常溜。非常貼合產品和業務。如拼多多和有車以后小程序 直接把搜索框設計在導航欄里,既節省了首頁的顯示空間又強化了搜索的頻次。

可自定義屬性:樣式、loading、隱藏時的過場動畫等等

ps:web-view里面的導航欄不支持自定義

Badge組件

常見的Badge組件一般出現在按鈕、圖標附近的數字或者狀態標記。使用該組件基本目的為了傳達用戶某些信息,如站內信未讀消息、狀態更新等。

可自定義屬性:數字提示還是文字提示、大小和顏色等等。

Gallery組件

多數與Uploader組件同時存在,用于多張圖片顯示,可左右滑動查看圖集直到滑到最后第一/最后一張為止。

可自定義屬性:刪除按鈕、點擊圖片隱藏組件、圖片序號、切換圖片事件等等。

Loading組件

用戶反饋動畫 loading組件在這里提供了3種類型類型,分別是dot-white、dot-gray、circle。供用戶在加載數據時反饋一個正在加載效果。

可自定義屬性:提示文字、過度動畫時間、loading類型等等。

SearchBar搜索組件

搜索組件Searchbar常與導航欄組件Navigation“打配合”,多數用于功能模塊多且信息結構稍負責的頁面上。

可自定義屬性,如是否顯示默認搜索關鍵字,點擊輸入框觸發時間、取消按鈕顯示、搜索框樣式、結果列表樣式等等

頂部Toptips組件

Toptips組件多數同時與表單組件“打配合”,多數用于表單校驗或提交請求到后臺成功或失敗的錯誤提示。

可自定義屬性:提示消失時間、提示類型(警告、錯誤、成功)、提示內容、提示隱藏后觸發的事件、自定義樣式等等

二:插件服務

1、OCR識別插件

微信小程序的OCR插件目前提供多個識別能力賦能第三方小程序調用,適用于遠程身份認證和內容審核監管領域。具體有以下能力。

1.識別身份證:實現用戶身份證信息的自動錄入,可識別漢族二代證、少數民族身份證、香港身份證、澳門身份證、臺灣身份證以及部門國外身份證等。

應用場景:在電商、直播領域應用身份證OCR實現賣家/主播實名身份識別和認證,提高服務質量避免惡意欺詐等業務風險

2.識別駕駛證:實現用戶駕駛證信息的自動錄入,識別機動車駕駛證正頁的關鍵字段,包括證號、姓名、性別、國籍、住址、初次領證日期等等。

應用場景:交通信息服務類應用,使用駕駛證和行駛證識別實現車主信息的自動識別和錄入,為車主提供相關信息的推送,減少用戶輸入成本,提升體驗

3.識別銀行卡:目前銀行卡只支持橫版儲蓄卡及信用卡,目前只能識別出銀行卡號,如果需要銀行卡名稱和過期時間需要用戶自主手動進行輸入。

應用場景:在支付綁卡環節實現銀行卡的拍照自動識別,提升數據錄入的準確性和效率。

2、同聲傳譯

微信同聲傳譯最早讓大伙感知到的是在2017年騰訊媒體+峰會”上,同聲傳譯是微信自主研發的語音技術。涵蓋了語音輸入,文本翻譯等功能的封裝,賦能給第三方小程序調用。目前開放了以下三大能力。

1.語音輸入:實時流式的語音識別,長按開始識別松手停止識別(錄音時長目前限制在60秒,超過60秒后自動停止錄音。目前支持普通話、粵語、四川話及英文)

2.文本翻譯:文本翻譯目前支持的語言有中文和英文(被翻譯的內容限制在1000個字符)

3.語音合成:語音合成目前支持的語言有中文和英文,得到的語音文件是有過期時間的(3個小時后過期),可以下載到本地使用。

應用場景:語音輸入擺脫生僻字和拼音障礙,將所輸入文字用語音的方式輸入,更加友好。

比起其它相同第三方接口優勢在于響應速度快,但有調用額度限制,如果有業務需求可以自行和微信申請,官方會合理的分配具體額度。

本文有較強的時效性,微信小程序仍在不斷的迭代開放新能力和新組件。還沒用上它們的你也可以持續關注一下。以上希望對你有幫助。

公眾號:首席吹牛官 ,產品壹佰專欄作者

0條評論 添加新討論

登錄后參與討論
Ctrl+Enter 發表