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

港控/mmm° 2022-12-02 00:45 312阅读 0赞

## 市场上的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官网连接，点击跳转][uView].  
[uViewH5官网连接，点击跳转(记得改为手机模式哦)][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，其引入相对繁杂。代码规范遵循微信原生开发。  
        以下是举例代码
        
            
            	"usingComponents": { 
            	  "van-tab": "@vant/weapp/tab/index",
            	  "van-tabs": "@vant/weapp/tabs/index"
            	}
            			
            	<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>
            	
            	<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网络请求
    
    1.  Api的集中管理 （这两点我的其他文章也有专门讲述，不过我极力推荐您使用我的方式，因为我使用了更加原生的底层原理）
    2.  节流和防抖（相信很多小伙伴还是靠百度）
    3.  时间格式的转化。
    4.  数组对象的处理
    5.  …等等  
        附图  
        ![uviewJs][]
    
    相信这些足够符合您的开发需要
4.  模块性。  
    针对商城购物，uView首页模块管理给您带来了很多好用的功能，（附图）  
    ![uview模块][uview]  
    相信您会很快上手使用，尤其是根据您的喜好，uview可以应对您大部分的需求，而商城有关您又可以使用`'模块'`一些常用的 `js` 更加便利您的使用，uniapp本身相对较大，使用uview 也会适量的节省您的空间资源。

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

[uView]: http://uviewui.com/
[uViewH5]: https://h5.uviewui.com/#/
[uviewJs]: /images/20221123/48227907e60340cc98ca85ff8309d82d.png
[uview]: /images/20221123/2180c1c5ef184a7f91b025f401c818c0.png