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

以前在朋友的安利下了解到了uni-app，而后最近由于一些缘由就想着学习一下，毕竟程序员仍是要不断提高本身嘛。害~
首先，什么是uni-app呢
uni-app是一个使用 Vue.js 开发全部前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H五、以及各类小程序（微信/支付宝/百度/头条/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的学习经验吧（其实是好好再学习一下）