关于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跳转。