1 Introduction
1.1 Overview
uni-app is to use a front-end frame Vue.js cross-platform application development, the developer to write one set of code can be compiled into a plurality of platforms iOS, Android, H5, applets
1.2 Why use Uni-App
1.3 Uni-App features
Development function, reference, reference plug-in market: https: //ext.dcloud.net.cn/
2, Quick Start
1, the installation HbuildX development tools
2. Create a project
3, named
Select uniapp, enter the project name, such as: hello-uniapp, click Create, you can successfully create uniapp. Click the template of Hello uni-app you can experience the official example.
4, run the project
Currently only supports Google browser to run uni-app items can also be in the real machine, simulator
Run successfully, the browser automatically opens
http://10.8.165.87:8080/h5/
3, detailed tutorial
3.1 Project Structure
pages: page displaying our app pages are in this file folder
All internal folder name is the name of the page
Folder name .vue internal page is based on the development of Vue
static: static resources
Pictures, audio, video, etc.
App.vue application configuration is used to configure and monitor global style App
main.js Vue entrance initialization file
manifest.json configure the application name, appid, logo, and other packaged version information
pages.json
Vue entrance initialization file ├─App.vue application lifecycle ├─manifest.json configure the application name, appid, logo, and other packaged version information, see └─pages.json routing configuration page, navigation bar, tab pages and other types of information
https://element.eleme.cn/#/zh-CN hungry Vue2.0 based UI components developed VUE
3.2 detailed tutorial
3.2.1 page jump routes
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 组件 控件 标签