uniapp深入浅出

一.简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。具有vue和微信小程序的开发经验，可快速上手uni-app。

二.相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

三.环境搭建

1.安装编辑器HbuilderX 吗，HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，可开箱即用

2.安装微信开发者工具

四.介绍项目目录和文件作用

1.pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

2.manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

3.App.vue是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

4.main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

5.uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

6.unpackage 就是打包目录，在这里有各个平台的打包文件

7.pages 所有的页面存放目录

8.static 静态资源目录，例如图片等

9.components 组件存放目录

五.uni-app简单来说是 vue的语法 + 小程序的api。

它遵循Vue.js语法规范，组件和API遵循微信小程序命名，这些都属于通用技术栈，学习它们是前端必备技能，uni-app没有太多额外学习成本。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app 。没学过vue的同学，也不用掌握vue的全部，只需了解vue基础语法、虚拟dom、数据绑定、组件、vuex，其他如路由、loader 不用学，cli、node.js、webpack也不需要学。