Uni-app学习过程（1）

Uni-app的学习

我是个小白，之前都是做后台管理和杂七杂八的东西，当东家丢我一个要求兼容所有移动端时，我人是傻的

然后去百度，发现了这么个神奇的玩意，一开始还很慌，但看到是基于vue的，瞬间底气十足奥，东家也很好，给了我学习时间(带薪学习)，就很人性，啥也不说，直接对着官网撸！
什么是uni-app
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序详情看官网链接: link
uni-app支持的通用css单位包括px、upx、vh、官网推荐rpx代替upx。
upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

如何创建
因为uni-app是基于vue开发的框架，vue脚手架是必备的
分为两种创建方式
1.可以通过cli(vue create -p dcloudio/uni-preset-vue my-project)命令进行安装，其中my-project名字自己定义
2.可以通过HBuilderX新建

文件目录

1.components 文件是存放组件的地方，组件都是根据项目需求自己对代码进行抽离。
2.icon 文件不是项目自动生成的，是自己建立的，用于引用图标库
3.pages 文件是存放页面的，和微信小程序里面的一样
4.static 文件是存放项目中的图片(一般都是底部导航图片)
5.manifest.json 是配置文件，主要配置APP、 H5 、各类小程序
6.pages.json 是配置页面底部导航栏和页面。其中底部导航栏是通过tabbar配置，最多只能配五个
7.uni.scss 是存放公共的样式。
不同的模块得到的文件一样不同（我这个就是uni-ui项目），虽然都是些废话，但的确和小程序很像，上手起来很快

生命周期
uni-app是基于vue的框架，所以vue的生命周期，在uni中一样能使用，除此之外，还拥有自身的生命周期以供使用，常用的onLoad，onShow，onReady，onHide等，更多可以参考官网link

项目运行(常用)

1. 微信小程序端

配置小程序AppID
点击最上面工具栏选择运行
选择运行到小程序模拟器
选择微信小程序开发工具

2.浏览器端

这些是最基础的，至少能跑了