uni-app常用拓展组件推荐

        小程序在用户规模及商业化方面都取得了极大的成功。截至2021年12月，微信小程序日活超过4.5亿，支付宝、百度、头条小程序的月活也都超过了3亿。
对应小程序开发领域，开发框架从单纯的微信小程序开发过渡到多端框架成为标配，进一步提升开发效率成为开发者的强烈需求。
        DCloud公司作为小程序的开创者和先行者，推出了uni-app开源框架，为开发者抹平了各平台的差异，实现了编写一套代码，可以发布到iOS、Android、Web(响应式)，以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。uni-app凭借强大的跨平台能力，当仁不让地成为跨端开发的首选框架。
        uni-app是当前主流的开发框架，uni-app手机端月活达到12亿，有数千款插件、70多个微信或QQ技术交流群，阿里小程序官方工具内置了uni-app，腾讯课堂官方为uni-app录制了培训课程。uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等方面拥有极大的优势。

        uni-app官网自带的各式各样的拓展组件也是各大用户选择uni-app的原因之一，以下为uni-app官方文档里对uni-ui的介绍：

uni-ui产品特点

1.高性能

        目前为止，在小程序和混合app领域，uni-ui是性能的标杆。

• 自动差量更新数据

        虽然uni-app支持小程序自定义组件，所有小程序的ui库都可以用。但小程序自定义组件的ui库都需要使用setData手动更新数据，在大数据量时、或高频更新数据时，很容易产生性能问题。

        而uni-ui属于vue组件，uni-app引擎底层自动diff更新数据。当然其实插件市场里众多vue组件都具备这个特点。

• 优化逻辑层和视图层通讯折损

        非H5，不管是小程序还是App，不管是app的webview渲染还是原生渲染，全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。 比如在视图层拖动一个可跟手的组件，由于通讯的损耗，用js监听很难做到实时跟手。

        这时就需要使用css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都比较复杂，所以uni-ui里做了封装，在需要跟手式操作的ui组件，比如swiperaction列表项左滑菜单，就在底层使用了这些技术，实现了高性能的交互体验

• 背景停止

        很多ui组件是会一直动的，比如轮播图、跑马灯。即便这个窗体被新窗体挡住，它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上，背景操作ui会引发很严重的性能问题，造成前台界面明显卡顿。

        而uni-ui的组件，会自动判断自己的显示状态，在组件不再可见时，不会再消耗硬件资源。

2.全端

        uni-ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。

        比如导航栏navbar组件，会自动处理不同端的状态栏； 比如swiperaction组件，在app和微信小程序上会使用交互体验更好的wxs技术，但在不支持wxs的其他小程序端会使用js模拟类似效果。

        uni-ui还支持nvue原生渲染。

uni-ui还支持pc等宽屏设备，可以通过PC浏览器访问https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge体验

3.风格扩展

        uni-ui的默认风格是中型的，与uni-app基础组件风格一致。但它支持uni.scss，可以方便的扩展和切换应用的风格。

        UI 是一种需求非常发散的产品，DCloud官方也无意用uni-ui压制第三方 UI 插件的空间，但官方有义务在性能和跨端方面提供一个开源的标杆给大家。

        我们欢迎更多优秀的 UI 组件出现，也欢迎更多人贡献uni-ui的主题风格，满足更多用户的需求。

4.与uniCloud协作

        uni-ui里很多组件与uniCloud打通，可大幅提升开发效率

5.与uni统计自动集成实现免打点

        uni统计是优秀的多端统计平台，见 tongji.dcloud.net.cn。

        除了一张报表看全端，它的另一个重要特点是免打点，也成为无侵入式埋点。

        比如使用uni-ui的navbar标题栏、收藏、购物车等组件，均可实现自动打点，统计页面标题等各种行为数据。

        当然你也可以关闭uni统计，这不是强制的。

6.uni-ui符合全套DCloud组件规范

        包括 easycom、uni_module、datacom，全部遵循。

        所以，我在这篇文章里向大家分享并推荐一个我认为比较好用、常用的uni-ui：

                                uni-easyinput 增强输入框

1.基本用法

输入内容后，输入框尾部会显示清除按钮，点击可清除内容，如不需要展示图标，clearable 属性设置为 false 即可

clearable 属性设置为 true ，输入框聚焦且内容不为空时，才会显示内容

<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>

​

2.输入框带左右图标

设置 prefixIcon 属性来显示输入框的头部图标

设置 suffixIcon 属性来显示输入框的尾部图标

注意图标当前只支持 uni-icons 内置的图标，当配置 suffixIcon 属性后，会覆盖 :clearable="true" 和 type="password" 时的原有图标

绑定 @iconClick 事件可以触发图标的点击 ，返回 prefix 表示点击左侧图标，返回 suffix 表示点击右侧图标

<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>
<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search"  v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>

​

3.插槽

设置 right 属性来设置右侧内容 插槽。

<uni-easyinput>
	<template #right>
		<view>密码</view>
	</template>
</uni-easyinput>

​

4.输入框禁用

设置 disable 属性可以禁用输入框，此时输入框不可编辑

<uni-easyinput disabled  v-model="value" placeholder="请输入内容"></uni-easyinput>

​

5.密码框

设置 type="password" 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态

<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>

​

6.输入框聚焦

设置 focus 属性可以使输入框聚焦

如果页面存在多个设置 focus 属性的输入框，只有最后一个输入框的 focus 属性会生效

<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>

7.多行文本

设置 type="textarea" 时可输入多行文本

<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>

​

8.多行文本自动高度

设置 type="textarea" 时且设置 autoHeight 属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度

<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>

​

9.取消边框

设置 :inputBorder="false" 时可取消输入框的边框显示，同时搭配 uni-forms 的 :border="true" 有较好的效果

<uni-forms border>
	<uni-forms-item label="姓名">
		<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
	</uni-forms-item>
	<uni-forms-item label="年龄">
		<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
	</uni-forms-item>
</uni-forms>

具体内容可在uni-app官方文档中查询：

uni-easyinput 增强输入框 | uni-app官网 (dcloud.net.cn)