How to use uviewUI in uniapp - ui components suitable for uniapp

Article directory

The previous article talked about which front-end frameworks can be used by uniapp. Today I will recommend uview. Its latest version is 2.0.36. Last updated: 2023-03-27.

uView is a UI framework dedicated to the uni-app ecosystem. uni-app is a framework that uses Vue.js to develop all front-end applications. Developers write a set of codes that can be published to iOS, Android, H5, and various small programs (WeChat /Alipay/Baidu/Toutiao/QQ/DingTalk) and other platforms (quote from uni-app website). However, except for WeChat mini programs, there may be some compatibility issues with other mini program platforms, and we will continue to optimize this aspect in the future.

Steps for usage:

1. If you are using npm method

Install dependency packages first

# 安装 uView  如果是Npm的安装
$ npm install uview-ui

# 如果没有安装sass
npm i sass -D

# 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

Introduced in main.js

# 在 main.js 中引入 uView
import uView from 'uview-ui';
Vue.use(uView);

For other steps, please refer to 3. General steps.

2. If you use Hbuilder X to import

If uniapp is developed in HbuilderX

a. First open uview’s plug-in address: https://ext.dcloud.net.cn/plugin?id=1593

b. Click the download plug-in and import HbuilderX button on the right

c. After importing, select the project to be imported in the pop-up dialog box, so that a uni_modules folder will be automatically generated in the project.

For other steps, please refer to 3. General steps.

3. General steps

a. Introduce uView’s global SCSS theme file.

Introduce this file into of the projectsrc directory. uni.scss

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

b. Introduce uView basic style

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

4. Use

Used in any page under pages. For specific components, please refer to uview official website:

https://www.uviewui.com/

<template>
  <view>
    <uni-button type="primary" @click="handleClick">点击按钮</uni-button>
    <uni-dialog v-model="showDialog" title="提示" content="Hello, uView!"></uni-dialog>
  </view>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      showDialog: false
    };
  },
  methods: {
      
      
    handleClick() {
      
      
      this.showDialog = true;
    }
  }
};
</script>

Effect:

5. Can be adapted to WeChat applet

uviewIt is essentially suitable for the mobile terminal, so it can be run directly on the WeChat applet.

If you have difficulties in web front-end development, interviews, or front-end learning routes, you can add me V: imqdcnn. Free Q&A, technical experts who have been in the industry for many years will help you solve bugs.

I wish you can become an excellent WEB front-end development engineer!