Usage of the uView UI framework

Author：Chuan Chen 阅读数：1466人阅读分类： uni-app

Introduction to uView UI Framework

uView UI is a multi-platform UI component library based on uni-app, designed specifically for rapid development of cross-platform applications. It provides a rich set of components and tools that can significantly improve development efficiency while maintaining a consistent visual style. uView UI supports multiple platforms such as H5, mini-programs, and apps, and is deeply integrated with uni-app, allowing developers to easily build high-quality cross-platform applications.

Installation and Configuration

Installation via npm

Execute the following command in the project root directory to install uView UI:

npm install uview-ui

Importing uView UI

Import and register uView UI in the main.js file:

import uView from 'uview-ui';
Vue.use(uView);

Configuring SCSS

Import uView's theme styles in the uni.scss file:

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

Configuring easycom

Configure easycom in pages.json to enable automatic component importing:

{
  "easycom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  }
}

Basic Component Usage

Button Component

uView provides button components in various styles:

<template>
  <view>
    <u-button type="primary">Primary Button</u-button>
    <u-button type="success">Success Button</u-button>
    <u-button type="error">Error Button</u-button>
    <u-button type="warning">Warning Button</u-button>
    <u-button type="info">Info Button</u-button>
  </view>
</template>

Buttons support multiple property configurations:

<u-button 
  type="primary" 
  size="mini" 
  shape="circle" 
  :disabled="true"
  icon="heart-fill"
>
  Small Rounded Button with Icon
</u-button>

Form Components

uView provides a complete form solution:

<template>
  <u-form :model="form" ref="uForm">
    <u-form-item label="Username" prop="username">
      <u-input v-model="form.username" />
    </u-form-item>
    <u-form-item label="Password" prop="password">
      <u-input v-model="form.password" type="password" />
    </u-form-item>
    <u-form-item label="Gender" prop="gender">
      <u-radio-group v-model="form.gender">
        <u-radio name="male">Male</u-radio>
        <u-radio name="female">Female</u-radio>
      </u-radio-group>
    </u-form-item>
    <u-button @click="submit">Submit</u-button>
  </u-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        gender: 'male'
      },
      rules: {
        username: [
          { required: true, message: 'Please enter username', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'Please enter password', trigger: 'blur' },
          { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          console.log('Validation passed', this.form)
        } else {
          console.log('Validation failed')
        }
      })
    }
  }
}
</script>

Layout System

Flex Layout

uView provides a powerful Flex layout component:

<template>
  <u-row gutter="16">
    <u-col span="6">
      <view class="demo">1</view>
    </u-col>
    <u-col span="6">
      <view class="demo">2</view>
    </u-col>
    <u-col span="6">
      <view class="demo">3</view>
    </u-col>
    <u-col span="6">
      <view class="demo">4</view>
    </u-col>
  </u-row>
</template>

<style>
.demo {
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
</style>

Grid Layout

Grid layout is commonly used for displaying functional entries:

<template>
  <u-grid :col="4">
    <u-grid-item 
      v-for="(item, index) in list" 
      :key="index"
      @click="clickItem(item)"
    >
      <u-icon :name="item.icon" :size="30"></u-icon>
      <text class="grid-text">{{item.title}}</text>
    </u-grid-item>
  </u-grid>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { icon: 'home', title: 'Home' },
        { icon: 'photo', title: 'Album' },
        { icon: 'heart', title: 'Favorites' },
        { icon: 'setting', title: 'Settings' }
      ]
    }
  },
  methods: {
    clickItem(item) {
      console.log(item.title)
    }
  }
}
</script>

<style>
.grid-text {
  font-size: 14px;
  margin-top: 5px;
  color: #909399;
}
</style>

Advanced Component Applications

Pull-to-Refresh and Load More

uView provides easy-to-use list scrolling components:

<template>
  <u-list
    @scrolltolower="loadMore"
    :pre-load-screen="2"
  >
    <u-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.title"
    ></u-cell>
    <u-loadmore 
      :status="status" 
      :load-text="loadText"
    />
  </u-list>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      status: 'loadmore',
      loadText: {
        loadmore: 'Pull up to load more',
        loading: 'Loading...',
        nomore: 'No more data'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.status = 'loading'
      // Simulate async request
      setTimeout(() => {
        const newList = Array(10).fill().map((_, i) => ({
          title: `Item ${(this.page - 1) * 10 + i + 1}`
        }))
        this.list = [...this.list, ...newList]
        this.status = this.page >= 3 ? 'nomore' : 'loadmore'
      }, 1000)
    },
    loadMore() {
      if (this.status !== 'nomore') {
        this.page++
        this.getList()
      }
    }
  }
}
</script>

Modal Dialogs

uView provides various modal dialog components:

<template>
  <view>
    <u-button @click="showModal">Show Modal</u-button>
    <u-modal 
      v-model="show" 
      :title="title" 
      :content="content"
      :show-cancel-button="true"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      title: 'Prompt',
      content: 'This is a modal dialog'
    }
  },
  methods: {
    showModal() {
      this.show = true
    },
    confirm() {
      console.log('Clicked confirm')
      this.show = false
    },
    cancel() {
      console.log('Clicked cancel')
      this.show = false
    }
  }
}
</script>

Theme Customization

uView supports theme customization via SCSS variables:

Create a theme.scss file:

// Primary color
$u-primary: #3c9cff;
$u-primary-dark: #398ade;
$u-primary-disabled: #9acafc;
$u-primary-light: #ecf5ff;

// Error color
$u-error: #fa3534;
$u-error-dark: #dd6161;
$u-error-disabled: #fab6b6;
$u-error-light: #fef0f0;

// Warning color
$u-warning: #ff9900;
$u-warning-dark: #f29100;
$u-warning-disabled: #fcbd71;
$u-warning-light: #fdf6ec;

// Success color
$u-success: #19be6b;
$u-success-dark: #18b566;
$u-success-disabled: #71d5a1;
$u-success-light: #dbf1e1;

// Info color
$u-info: #909399;
$u-info-dark: #82848a;
$u-info-disabled: #c8c9cc;
$u-info-light: #f4f4f5;

// Border color
$u-border-color: #e4e7ed;

// Import uView base styles
@import 'uview-ui/theme.scss';

Import the custom theme in uni.scss:

@import 'theme.scss';

Utility Functions

uView provides a rich set of utility functions:

Deep Clone

import { deepClone } from 'uview-ui/libs/util'

const obj = { a: 1, b: { c: 2 } }
const clonedObj = deepClone(obj)
console.log(clonedObj) // { a: 1, b: { c: 2 } }

Date Formatting

import { timeFormat } from 'uview-ui/libs/util'

const timestamp = 1625097600000
console.log(timeFormat(timestamp, 'yyyy-mm-dd hh:MM:ss')) // 2021-06-30 00:00:00

Debounce and Throttle

import { debounce, throttle } from 'uview-ui/libs/util'

// Debounce
const debounceFn = debounce(() => {
  console.log('Debounce function executed')
}, 500)

// Throttle
const throttleFn = throttle(() => {
  console.log('Throttle function executed')
}, 500)

// Usage in events
<u-button @click="debounceFn">Debounce Button</u-button>
<u-button @click="throttleFn">Throttle Button</u-button>

Common Issue Resolution

Icon Display Issues

If icons are not displaying, check the following configurations:

Ensure icon styles are imported in App.vue:

<style>
/* Import uView icon styles */
@import "uview-ui/index.scss";
</style>

Ensure the icon name is correct:

<u-icon name="home"></u-icon>

Style Override Issues

To override uView default styles, use deep selectors:

::v-deep .u-button {
  border-radius: 20px !important;
}

Multilingual Support

uView supports multilingual configuration:

// main.js
import uView from 'uview-ui'
import en from 'uview-ui/libs/locale/lang/en'
import zh from 'uview-ui/libs/locale/lang/zh-Hans'

Vue.use(uView, {
  // Configure language
  locale: 'zh-Hans',
  // Configure language packs
  messages: {
    'en': en,
    'zh-Hans': zh
  }
})

Performance Optimization Recommendations

Import components on demand:

// Import Button component on demand
import uButton from 'uview-ui/components/u-button/u-button.vue'

export default {
  components: {
    uButton
  }
}

Use virtual lists for long lists:

<template>
  <u-list-virtual :list="longList" :item-height="80">
    <template v-slot="{ item }">
      <view class="list-item">{{ item.name }}</view>
    </template>
  </u-list-virtual>
</template>

<script>
export default {
  data() {
    return {
      longList: Array(1000).fill().map((_, i) => ({ id: i, name: `Item ${i}` }))
    }
  }
}
</script>

<style>
.list-item {
  height: 80px;
  line-height: 80px;
  padding-left: 30px;
  border-bottom: 1px solid #eee;
}
</style>

Avoid unnecessary component updates:

<template>
  <u-cell-group>
    <u-cell 
      v-for="item in list" 
      :key="item.id"
      :title="item.title"
      :value="item.value"
      :update-title="false"
      :update-value="false"
    />
  </u-cell-group>
</template>

Comparison with Other UI Libraries

Compared to other uni-app UI libraries, uView UI has the following characteristics:

Component richness: uView provides over 80 components covering most application scenarios
Performance optimization: uView is deeply optimized for uni-app with excellent performance
Theme customization: Easily customize themes via SCSS variables
Comprehensive documentation: Detailed official documentation with rich examples
Active community: High GitHub star count with timely issue responses

Real-World Project Examples

E-commerce App Homepage

<template>
  <view>
    <!-- Search bar -->
    <u-search placeholder="Search products" v-model="keyword" @search="doSearch"></u-search>
    
    <!-- Swiper -->
    <u-swiper :list="bannerList" height="300"></u-swiper>
    
    <!-- Category entries -->
    <u-grid :col="5" :border="false">
      <u-grid-item 
        v-for="(item, index) in categoryList" 
        :key="index"
      >
        <u-icon :name="item.icon" :size="30"></u-icon>
        <text class="grid-text">{{item.name}}</text>
      </u-grid-item>
    </u-grid>
    
    <!-- Product list -->
    <u-waterfall v-model="goodsList">
      <template v-slot:left="{ leftList }">
        <view 
          v-for="(item, index) in leftList" 
          :key="index"
          class="goods-item"
        >
          <u-image :src="item.image" width="100%" height="300rpx"></u-image>
          <view class="goods-title">{{item.title}}</view>
          <view class="goods-price">¥{{item.price}}</view>
        </view>
      </template>
      <template v-slot:right="{ rightList }">
        <view 
          v-for="(item, index) in rightList" 
          :key="index"
          class="goods-item"
        >
          <u-image :src="item.image" width="100%" height="300rpx"></u-image>
          <view class="goods-title">{{item.title}}</view>
          <view class="goods-price">¥{{item.price}}</view>
        </view>
      </template>
    </u-waterfall>
    
    <!-- Back to top -->
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      scrollTop: 0,
      bannerList: [
        { image: '/static/banner1.jpg' },
        { image: '/static/banner2.jpg' },
        { image: '/static/banner3.jpg' }
      ],
      categoryList: [
        { name: 'Phones', icon: 'phone' },
        { name: 'Computers', icon: 'laptop' },
        { name: 'Appliances', icon: 'home' },
        { name: 'Food', icon: 'shopping-cart' },
        { name: 'More', icon: 'more-dot-fill' }
      ],
      goodsList: []
    }
  },
  onLoad() {
    this.loadGoods()
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  methods: {
    doSearch() {
      console.log('Search:', this.keyword)
    },
    loadGoods() {
      // Simulate async product data loading
      setTimeout(() => {
        const newGoods = Array(10).fill().map((_, i) => ({
          id: i,
          title: `Product ${i + 1}`,
          price: (Math.random() * 1000).toFixed(2),
          image: `/static/goods${i % 5 + 1}.jpg`
        }))
        this.goodsList = [...this.goodsList, ...newGoods]
      }, 1000)
    }
  }
}
</script>

<style>
.goods-item {
  margin: 10rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 10rpx;
}
.goods-title {
  font-size: 28rpx;
  margin: 10rpx 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods-price {
  color: #f56c6c;
  font-size: 32rpx;
  font-weight: bold;
}
</style>

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：uni-ui 官方组件库介绍

下一篇：ColorUI 的集成与定制