【前端技术】uni-app 01：快速开始_前端uni-app

开个新坑，学习一下 uni-app，之后也想 uni-app 来做些事，虽然我主业是后端，但 uni-app 其作为一个高效生产力工具，个人认为非常有必要学习一下~

目录

1 uni-app 介绍

1.1 uni-app 由来

1.2 为什么选择 uni-app

1.3 HBuilderX

2 创建第一个 uni-app 项目

2.1 使用 HBuilderX 创建项目

2.2 目录结构

2.3 运行 uni-app

① 浏览器运行

② 微信开发者工具里运行

---

1 uni-app 介绍

官网地址：https://uniapp.dcloud.net.cn/

uni-app 是基于 Vue.js 开发的跨平台应用开发框架，可将一套代码同时运行在 iOS、Android、H5、小程序等多个平台，开发者只需编写一次代码即可轻松实现跨平台应用的开发。

简单来说，uni-app 类似于三头六臂的哪吒，一个框架干了 app、web 和小程序的活，简直是不给其他框架活路呀~

1.1 uni-app 由来

DCloud 于2012年开始研发小程序技术，加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具。

2015年，DCloud 正式商用了自己的小程序，产品名为“流应用”，并将技术标准捐献给 HTML5 中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。 360手机助手率先接入，在其3.4版本实现应用的秒开运行。

2015年9月，DCloud 推进微信团队开展小程序业务，微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。

DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。

于是 DCloud 决定开发一个免费开源的框架，这就是 uni-app 的由来，uni，读 you ni，是统一的意思。

DCloud 作者大大初心：为开发者提供免费、高效的开发工具，让天下没有难做的应用。改进应用形态，让用户更方便地获取数字服务。

1.2 为什么选择 uni-app

个人觉得有以下几点：

• 跨平台开发：uniapp 可以实现一次开发、多平台发布（包括 iOS、Android、H5、小程序等），不需要分别针对不同平台进行开发。

• 提高开发效率：uniapp 使用 vue.js 作为开发框架，提供了丰富的组件和API，并且开发过程中可以实时预览效果，使得开发效率更高。

• 性能优秀：uniapp采用原生渲染技术，可以提供更好的性能表现，并且可以针对不同平台进行优化。

• 生态丰富：uniapp拥有庞大的社区和生态圈，提供了丰富的开发资源和解决方案，可以帮助开发者快速解决问题。

官方推荐理由