uni-app 入门到精通

前言

uni-app 是继 mui 框架之后的一个跨多端的开发框架，目前支持 iOS Android 和 wx(微信小程序), 也就是说开发一套代码可以实现相应端的开发，是基于Vue的一个很不错的开发框架，对于熟悉Vue 和微信小程序的开发小伙伴来说学习成本几乎为零。

官网地址：

http://uniapp.dcloud.io

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-app onReady ，后触发 vue 的 mounted
• 建议使用uni-app的onLoad 代替 vue的 created

生命周期官方链接

本文只是一个简单入门教程，后面会具体详解开发流程。