uView初識

一、概述

uView UI，是uni-app生態最優秀的UI框架，全面的組件和便捷的工具會讓您信手拈來，如魚得水

來由

uni-app2018年初發布以來，一直蓬勃發展，一派欣欣向榮，社區也是人聲鼎沸，衆望所歸。

因此，uView應運而生，uView的目標是成爲uni-app生態最優秀的UI框架。

關於uView的取名來由，首字母u來自於uni-app首字母，uni-app是基於Vue.js，Vue和View(延伸爲UI、視圖之意)同音，同時view組件uni-app中 最基礎，最重要的組件，故取名uView，表達源於uni-app和Vue之意，同時在此也對它們表示感謝。

適用領域

uView是uni-app生態專用的UI框架，uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼， 可發佈到iOS、Android、H5、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺(引言自uni-app網)。

 

二、安裝

使用HBuilder X編輯器創建，類型選擇uni-app，默版選擇默認。

 

在新窗體中打開，雙擊App.vue文件，點擊左下角的終端圖標

 

輸入以下命令安裝

npm install uview-ui

效果如下：

 

三、配置

1. 引入uView主JS庫

在項目根目錄中的main.js中，引入並使用uView的JS庫，注意這兩行要放在import Vue之後。

// main.js
import uView from "uview-ui";
Vue.use(uView);

 

2. 在引入uView的全局SCSS主題文件

在項目根目錄的uni.scss中引入此文件。

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

 

3. 引入uView基礎樣式

注意！在App.vue中首行的位置引入，注意給style標籤加入lang="scss"屬性

<style lang="scss">
    /* 注意要寫在第一行，同時給style標籤加入lang="scss"屬性 */
    @import "uview-ui/index.scss";
</style>

 

4. 配置easycom組件模式

此配置需要在項目根目錄的pages.json中進行。

溫馨提示

uni-app爲了調試性能的原因，修改easycom規則不會實時生效，配置完後，您需要重啓HX或者重新編譯項目才能正常使用uView的功能。
請確保您的pages.json中只有一個easycom字段，否則請自行合併多個引入規則。

 

// pages.json
{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此爲本身已有的內容
    "pages": [
        // ......
    ]
}

 

四、測試效果

修改pages/index/index.vue，完整代碼如下：

<template>
    <view class="wrap">
        <view style="text-align: center;">
            <text class="title">登錄</text>
        </view>
        <u-form :model="form" ref="uForm">
            <u-form-item label="用戶名" label-width="100" prop="name">
                <u-input v-model="form.name" placeholder="請輸入用戶名" />
            </u-form-item>
            <u-form-item label="密 碼" label-width="100" prop="pwd">
                <u-input v-model="form.pwd" type="password" :password-icon="passwordIcon" placeholder="請輸入密碼" />
            </u-form-item>
        </u-form>
        <u-button type="success" @click="submit">提交</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                passwordIcon: true,
                form: {
                    name: '',
                    pwd: '',
                },
                rules: {
                    name: [{
                        required: true,
                        message: '請輸入用戶名',
                        // 可以單個或者同時寫兩個觸發驗證方式 
                        trigger: ['change', 'blur'],
                    }],
                    pwd: [{
                        required: true,
                        message: '請輸入密碼',
                        trigger: ['change', 'blur'],
                    }]
                }
            }
        },
        methods: {
            submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        console.log('驗證通過');
                    } else {
                        console.log('驗證失敗');
                    }
                });
            }
        },
        // 必須要在onReady生命週期，因爲onLoad生命週期組件可能尚未創建完畢
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        }
    }
</script>

<style>
    .wrap {
        padding: 40rpx;
    }

    .title {
        font-size: 40rpx;
        font-weight: 500;
    }
</style>

 

效果如下：

 

直接點擊提交，會有提示

 

關於from表單，請參考鏈接：https://www.uviewui.com/components/form.html