快捷導(dǎo)航

uniapp使用uview的簡(jiǎn)單案例

更新時(shí)間：2023年03月23日 11:50:31 作者：殤夜物語(yǔ)

uView是uni-app生態(tài)專用的UI框架,uni-app?是一個(gè)使用?Vue.js?開發(fā)所有前端應(yīng)用的框架,這篇文章主要給大家介紹了關(guān)于uniapp使用uview的簡(jiǎn)單案例,需要的朋友可以參考下

簡(jiǎn)介

uview框架已經(jīng)出到2.0了，從當(dāng)初的1.0到2.0，一路走來(lái)，在uniapp中使用框架。確實(shí)幫助自己節(jié)省許多時(shí)間，為了以后更好的應(yīng)用，記錄一下使用方法和使用心得。

安裝

1.uview的安裝方式有兩種，一種是去插件市場(chǎng)下載插件，另外一種是利用npm加載。為方便使用，直接在插件市場(chǎng)下載，鏈接https://ext.dcloud.net.cn/plugin?id=1593，使用HbuilderX導(dǎo)入插件。

2.uniapp項(xiàng)目中添加sass和sass-loader解析。

// 安裝sass
npm i sass -D

// 安裝sass-loader
npm i sass-loader -D

3.引入uView主JS庫(kù)

在項(xiàng)目根目錄中的main.js中，引入并使用uView的JS庫(kù)，注意這兩行要放在import Vue之后。

import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

注意引用之后，就要添加uView的組件，否則項(xiàng)目報(bào)錯(cuò)。

4.在項(xiàng)目根目錄的uni.scss中引入此文件。

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

5.引入uview基本樣式。在App.vue中引入

<style lang="scss">
	/* 注意要寫在第一行，同時(shí)給style標(biāo)簽加入lang="scss"屬性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

6.配置easycom組件模式，在page.json文件中配置

// pages.json
{
	// 如果您是通過(guò)uni_modules形式引入uView，可以忽略此配置
	"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此為本身已有的內(nèi)容
	"pages": [
		// ......
	]
}

到這里就配置完了，在項(xiàng)目中正常引用組件即可。

案例

<template>
    <view class="u-page">
        <view class="u-demo-block">
            <text class="u-demo-block__title">基礎(chǔ)使用</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>

運(yùn)行效果：

這是uview的布局示例，基礎(chǔ)使用下是uview的組件，這里展示的是uveiw的布局。u-row和u-col，使用過(guò)bootstrap或者elementUI框架的小伙伴對(duì)此比較熟悉。應(yīng)用起來(lái)也是比較方便。

上一篇介紹了colorUI框架的應(yīng)用，對(duì)比colorUI的布局，uveiw這里會(huì)更加清晰。很清楚知道一行u-row被均分成了12份u-col，然后再定義每個(gè)小盒子占多少份（u-col中的span屬性），很容易實(shí)現(xiàn)許多效果。與colorUI不同的是，這里使用的是u-row和u-col組件，而colorUI中使用的是uniapp的原生標(biāo)簽view。在迅速開發(fā)時(shí)使用uview會(huì)減輕許多繁瑣的工作。但是面臨精細(xì)化開發(fā)時(shí)，由于colorUI只是一個(gè)css框架，更接近原生應(yīng)用，所以會(huì)有優(yōu)勢(shì)。這兩種框架無(wú)好壞之分，看具體場(chǎng)景的應(yīng)用情況。正像uniapp和android與IOS語(yǔ)言一樣。