简介
uview框架已经出到2.0了,从当初的1.0到2.0,一路走来,在uniapp中使用框架。确实帮助自己节省许多时间,为了以后更好的应用,记录一下使用方法和使用心得。
安装
1.uview的安装方式有两种,一种是去插件市场下载插件,另外一种是利用npm加载。为方便使用,直接在插件市场下载,链接https://ext.dcloud.net.cn/plugin?id=1593,使用HbuilderX导入插件。
2.uniapp项目中添加sass和sass-loader解析。
// 安装sass
npm i sass -D
// 安装sass-loader
npm i sass-loader -D
3.引入uView主JS库
在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
注意引用之后,就要添加uView的组件,否则项目报错。
4.在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
5.引入uview基本样式。在App.vue中引入
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
</style>
6.配置easycom组件模式,在page.json文件中配置
// pages.json
{
// 如果您是通过uni_modules形式引入uView,可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
到这里就配置完了,在项目中正常引用组件即可。
案例
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础使用</text>
<view class="u-demo-block__content">
<u-row customStyle="margin-bottom: 10px">
<u-col span="6">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="6">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
<u-row customStyle="margin-bottom: 10px">
<u-col span="4">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple-dark"></view>
</u-col>
</u-row>
<u-row justify="space-between">
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
</u-row>
</view>
</view>
</view>
</template>
<style lang="scss">
.wrap {
padding: 12px;
}
.demo-layout {
height: 25px;
border-radius: 4px;
}
.bg-purple {
background: #CED7E1;
}
.bg-purple-light {
background: #e5e9f2;
}
.bg-purple-dark {
background: #99a9bf;
}
</style>
运行效果:
这是uview的布局示例,基础使用 下是uview的组件,这里展示的是uveiw的布局。u-row和u-col,使用过bootstrap或者elementUI框架的小伙伴对此比较熟悉。应用起来也是比较方便。
上一篇介绍了colorUI框架的应用,对比colorUI的布局,uveiw这里会更加清晰。很清楚知道一行u-row被均分成了12份u-col,然后再定义每个小盒子占多少份(u-col中的span属性),很容易实现许多效果。与colorUI不同的是,这里使用的是u-row和u-col组件,而colorUI中使用的是uniapp的原生标签view。在迅速开发时使用uview会减轻许多繁琐的工作。但是面临精细化开发时,由于colorUI只是一个css框架,更接近原生应用,所以会有优势。这两种框架无好坏之分,看具体场景的应用情况。正像uniapp和android与IOS语言一样。
在uview中也有很多有趣的组件应用,还有许多巧妙使用组件的场景,以后再说吧。