由于项目需要，最近接触到uni-app框架，即编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
本篇文章主要介绍uni-app,从零开始搭建项目，本地运行，以及发布到H5和微信小程序。本文主要是想记录一下自己在刚接触到uni-app，如何快速上手，记录学习过程中遇到的一些问题，并且也希望能给正在接触uni-app的你带来一些帮助。
一、创建uni-app
工欲善其事必先利其器，在创建我们第一个uni-app项目之前，首先我们需要安装HBuilderX。具体安装可以参考我整理的这篇文章HBuilderX工具介绍以及使用
1. 在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）
2. 选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。
二、运行uni-app
1. 浏览器运行：点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的 H5 版。
运行成功如下图：
2. 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置
需在输入框输入,你本地对应的微信开发者工具的安装路径。有关微信开发者工具的使用和介绍，可以见这篇文章小程序开发 你需要知道的知识点
注意：微信开发者工具需要开启服务端口 在微信工具的设置->安全中。
运行成功如下图：
Tips
- 如果是第一次使用，需要配置开发工具的相关路径。点击
工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
三、发布
1. H5发布
1.1 在manifest.json的可视化界面，进行如下配置。应用的基础路径目前设置的是/h5/,那发行网站的路径就是www.xxx.com/h5 ；也可以不配置基础路径（根据自己的项目需求来）。
1.2 在HBuilder工具栏点击发行，网站-手机H5,如下图，点击即可生成H5相关的资源文件，保存于unpackage目录。
