关于uni-app

---

一、uni-app介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

1.优点

uni-app在开发者数量，案例，跨端抹平度，扩展规模，性能体验，周边生态，学习成本，开发成本等8大关键指标上拥有更强的优势。

开发者/案例数量更多
几十万应用，uni统计月活6.5亿，70 +微信/ qq群，更高的百度指数

跨端完善度更高，真正落地的提高绩效

平台能力不预期
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

支持原生代码混写和原生sdk集成。

性能体验优秀
体验更好的混合框架，加载新页面速度重启。

App端支持weex原生渲染，可支持更流畅的用户体验。

小程序端的性能优于市场其他框架。评测

周边生态丰富
插件市场千年款插件。

支持NPM，支持小程序组件和SDK，兼容mpvue组件和项目，兼容weex组件。

微信生态的各种sdk可直接用于跨平台App。

学习成本低
基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

开发成本低
不止开发成本，招聘，管理，测试各方面成本都大幅下降。

HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（甚至只开发一个平台）。

二、快速上手

1.创建uni-app

参考官方：创建uni-app

2.运行uni-app

参考官方：运行uni-app

3.发布uni-app

参考官方：发布uni-app

三、结构目录

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

四、生命周期

1.应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数

参考官方：应用生命周期

2.页面生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数

参考官方：页面生命周期

3.组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同

参考官方：组件生命周期

五、路由

1.路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。

2.路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。