如何在uniapp中使用uviewUI-适合uniapp的ui组件

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。本文章介绍了如何使用uview来开发移动端页面。

使用 uviewUI

目前有断更风险。最新版为2.0.36。最近一次更新日期:2023-03-27。

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序,其它小程序平台的兼容可能存在一些问题。

基本使用步骤:

1、如果使用的是npm方式

先安装依赖包

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

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

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

在main.js中引入

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

其他步骤请参考3、通用步骤

2、如果是用Hbuilder X导入

如果uniapp是在HbuilderX中开发

a、先打开uview的插件地址:https://ext.dcloud.net.cn/plugin?id=1593

b、点击右侧下载插件并导入HbuilderX按钮

点击右侧下载插件按钮

c、导入后,在弹出的对话框中选择要导入的项目,这样就会在该项目中自动生成一个uni_modules文件夹。

导入后会生成一个文件夹

其他步骤请参考3、通用步骤。

3、通用步骤

a、在引入uView的全局SCSS主题文件。

在项目src目录的uni.scss中引入此文件。

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

b、引入uView基础样式

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

4、使用

在pages下的任一页面中使用,具体组件请参考uview官网:

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>

效果:

在移动端的效果

5、可以适配微信小程序

uview本质上适合移动端,所以它是可以直接运行在微信小程序端的。

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 535
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top