HbuilderX前端开发工具的安装和配置

学习uniapp，使用HbuilderX编译器来按照官网的文档学习是最快速的，所以配置好开发工具，学习起来事半功倍，下面主要记录工具安装、微信开发者工具配置，真机配置、安卓模拟器配置以及遇到的问题。

文章目录

HbuilderX前端开发工具的安装和配置
一、下载工具包
二、安装
三、安装UNIAPP插件
- 3.1选择需要安装的插件
四、使用微信web开发者工具运行程序
五、使用真机运行程序
六、使用安卓模拟器运行程序
- 6.1 HbuilderX有时搜索不到模拟器设备
七、遇到问题
- 7.1创建uni-starter模板项目运行报错
- 7.2创建hello uni-app模板项目运行报错问题
总结

一、下载工具包

到官网https://www.dcloud.io/hbuilderx.html下载相应的版本。我这里使用的HbuilderX3.5.3

二、安装

这个HbuildX是免安装的，直接解压即可使用

三、安装UNIAPP插件

选择【工具】>【安装插件】

3.1选择需要安装的插件

我选择的是支持vue2的uni-app插件，选择安装，他会同时将相关插件也进行安装

其他的插件也是类似的安装的方法。

四、使用微信web开发者工具运行程序

首先需要到微信公众号平台中下下载官方版的工具

点击开发者文档

下载完毕之后，正常安装微信开发者工具。
在HbuilderX上选择运行->运行到小程序模拟器，首次运行的话，需要配置下微信web开发者工具的安装路径

当此时如果运行项目到微信开发者工具，这可能出现无法启动微信开发者工具的情况

错误提示需要我们去微信开发者工具中设置安全设置
打开微信web开发者工具的安全配置

选择打开即可

五、使用真机运行程序

将手机插入USB，然后在PC端的HX中选择【运行到手机或模拟器】->【运行到Android APP基座】

之后手机需要被确定USB调试模式，手机上进行确定即可，将提示需要在手机安装Hbuilder这个APP，正常进行安装即可。之后即可在手机上看到相关的app界面了。
说明环境安装成功。我这边是直接成功运行的。
如果遇到问题可以到官网中查找下解决方法：真机运行常见问题

六、使用安卓模拟器运行程序

这里我使用的蓝叠模拟器，默认端口是7555，其他模拟器的端口可能不一样的，大家需要注意这点。
下载蓝叠模拟器
安装蓝叠模拟器，一切都照着正常软件安装即可

在蓝叠模拟器中设置adb和root

设置蓝叠模拟器为竖屏

设置uni-app adb 环境变量
在HbuilderX目录下->plugins目录下->launcher目录下->tools目录下->adbs

复制该路径后打开电脑高级环境变量，我这里使用的是win10,右键【我的电脑】选择【属性】弹出

选择高级系统设置，配置相关的环境变量

配置HbuilderX adb
这个adb是HbuilderX帮我们下载的真机运行插件，点击运行真机运行的时候，第一次就会提示安装插件。
在HbuiderX上点击工具->设置->运行配置

配置adb路径和模拟器的端口：7555

做完以上操作之后可以直接运行

如果没搜索到相关设备，则可以多点击刷新按钮尝试几次。
选择相应的安卓设备，点击运行即可

效果如下：

6.1 HbuilderX有时搜索不到模拟器设备

我遇到过这样的问题，有时候HbuilderX搜索不到安卓模拟器设备。我去任务管理器里面关闭adb.exe服务，再重新搜索就会搜索到模拟器设备了。
其他问题可以参考下官网：运行调试问题

七、遇到问题

7.1创建uni-starter模板项目运行报错

在运行uni-starter模板项目，它弹出提示

所以在此我们应该谨慎对待HbuilderX弹出的提示，不能随意不看就关闭，否则将错过问题解决方法。
这个问题需要配置下manifest.json里面的AppId

点击获取即可获取到相应的AppID，完成时候进行保存即可对项目进行编译成功，运行H5即可看到相关的页面，因为没有上传函数所以会发生点错误

7.2创建hello uni-app模板项目运行报错问题

在创建项目选择项目模板时，点击新建，则HbuilderX创建项目成功之后会提醒你这个模板使用了Dcloud环境，当时我没有注意到这个提示，直接没有配置dcloud环境，所以在运行项目的时候会报错

导致项目编译时候发生错误，H5端空白页面

配置一下云环境之后则成功运行项目了。

总结

这里我个人感觉其实uniapp并不难学，很多问题是因为不会配置HbuilderX导致的