uniapp生态UI框架选择之uView（@莫成尘）

市场上的uni-ui框架有很多，都有哪些合适uniapp而不仅仅是针对单一的微信小程序的才是作为uni开发者最想知道的，接下来给您推荐uView（不仅仅是UI库也是一个js库）目前开发中的2.0版本多端支持并全面兼容nvue.

郑重承诺：uView永远都不会出所谓的pro，plus版本，也永不收费

（uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。）

uView官网连接，点击跳转.
uViewH5官网连接，点击跳转(记得改为手机模式哦).

安装教程最后一步完成时需要重新编译程序才会生效（内容不多，请耐心读完）

// npm 下载 uview-ui
npm install uview-ui
// 更新
npm update uview-ui
// 查看当前版本
console.log(this.$u.config.v);
//配置 步骤 共计四步  都非常容易上手
//第一步 在main.js中 复制以下两行
import uView from "uview-ui";
Vue.use(uView);
//第二步 在uni.scss中 复制以下代码
@import 'uview-ui/theme.scss';
//第三步 在App.vue 中 复制以下代码放在第一行，并加入lang='scss'属性
<style lang="scss">
	/* App.vue */
	@import "uview-ui/index.scss";
</style>
//第四步 也是最后一步 在pages.json中插入
// pages.json   和pages 平级  
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
// 此为本身已有的内容
	"pages": [
		// ......
	]
}

那么，为什么推荐uview，而不是如colorUI,vantweapp甚或者是uni-ui呢。

1. 是否为uniapp量身定做

   • 举例，vantweapp针对小程序而作，并不针对uniapp，其引入相对繁杂。代码规范遵循微信原生开发。
     以下是举例代码

     	<!--  使用vantweapp
     	 如您想引入tab切换 需要这样引入组件  -->
     	"usingComponents": {
     	  "van-tab": "@vant/weapp/tab/index",
     	  "van-tabs": "@vant/weapp/tabs/index"
     	}
     	<!--  事件的绑定并不是vue中的@change   同时数据的绑定也不是 ：active='active'-->		
     	<van-tabs active="{{ active }}" bind:change="onChange">
     	  <van-tab title="标签 1">内容 1</van-tab>
     	  <van-tab title="标签 2">内容 2</van-tab>
     	  <van-tab title="标签 3">内容 3</van-tab>
     	  <van-tab title="标签 4">内容 4</van-tab>
     	</van-tabs>
     	<!-- 使用uview则不同  您只需要 在完成下载和配置之后这样使用即可
     	其配置完成就会将uview 视为一个自身的组件来进行使用 相当于一个子组件 -->
     	<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
     	```
     
     

2. 案例，API，是否轻松易懂，容易上手

   • API 中vantweapp 相对好看易懂，其次是uView
   • 不得不承认vant站的技术角度相对更加通透，但我们在开发中发现，经常性的无法让一个新手安装好vantweapp。而且在vue中使用vantweapp又很大的不习惯和更多的出错率。

3. 是否符合开发需要
   这里您将会看到uView另一个非常大的优势。 JS 封装 。
   包含了 ：
   1.Http网络请求

   2. Api的集中管理 （这两点我的其他文章也有专门讲述，不过我极力推荐您使用我的方式，因为我使用了更加原生的底层原理）
   3. 节流和防抖（相信很多小伙伴还是靠百度）
   4. 时间格式的转化。
   5. 数组对象的处理
   6. …等等
      附图
      

   相信这些足够符合您的开发需要

4. 模块性。
   针对商城购物，uView首页模块管理给您带来了很多好用的功能，（附图）
   
   相信您会很快上手使用，尤其是根据您的喜好，uview可以应对您大部分的需求，而商城有关您又可以使用'模块'一些常用的 js 更加便利您的使用，uniapp本身相对较大，使用uview 也会适量的节省您的空间资源。

其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。