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导致的
