7大性感拓展组件赋能你的小程序

聊聊目前微信小程序使用度和关注度比较高的7个拓展组件及2个插件服务。

2019年微信小程序生态继续保持高速蓬勃的发展,截止2019年上八年日活达到2.5亿。微信在搜索端也开放了全量搜索,微信PC端目前也在内测电脑上直接打开小程序的服务,逐渐提升小程序的曝光量,进一步实现全面覆盖。

随着小程序生态逐渐稳定,能够清晰认知到微信小程序有哪些基础能力与拓展组件,不管在产品设计上还是运营推广上都能达到事半功倍的效果。否则你根本不知道你能设计出怎样的产品。

从微信小程序面世以来,不断有一些开源组件库出来。下面主要聊聊目前微信小程序使用度和关注度比较高的7个拓展组件及2个插件服务。微信小程序自家的WeUI框架封装出来的组件与微信原生视觉一致的组件库。一能令用户使用感知更加统一,二能让企业/开发者达到降本增效的结果。

一:7大拓展组件

Dialog弹窗组件

Dialog组件在WeUI上表现形式目前有3种:

第一种是Android和IOS上都比较常见的原生对话框形式,显示一个标题和内容以及操作按钮。

第二种是模拟Dialog,包含标题、图片和操作按钮,主要利用图片代替文字来传递信息。

第三种是半屏弹窗Dialog,显示主副标题、主副内容和操作按钮。主要辅助完成当前页面任务时;提醒用户并引导用户进行下一步操作。

可自定义属性:按钮数量(建议不超过2个)、按钮文本、蒙层、对话标题、关闭弹窗的事件、图片等等

Slideview组件

Slideview组件左滑动后显示按钮组合供用户进行操作(收藏、删除等),这种形式印象中最早主要应用在iOS平台的程序开发上。适用于内容重复性比较强的列表页面。

比如想要删除一条内容,选中所需删除的内容所在的区域,往屏幕左边滑动即可调出对应按钮组合,再点击一下即可删除成功。滑动删除属于二次确认的一种,因为需要两步交互才能操作成功,所以更适用于重复性强且误操作高的页面。

可自定义属性:是否显示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 发表