我与uni-app不得不说的那段故事……

之前在朋友的安利下了解到了uni-app，然后最近因为一些原因就想着学习一下，毕竟程序员还是要不断提升自己嘛。害~
首先，什么是uni-app呢
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
简单来说就是一次开发，多端适配。
uni-app官网

创建第一个uni-app项目

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。
这里我们使用官网推荐的HBuilderX来创建第一个项目。
HBuilderX可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
HBuilderX下载地址

好了，接下来就该正式创建项目了QAQ

• 点击左上角文件→新建→项目
  
• 选择uni-app类型，输入名称，选择uni-app项目模板，点击创建。
  
  这样我们的第一个项目就建好啦 嘻嘻嘻
  
  那么问题来了，这些项目目录分别代表什么呢？

项目目录	代表内容
components	uni-app组件目录，存放着可复用组件
pages	存放页面文件的目录
static	静态资源目录
App.vue	调用应用生命周期函数、配置全局样式、配置全局的存储globalData
main.js	vue项目的入口文件
manifest.json	应用的配置文件，用于指定应用的名称、图标、权限等
pages.json	对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
uni.scss	为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置

更多详细内容点击这里

我们可以在pages.json里面做一些全局的配置或者页面的一些配公共配置项。
新建页面都需要在pages.json里面的pages数组进行注册，不然会报错

/* 
* json文件  格式应该为json格式   "key":"value"   or  "key":{} || [] 
 */
{
	// 页面配置文
	"pages": [
		// 页面配置对象
		{
			// 配置碰面路径  第一项应为应用的入口文件
		"path": "pages/index/index",
			// 页面配置会覆盖全局的相同配置
			// 具体配置项 https://uniapp.dcloud.io/collocation/pages?id=style
			"style": {
			"navigationBarTitleText": "我的第一个uni-app项目"
			}
		},
		// 应用中新增/减少页面，都需要对 pages 数组进行修改
		{
			"path":"pages/login/Login",
			"style": {
				"navigationBarTitleText": "我的第二个页面"
			}
		}
	],
	// 全局配置文件
	"globalStyle": {
		// 导航栏字体颜色  仅支持white  black
		"navigationBarTextStyle": "white",
		// 导航栏标题
		"navigationBarTitleText": "我的第一个uni-app项目",
		// 导航栏北京色  仅支持十六进制颜色
		"navigationBarBackgroundColor": "#007AFF",
		// 下拉出来的背景色
		"backgroundColor": "#FFFFFF",
		// 是否开启下拉刷新   默认false
		"enablePullDownRefresh":true,
		// 下拉loading样式  仅支持dark  light
		"backgroundTextStyle":"light",
		// 窗口显示的动画效果   仅在app支持
		"animationType":"pop-in",
		// 动画持续时间   
		"animationDuration":300,
		// 设置编译到app平台的特定样式   每个平台都有对应的特定样式配置
		"app-plus":{
			
		}
	}
}

这样我们算是对uni-app有了一个基本的认识，有机会再继续分享我对uni-app的学习经验吧（实际上是好好再学习一下）