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

• • 一、前置工作

  • 二、新建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基座。

文末

当你打算跳槽的时候，应该把“跳槽成功后，我能学到什么东西？对我的未来发展有什么好处”放在第一位。这些东西才是真正引导你的关键。在跳槽之前尽量“物尽其用”，把手头上的工作做好，最好是完成了某个项目或是得到提升之后再走。跳槽不是目的，而是为了达到最终职业目标的手段

最后祝大家工作升职加薪，面试拿到心仪Offer

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**