uniapp使用uview的简单案例

更新时间：2023年03月23日 11:50:31 作者：殇夜物语

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

uniapp插件uview下表单无法动态校验的问题解决

uniapp
uview

Vue中如何实现动态路由的示例代码
本文主要介绍了Vue中如何实现动态路由的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Vuex与Vue router的使用详细讲解
在看这篇文章的几点要求：需要你先知道Vuex与Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vuex与Vue-Router的基本使用后再回来看这篇文章
2022-11-11
Vue3项目中通过LuckySheet实现Excel在线编辑功能
在实现Excel文件导入时,领导要求实现在前端导入文件后,不调用后端的接口,而是直接显示excel文件的内容,等待用户修改完以后,再调用后端接口进行文件的提交,所以本文介绍了Vue3项目中通过LuckySheet实现Excel在线编辑,需要的朋友可以参考下
2025-04-04
vuex如何重置所有state(可定制)
在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么如何重置呢，下面就跟随小编一起来了解一下
2019-01-01
vue附件下载无法打开的问题及解决
这篇文章主要介绍了vue附件下载无法打开的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截）
本文通过实例代码给大家介绍了vue+axios 前端实现登录拦截的方法，主要通过路由拦截和http拦截，具体实例代码大家跟随小编一起通过本文学习吧
2018-10-10
vue中i18n的安装与几种使用方式详解
在一些网站经常可以看到切换语言包,将网站转化成多种语言版本的情况,下面这篇文章主要给大家介绍了关于vue中i18n的安装与几种使用方式的相关资料,需要的朋友可以参考下
2022-09-09
Vue Router去掉url中默认的锚点#
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。这篇文章主要介绍了Vue Router去掉url中默认的锚点#,需要的朋友可以参考下
2018-08-08
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
这篇文章主要介绍了VUE+Element UI实现简单的表格行内编辑效果的示例的代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue实现可改变购物数量的购物车
这篇文章主要为大家详细介绍了vue实现可改变购物数量的购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07