ui uview 安卓开发_uni-app UI框架之uview-ui使用教程

image

uviewUI

多平台快速开发的UI框架

uni-app2018年初发布以来，一直蓬勃发展，一派欣欣向荣，社区也是人声鼎沸，众望所归。

因此，uView应运而生，uView的目标是成为uni-app生态最优秀的UI框架。

接下来将介绍uview如何配置到uniapp项目中

如果你想了解到更详细的文档，进入uview官网查看

接下来将为你带来几种方式的图文教程

使用安装包(这里就不讲解npm方式安装了)

首先要去官网下载最新的包下载地址

image

官网提供了三种包

第一种方式只有uview源码，这是uview的核心。

第二种方式类似于一个uview项目的脚手架，这是个空项目，但它已经帮我们配置好uview了，所以如果你是一个新的uniapp项目，可以选择下载这个。

方式三是整个uView演示项目，里面有uView核心，组件演示，模板等。此项目运行用于查看UI演示效果，复制模板案例，通过里面的示例，可以快速掌握某一个组件的用法。(可以下载一个，体验uview项目的所有组件与模版)

因为我们是教大家怎么配置一个uview，所以我们下载第一个包。

接下来我们使用HBuilderX创建一个uniapp的项目

image

创建完成之后，我们将刚刚下载的包，直接复制到项目的根目录下。

image

因为uview的使用的是scss，所以我们需要使用HBuilderX安装scss的插件。

点击工具，插件安装，找到 scss/sass编译点击右方的安装

image

对HBuilderX的配置就结束了，接下来要对项目进行设置。(分为4步)

一、引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js

import uView from "uview-ui";

Vue.use(uView);

image

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

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

/* uni.scss */

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

image

三、引入uView基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */

@import "uview-ui/index.scss";

image

四、配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。

// pages.json

{

"easycom": {

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

// 此为本身已有的内容

"pages": [

// ......

]

}

image

到此处，我们已经将uview配置好了，接下来写个示例验证一下

使用表格组件来演示一下

image

没有任何问题，至此，我们已经成功配置完uview啦！

ui uview 安卓开发_uni-app UI框架之uview-ui使用教程相关推荐

【安卓开发系列 -- APP 开源框架】IO 框架 OKIO
[安卓开发系列 -- APP 开源框架]IO 框架 OKIO [1]OKIO的整体框架 [1.1]OKIO的整体框架图示 [1.2]OKIO的优势 CPU和内存消耗低,OKIO采用了segment机制 ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
【安卓开发系列 -- APP】APP 开发基础技术整理
[安卓开发系列 -- APP]APP 开发基础技术整理 [1]Android Studio APP 项目目录布局 [2]活动的生命周期活动的状态 : 1. 运行状态,一个活动位于返回栈栈顶时,活动 ...
【安卓开发系列 -- APP 】APP 性能优化 -- 崩溃分析
[安卓开发系列 -- APP ]APP 性能优化 -- 崩溃分析 [1]Native Crash 分析示例 [1.1]Linux 编译 breadpad 下载 breadpad 源码 git clon ...
android不能在主线程,安卓开发：主线程真的不能做UI操作吗？这一点很多程序员都没想到...
只要参与过安卓项目开发一两年的朋友们应该清楚,为了避免UI渲染出现异常安卓框架限制UI操作只能在主线程中进行,如果贸然在子线程做了UI操作结果会怎样?我们随便写下了如下测试代码. 不出意外的话,代码执 ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（一）（敲详细）
从接触安卓开发的第一天起,我想我已经爱上了开发,哈哈哈,愿你我坚持下去的理由都是热爱,共勉!这几天没有更新博客,是因为我学习去了(没有相见的日子,我在努力哈哈哈).有想过用模拟器来运行的,但是模拟器太 ...
安卓开发（APP）之智能家电案例教程
智能家电工具介绍与客户端开发: 此文章教程内容: 用安卓手机的APP客户端控制智能家电实现的小案例本文章所需工具在文章末尾,请君自取,所用工具Android studio. 家居模拟器程序介绍本程 ...
安卓本地轻量级数据库操作框架 greenDao3.2.2 详细教程附带Demo①——集成环境，开辟难题。
欢迎安卓本地轻量级数据库操作框架 greenDao3.2.2 学习之旅. 本套框架博客系列博客目录: 第一篇:认识 greenDao3.2.2 框架,集成环境,开辟难题. 第二篇:简单的进行增.删. ...
连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）
这篇发得有点晚了,实属罪过! 以前高中月考的时候有幸进了一个学霸班坐了一个学霸的座位(应该是一位女学霸,桌子上面写着:如果不是因为生气而将事情变得更加严重,那么事情也不是那么的大了) 希望自己可以心情 ...

ui uview 安卓开发_uni-app UI框架之uview-ui使用教程

ui uview 安卓开发_uni-app UI框架之uview-ui使用教程相关推荐

最新文章

热门文章