1、简介

1.1 概述

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台

1.2为什么使用Uni-App

1.3 Uni-App功能

开发功能,参考,借鉴 插件市场:https://ext.dcloud.net.cn/

2、快速上手

1、安装HbuildX 开发工具

2、创建项目

3、命名

选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

4、运行项目

目前只支持谷歌浏览器运行uni-app项目 也可以在真机、模拟器

运行成功,自动打开浏览器

http://10.8.165.87:8080/h5/

3、详细教程

3.1 项目结构

pages:页面我们app的页面都在这个文件夹中

内部都是文件夹 名称 就是页面名称

文件夹内部就是页面名称 以.vue 基于Vue开发

static:静态资源

图片、音频、视频等

App.vue 应用配置,用来配置App全局样式以及监听

main.js Vue初始化入口文件

manifest.json 配置应用名称、appid、logo、版本等打包信息

pages.json

Vue初始化入口文件 ├─App.vue 应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见 └─pages.json 配置页面路由、导航条、选项卡等页面类信息

https://element.eleme.cn/#/zh-CN 饿了么UI 基于Vue2.0开发的VUE组件

3.2 详细教程

3.2.1 页面跳转 路由

uni-app路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式,不支持 Vue Router

uni-app 有两种路由跳转方式:使用navigator组件跳转、调用API跳转

3.2.2 页面尺寸

uni-app支持的通用css单位包括px、upx、vh。

px 即屏幕像素

upx 是uni-app提供的一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大。

vh 是视窗高度的百分比

3.2.3 样式

目前支持的选择器有:

样式导入的方式:

1、外部css文件

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

2、内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。

class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

3.2.4 组件 控件 标签

Uni-Java_Java全栈必备之Uni-App相关推荐

  1. 全栈必备的技术栈设想

    喔家ArchiSelf 参加今年的SDCC确实挺高兴的,向大师Joe Armstrong 当面求教,与周爱民老师同台,在我们的架构师进阶之路专场有4个七零后的老码农,瞬间没有了孤独感,甚至有一点窃窃之 ...

  2. 全栈必备 :C语言基础

    [引子]温故而知新,"三日不弹,手生荆棘",代码也是如此.另一方面,自己挖的坑要自己填.在<全栈的技术栈设想>中埋下了4种编程语言的伏笔,已经兑现了Javacript, ...

  3. 全栈必备 Log日志

    Log日志,不论对开发者自身,还是对软件系统乃至产品服务都是非常重要的事情.每个开发者都接触过日志,以至于每个人对日志的了解都会有所不同. 什么是日志 日志是什么呢?老码农看来,日志是带有明确时间标记 ...

  4. 牛!Python 全栈必备的 150 个实战案例,一次性获得!

    Python 全栈将是你升职加薪的硬通货. 我见过很多的 Python 讲解教程和书籍,它们大都这样讲 Python 的: 先从 Python 的发展历史开始,介绍 Python 的基本语法规则,Py ...

  5. 全栈必备Linux 基础

    Linux 几乎无处不在,不论是服务器构建,还是客户端开发,操作系统的基础技能对全栈来说都是必备的. 系统的选择 Linux发行版本可以大体分为两类,一类是商业公司维护的发行版本,一类是社区组织维护的 ...

  6. 全栈必备 JavaScript基础

    JavaScript 来了 喔家ArchiSelf 1995年,诞生了JavaScript语言,那一年,我刚刚从大学毕业.在今年RedMonk 推出的2017 年第一季度编程语言排行榜中,JavaSc ...

  7. 全栈必备 Java 基础

    那一年,从北邮毕业,同一年,在大洋的彼岸诞生了一门对软件业将产生重大影响的编程语言,它就是--Java.1998年的时候,开始学习Java1.2,并在Java Orbix 上做服务,而如今Java 9 ...

  8. 全栈必备 贝叶斯方法

    数据的重要性毋庸置疑,但是如何让数据产生价值呢? 对一个全栈老码农而言,经常在开发或者研发管理的时候遇到各种预测.决策.推断.分类.检测.排序等诸多问题.面对"你的代码还有bug么?&quo ...

  9. 全栈必备 网络编程基础

    我们是幸运的,因为我们拥有网络.网络是一个神奇的东西,它改变了你和我的生活方式,改变了整个世界. 然而,网络的无标度和小世界特性使得它又是复杂的,无所不在,无所不能,以致于我们无法区分甚至无法描述. ...

最新文章

  1. 50个Servlet面试问答
  2. 突然发现被点名(理想恋人游戏)
  3. php redis 投票_高可用Redis服务架构分析与搭建
  4. 西南科技大学计算机技术专硕,西南科技大学法律专硕考研怎么样?看了21考研报录数据,太良心了...
  5. MASM32使用教程
  6. signature=efaf25d07c6ea03d7552906c0caee5a8,幼児の認知発達における関係把握の問題
  7. javascript在IE和Firefox中兼容性问题
  8. c语言敏感词屏蔽编程题,C#敏感词过滤实现方法
  9. win8.1虚拟机装linux,Linux VirtualBox安装Win8.1报错0x000000C4怎么办?
  10. 又一爆款电视剧《沉默的真相》,真的很好看吗?网友的弹幕真相啦
  11. 【程序人生】上海,想说爱你不容易
  12. Euclid算法和拓展欧几里得算法
  13. 什么是雪花算法?啥原理?
  14. 服务器性能测试工具及实战,性能测试实战--《软件测试52讲》
  15. 微软8月底推出网络音乐商店 全面挑战苹果
  16. 融云开发者沙龙(济南站)活动精彩回顾
  17. 古人对梦的解释_梦见古人如何解释梦意_周公解梦梦到古人如何解释梦意是什么意思_做梦梦见古人如何解释梦意好不好...
  18. 【渝粤教育】电大中专市场营销管理 (3)作业 题库
  19. 生意参谋获取数据系列章节
  20. CSS Tutorial for Beginners

热门文章

  1. 直播变局下百度移动生态新“野望”
  2. 腾讯财报:业务换防,谁来扛起未来发展的大旗?
  3. 计算机一级挂科率,[转]计算机一级难吗?看了它想挂科,难难难难把此(精)
  4. java模拟一个军队作战_战区级联合作战仿真推演系统
  5. gophp解释器_对比平台--Go和PHP之间的区别
  6. python读取表格数据_Python读取Excel数据并根据列名取值
  7. 444 nginx_nginx 安全问题
  8. Buuctf(misc) 后门查杀
  9. 攻防世界-Misc-What-is-this(简单易懂)
  10. Python容器类型公共方法汇总