uniapp入门

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

1、下载HBuilderX 官方下载地址

创建uni-app：
文件-新建-项目

选择uni-app，输入项目名称，点击创建，即可成功创建 uni-app。

创建成功后运行，我一般使用微信开发者工具运行，其他运行方式请参照官网，如没有微信开发者工具 下载地址

目录结构：

目录	用途
components	uni-app组件目录
pages	页面文件存放目录，每次新建一个页面，hbuilder X都会在pages.json里面配置好
static	存放应用引用静态资源（如图片、视频等）的地方
unpackage	里面的打包后的东西，可以不用管，h5打包后会放在这个里面的dist/build/h5里面
App.vue	是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件，用来配置App全局样式以及监听(应用生命周期)
main.js	是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件
manifest.json	配置应用名称、appid、logo、版本等打包信息
pages.json	对uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等
uni.scss	预置了一批scss变量预置，是uni-app的样式包

在pages.json文件一些配置实例

{
	//设置页面路径及窗口表现
	/*	
		通过 pages 节点配置应用由哪些页面组成
		应用中新增/减少页面，都需要对 pages 数组进行修改
	*/
	"pages": [  //pages节点的第一项为应用入口页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor":"#4CD964",
				"enablePullDownRefresh":true
			}
		},
		{
            "path" : "pages/about/about",
            "style" : {
				"navigationBarTitleText":"关于",
				"navigationBarBackgroundColor":"#4CD964"
			}
        },
		{
            "path" : "pages/news/news",
            "style" : {
				"navigationBarTitleText":"新闻",
				"navigationBarBackgroundColor":"#4CD964"
			}
        }
    ],
	//默认页面的窗口展示
	"globalStyle": {
		"navigationBarTextStyle": "white", //导航栏标题颜色及状态栏前景颜色
		"navigationBarTitleText": "uni-app", //导航栏标题文字内容
		"navigationBarBackgroundColor": "#007AFF", //导航栏背景颜色
		"backgroundColor": "#FFFFFF" , //窗口的背景色
		"backgroundTextStyle": "dark"  , //下拉 loading 的样式，仅支持 dark / light
		"enablePullDownRefresh": true  //是否开启下拉刷新  即每个页面都实现下拉刷新
		
	},
	//设置底部tab的表现
	/*
		tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，
		tab 按数组的顺序排序
	*/
	"tabBar": {
		"color":"#000000",
		"selectedColor":"#007AFF",  //选中时的文字颜色
		"backgroundColor":"#FFFFFF",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/image/person.png", //图片路径
				"selectedIconPath": "static/image/personH.png", //选中时的图片路径
				"text": "首页"
			},
			{
				"pagePath": "pages/about/about",
				"iconPath": "static/image/person.png",
				"selectedIconPath": "static/image/personH.png",
				"text": "关于"
			},
			{
				"pagePath": "pages/news/news",
				"iconPath": "static/image/person.png",
				"selectedIconPath": "static/image/personH.png",
				"text": "新闻"
			}
		]
	},
	//启动模式配置
	"condition": { //模式配置，仅开发期间生效
	    "current": 0, //当前激活的模式（list 的索引项）
	    "list": [{
	            "name": "index", //模式名称
	            "path": "pages/index/index", //启动页面，必选
	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
	        },
	        {
	            "name": "about", //模式名称
	            "path": "pages/about/about", //启动页面，必选
	            "query": "interval=4000&autoplay=false"
	        }
	    ]
	}
}