Uni-app的学习Ⅰ（简单介绍、环境搭建、项目介绍）

秒速五厘米 2022-12-09 03:13 128阅读 0赞

# 一、uni-app的介绍 #

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

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

# 二、环境搭建 #

1、安装编辑器**HbuilderX**下载地址(下载App开发版)  
HBuilderX是通用的前端开发工具但为uni-app做了特别强化。  
2、**安装微信开发者工具下载地址**

# 三、项目介绍 #

├─myUni
     │	│
     │	│
     │	├─pages                  // 打包后的项目
     │	│
     │	│
     │	├─static          		 // 静态文件
     │	│
     │	│
     │	├─unpackage              // 打包后的文件
     │	│
     │	│
     │	├─App.vue            	 // 是页面入口文件
     │	│
     │	│
     │ 	├─main.js             	 // 是项目的核心文件，入口
     │	│
     │	│
     │	├─manifest.json           // 该项目打包的配置文件
     │	│
     │	│
     │  └─uni.scss	              // 一些常用的scss变量

# 四、开发规范 #

> ①页面文件遵循vue单文件组件(SFC)规范  
> ②组件标签靠近小程序规范，详见uni-app组件规范  
> ③接口能力(JS API）靠近微信小程序规范，但需将前缀wx替换为uni，诈见uni-app接口规范  
> ④数据绑定及事件处理同vue.js规范，同时补充了App及页面的生命周期  
> ⑤为兼容多端运行，建议使用flex布局进行开发