uniapp使用uview的简单案例
简介
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中也有很多有趣的组件应用，还有许多巧妙使用组件的场景，以后再说吧。
附：uniapp使用uview报错没找到该组件或者要求你检查easycom规范
这都是pagej.soneasycom的错误：
使用Uview-ui组件时，如果是npm安装 需要在page.json中修改easycom配置，
如果是下载安装，则需要有@/ 如果是npm安装 则去掉@/，使用cnpm则无法使用 重新使用npm或者 下载安装
注意：改正后一定重启HBx！！！
总结
到此这篇关于uniapp使用uview的文章就介绍到这了,更多相关uniapp使用uview内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在日常开发中,经常遇到需要支持列表循环滚动展示,特别是在数据化大屏开发中,所以小编今天为大家介绍一下如何利用vue3实现一个无缝滚动组件吧2023-09-09
vue3.0找不到模块“./App.vue”或其相应的类型声明(多种情况分析)
这篇文章主要介绍了vue3.0找不到模块“./App.vue”或其相应的类型声明,报错原因是typescript 只能理解 .ts 文件，无法理解 .vue文件，本文通过多种情况分析给大家详细讲解，需要的朋友可以参考下2023-01-01
在前端 Vue 项目打包后，如果需要访问另一个域名下的接口，由于浏览器的同源策略限制，会出现跨域问题，本文就介绍一下vue项目打包部署跨域的实现步骤，感兴趣的可以了解一下2023-05-05
这篇文章主要为大家详细介绍了Vue使用vue-drag-resize生成悬浮拖拽小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue 实现 rem 布局的 或者 vw 布局的方法，本文给提供多种方法,需要的朋友可以参考下2019-11-11
ElementUI是一个强大的PC端UI组件框架，它不依赖于vue，但是却是当前和vue配合做项目开发的一个比较好的ui框架，本文主要介绍了如何在vue3中引入使用ElementUI，需要的可以参考一下2023-06-06
vue中的事件修饰符once,prevent,stop,capture,self,passive
这篇文章主要介绍了vue中的事件修饰符once,prevent,stop,capture,self,passive，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Antd的table组件表格的序号自增操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这段时间一直在弄vue，当然也遇到很多问题，这里就来跟大家分享一些注册自定义模板组件的心得 ,需要的朋友可以参考下2019-04-04
本文通过实例代码给大家介绍了Vue 实现登录界面 验证码功能，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
最新评论