如何选择一款为uniapp量身定做的UI框架呢?(uView篇)

市场上的小程序UI框架有很多,都有哪些合适uniapp而不仅仅是针对单一的微信小程序的才是作为uni开发者最想知道的,接下来给您推荐uView(不仅仅是UI库也是一个js库)

(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网络请求

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

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

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

在和uView作者询问后获得了一些良好的建议。uView使用Hubildx进行打包之后可能某些chrome浏览器可能出现样式问题,需要刷新。所以建议您使用H5版本查看或者更换浏览器使用。

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

猜你喜欢

转载自blog.csdn.net/weixin_47821281/article/details/108279271