【小程序专栏】第一个uniapp项目编译到微信开发者工具以及android真机运行

在本专栏之前的文章已经为大家介绍过，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项目代码就被编译为微信小程序的代码，运行在微信开发者工具端。后续无论你是发行小程序、还是扫码查看小程序都是和原生微信小程序一样的操作了。

后续我会写文章介绍，uniapp的项目结构，微信原生小程序的项目结构及微信开发者工具的使用，当然这个专栏还会写很多的内容，欢迎大家关注我。