前言
uni-app 是继 mui 框架之后的一个跨多端的开发框架，目前支持 iOS Android 和 wx(微信小程序), 也就是说开发一套代码可以实现相应端的开发，是基于Vue的一个很不错的开发框架，对于熟悉Vue 和微信小程序的开发小伙伴来说学习成本几乎为零。
官网地址：
1.目录及文件
一个uni-app工程，默认包含如下目录及文件：
├─ components ··················· uni-app组件目录
└──comp-a.vue ··················· 可复用的a组件
├── pages ······················· 业务页面文件存放目录
├─ index ······················ 使用到的字体文件
└── index.vue ····················· index页面
├─ list ······················· 使用到的图片文件
└── list.vue ····················· list页面
├─ static ··· 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─ main.js ······················· Vue初始化入口文件
├─ App.vue ··· 应用配置，用来配置App全局样式以及监听
├─ manifest.json ················ 配置应用名称、appid、logo、版本等打包信息
└─ pages.json················· 配置页面路由、导航条、选项卡等页面类信息
2.应用生命周期
| 函数名 | 说明 |
|---|---|
| onLaunch | 当uni-app 初始化完成时触发（全局只触发一次) |
| onShow | 当 uni-app 启动，或从后台进入前台显示 |
| onHide | 当 uni-app 从前台进入后台 |
应用生命周期仅可在App.vue中监听，在其它页面监听无效。
3.页面生命周期
| 函数名 | 说明 | 平台支持 |
|---|---|---|
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参 | |
| onShow | 监听页面显示 | |
| onReady | 监听页面初次渲染完成 | |
| onHide | 监听页面隐藏 | |
| onUnload | 监听页面卸载 | |
| onPullDownRefresh | 监听用户下拉动作 ，一般用于下拉刷新 | |
| onReachBottom | 页面上拉触底事件的处理函数 | |
| onPageScroll | 监听页面滚动 ，参数为 Object | |
| onTabItemTap | 当前是 tab 页时，点击 tab 时触发。 | |
| onShareAppMessage | 用户点击右上角分享 | 微信小程序 |
注意
- 先触发
uni-apponReady，后触发vue的mounted - 建议使用
uni-app的onLoad代替vue的created
本文只是一个简单入门教程，后面会具体详解开发流程。
2021-1-25日更新
欢迎大家可以参考我最新的文章 uni-app 入门到精通 （二）
