引言

随着这几年前端开发的迅速发展，各式各样的前端框架一下子都涌了出来。今天我要为大家介绍一款移动端主流的前端框架 —— uni-app。
我第一次听到它，是在前几个月公司要开发一款 APP，而恰好公司并没有安卓和 IOS 的开发人员，我也没有类似的客户端开发经验，而再招人所用的时间成本和开发成本将大大超出预算。这个时候朋友向我推荐了 uni-app 这款框架，使用这款框架开发的轻应用，不仅可以打包成安卓和 IOS 应用，更支持市场主流的各种小程序，可真是 一套代码，多处发布 啊。
学习 uni-app 必须要有 Vue 的基础，否则你将很难学会 uni-app。

一、uni-app概述

uni-app 是 2018 年由 DCloud 推出的一款基于 Vue.js 开发的前端框架，它主要用于移动端开发，不过随着它不断的更新，更有人用它开发出了很多漂亮的 PC 端界面。
开发者使用 uni-app 编写的一套代码，可同时发布到 IOS、Android、H5、以及各种小程序（微信、支付宝、百度、头条、QQ、钉钉）等多个平台。一套代码，多处发布，这正是它特有的优势。
这款强大的框架我们一般推荐大家使用 HBuilderX 进行开发，HBuilderX 作为通用的前端开发工具，尤其是对 uni-app 做了特别的强化。
HBuilderX 下载地址：https://dcloud.io/hbuilderx.html
本篇博客以 微信小程序、H5 和 Android 为例带大家进入 uni-app 的大门。俗话说师父领进门，修行在个人，要想熟练掌握一门技术还是要老老实实的去看官方文档。本人整理的博客笔记只作简单介绍，具体还要看官方文档。

二、HelloWorld

我还是惯用的伎俩带大家先走进并体验 uni-app 的神奇之处，本章以 微信小程序、H5 和 Android 平台为例带大家领略 uni-app 不一样的世界。

1、环境搭建

推荐大家使用 HBuilderX 作为 uni-app 的开发工具。
HBuilderX 下载地址：https://dcloud.io/hbuilderx.html

1）微信小程序

开发微信小程序，必须先安装微信开发者工具（下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，选择 稳定版），运行微信小程序，第一次运行可能需要在 微信开发者工具 中开启服务端口。

​