一、 安装

1.开发uni-app需要安装HBuilder X（下载地址：https://www.dcloud.io/hbuilderx.html）；

2. 下载成功后直接解压即可

二、创建第一个uniapp项目

1. 点击左上角【文件】>>【新建】>>【项目】，选择uni-app模板

uni-app目录结构

注：目录结构基本和小程序的目录结构相似，只是多了个基础组件的文件夹；

2.在项目中要是需要安装插件，则点击【工具】>> 【插件安装】即可配置

3. 调试

它的调试有很多种，根据目前本人开发体验来说，以下几个调试较为方便和准确

i.浏览器调试：

优点：数据交互检测较为清晰（前后台交互建议用这个）；

缺点：样式方面有些手机端不支持的样式在浏览器中依然支持，会出现bug（目前知道的手机端不支持的样式；例如：p标签在手机端没有用，但是在浏览器调试中合适；时间选择器封装的组件中点击效果在手机端没有效果反之浏览器有用）；

ii.手机调试

以安卓手机为例，需要开启开发者模式才能进行调试，方法如下：

a. 打开【设置】>> 【关于本机】，找到【软件版本】，连续点击五次，即可开启开发者选项；

b. 开启以后，届时用数据线连通手机和电脑，在以下界面找到手机点击进行调试;

优点：样式方面不用担心，手机上啥样就啥样，注意一些不兼容的标签和属性调整即可；

缺点：数据交互时，调用摄像头扫码，登录等API的回调函数时无法看见打印的东西，此时需要安装下图右边的手机调试插件

安装完成之后，点击调试按钮开启调试

iii.微信小程序调试

（1）在点击之后需要先配置你的微信小程序的安装资料的路径，小程序的APPID，这个在配置过程中可以看到；

（2）打开微信开发者工具，点击设置图标

（3）选择【安全】，服务端口选择开启

（4）点击运行微信小程序模拟器即可

需要注意两点：（1）微信开发者工具必须是官方最新版。（2）微信开发者工具需要授权

这个本人感觉此调试方法结合了之前两种的优点；样式和手机一模一样，且可以打印数据进行数据交互（推荐这种调试方法）

三、打包

1. H5打包

2. Android/IOS应用打包

3. 微信小程序打包

新建文件夹，把代码拷贝进去即可，再填写好appid即可。

里面的组件和API详情请到：https://uniapp.dcloud.io/README uniapp官网上查看