在本专栏之前的文章已经为大家介绍过，uniapp作为一个跨端开发框架被广泛应用。通过uniapp可以开发一套程序。运行到andoid、ios以及各种小程序端，微信小程序、支付宝小程序、百度小程序、字节跳动小程序、快应用、QQ小程序、360小程序、京东小程序、快手小程序等
本文为大家创建第一个uniapp项目，并将项目以andorid应用的形式运行到真机进行调试，以“微信小程序”为例编译运行到微信开发者工具。
文章目录
- 一、前置工作
- 二、新建uniapp项目
- 三、android应用真机运行
- 四、开发者工具运行
一、前置工作
在开始之前我们有必要先去下载2个工具，因为uniapp的开发，如果是andoid、ios我们可以通过、调试或者打包运行到真实的手机上。如果是小程序的开发，我们需要将uniapp代码先编译为微信小程序代码、支付宝小程序代码、百度小程序代码等，然后运行到对应的开发者工具上面才可以进行后续的发行、扫码之类的操作。
- HBuilderX：uniapp官方开发工具，内置uni-app编译器及项目模板，对uniapp的语法提示更加友好。真正的uniapp项目开发都在这个工具中进行。
- 微信开发者工具：微信小程序的官方开发工具，发行、调试小程序，以及小程序扫码查看操作时可以使用。
百度搜索关键字“HBuilderX”、“微信开发者工具”、“下载”即可，我这里就不给出下载地址了。这两个工具安装都很简单，下一步、下一步安装完成即可。
二、新建uniapp项目
安装完成HBuilderX之后，文件->新建->项目
之后会弹出一个弹出框，在弹出框内我们选择uniapp、然后输入我们开发的uniapp项目名称。选择模板，uniapp(DCloud)官方有很多的现成的uniapp开发模板。uniapp是基于vue语法进行开发的，根据自己熟悉的vue语法选择图中的Vue版本，然后点击创建这样我们的第一个uniapp项目就创建成功了。
如果你是一个新手，建议你先把经典模板里面的经典组件使用方式演示看一遍，这样在你自己开发的时候，你知道某个组件的应用方式，然后找到对应的模板对应的代码copy过来直接使用即可，这样会节省你很多的开发时间，也是上手学习uniapp最快的方法。
新建uniapp项目完成之后，HbuilderX会自动打开新建的项目，项目的目录结构几乎和vue项目的结构是同样的。关于uniapp项目结构和各种文件的作用，我会在本专栏再单独写一篇文章进行介绍。
三、android应用真机运行
首先将您的手机连接到开发电脑上，确保手机处于“开发者模式”。在开发者选项中，将“USB调试”以及“USB安装”的开关按钮打开，这样我们才能将项目真机运行。这一步各种手机存在差异，但大同小异，根据自己不同的手机型号大家自己研究一下吧。HbuilderX将Uniapp运行到手机端需要下载一个插件，参考下图
插件安装完成之后，我们将项目运行到手机端，因为我使用Android手机，所以选择运行到Android App基座。
完成上面的步骤，uniapp会提示您选择的真机设备，然后进行项目编译。实际真机运行就是在手机端安装了一个真实的android应用，所以安装过程中手机端有提示信息“允许、拒绝”相关的，都选择“允许”。完成这些步骤之后，你会发现你的uniapp-android应用在你的手机上运行起来了。
四、开发者工具运行
首先微信开发者工具安装完成之后，需要开发者用微信扫码才能登陆，先登录进去。登录进去之后，我们找到设置按钮，在安全设置里面，将服务端口打开。服务端口打开之后，HBuilderX才能和微信开发者工具进行通信。将uniapp编译之后的代码，自动转移到微信小程序开发者工具中。
然后回到HBuilderX开发工具里面，我们选择“运行” ->“运行到小程序模拟器”，我们可以看到有很多的开发者工具可以选择。假如我们希望我们的uniapp项目，被编译为微信小程序项目，那么我们就选择微信开发者工具。如果你想开发的是支付宝小程序、百度小程序，就安装并选择对应的工具即可。
我们选择“微信开发者”工具，第一次运行的时候会提示你指定微信开发者工具的安装路径。
完成上面的指定动作之后，uniapp项目代码就被编译为微信小程序的代码，运行在微信开发者工具端。后续无论你是发行小程序、还是扫码查看小程序都是和原生微信小程序一样的操作了。
