项目结构

HbuildX 里面新建一个默认项目：

我们会得到：

一般我们会加上

页面配置

uni-app 和小程序跟普通的网页都不一样，没有路由的概念。页面的导航，底部的 tabbar决定了页面的跳转，导航。只不过小程序是 app.json，uni-app 是 pages.json。

pages 里面我们常用的就三个配置。

globalStyle用来设置应用的状态栏、导航条、标题、窗口背景色等。

pages用来配置应用由那些页面组成，每次新增都要注册到 pages才行。使用style可以设置单个页面的状态栏、导航条、标题、窗口背景色等。

tabBar是应用底部导航tab。如果设置的tab 的话，最多 5 个，最少2 个，跟小程序一样。

uni-app 有三种生命周期，分别是应用生命周期，页面生命周期，组件生命周期。

其中组件生命周期和 Vue 的生命周期一模一样。点这里

应用的生命周期有四个：

onLaunch：当uni-app 初始化完成时触发（全局只触发一次）。

我们可以在这个生命周期里面进行登录，存储用户信息。

onShow：当 uni-app 启动，或从后台进入前台显示。

可以和 onHide 一起设置时间戳，统计用户停留时长。

onHide：当 uni-app 从前台进入后台。

onError：当 uni-app 报错时触发。

页面生命周期很多，常用的有以下五个：

onLoad：监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）。

onShow：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。

onReady：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发。

onHide：监听页面隐藏。

onUnload：监听页面卸载。

因为 uni-app 是一个跨端的框架，有时候我们需要针对某个端进行特定的优化。这时候条件编译就可以派上用场了。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

uni-app 默认使用的单位是 rpx。可以在 HBuilderX 设置UI 设计师给的样式，自动转换成合适的样式。

全局样式可以在 APP.vue的style设置，可以使用 import 引入。

简单入门 uni-app 是不难的，因为是使用 Vue 的语法加上小程序的一些 API。基本上再看下文档就可以进行开发了。

要是想要把 uni-app 用好，还是应该深入学习Vue，还有遵循小程序的开发规范。加上合理使用条件编译，把 uni-app用好不是梦。