uniapp生态UI框架选择之uView(@莫成尘)
市场上的小程序UI框架有很多,都有哪些合适uniapp而不仅仅是针对单一的微信小程序的才是作为uni开发者最想知道的,接下来给您推荐uView(不仅仅是UI库也是一个js库)(uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉
·
市场上的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呢。
-
是否为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> ```
- 举例,vantweapp针对小程序而作,并不针对uniapp,其引入相对繁杂。代码规范遵循微信原生开发。
-
案例,API,是否轻松易懂,容易上手
- API 中vantweapp 相对好看易懂,其次是uView
- 不得不承认vant站的技术角度相对更加通透,但我们在开发中发现,经常性的无法让一个新手安装好vantweapp。而且在vue中使用vantweapp又很大的不习惯和更多的出错率。
-
是否符合开发需要
这里您将会看到uView另一个非常大的优势。JS 封装
。
包含了 :
1.Http网络请求- Api的集中管理 (这两点我的其他文章也有专门讲述,不过我极力推荐您使用我的方式,因为我使用了更加原生的底层原理)
- 节流和防抖(相信很多小伙伴还是靠百度)
- 时间格式的转化。
- 数组对象的处理
- …等等
附图
相信这些足够符合您的开发需要
-
模块性。
针对商城购物,uView首页模块管理给您带来了很多好用的功能,(附图)
相信您会很快上手使用,尤其是根据您的喜好,uview可以应对您大部分的需求,而商城有关您又可以使用'模块'
一些常用的js
更加便利您的使用,uniapp本身相对较大,使用uview 也会适量的节省您的空间资源。
其他有关uniapp的疑问或者此方法不理解的地方您可留言,我会尽快回复并帮您解决。
更多推荐
已为社区贡献8条内容
所有评论(0)