HBuilder X 开发 5+App(mui项目)
根据 HBuilder X 官网 介绍,工具具有以下特点:
- 轻巧
仅10余M的绿色发行包(不含插件)- 极速
不管是启动速度、大文档打开速度、编码提示,都极速响应
C++的架构性能远超Java或Electron架构- vue开发强化
HX
对vue做了大量优化投入,开发体验远超其他开发工具
详见 按下Alt+鼠标左键可直接打开网址- 小程序支持
国外开发工具没有对中国的小程序开发优化,HX
可开发uni-app
或小程序
、快应用
等项目,为国人提供更高效工具- markdown利器
HX
是唯一一个新建文件默认类型是markdown的编辑器,也是对md支持最强的编辑器HX
为md强化了众多功能,请务必点击【菜单-帮助-markdown语法示例】,快速掌握md及HX
的强化技巧!- 清爽护眼
HX的界面比其他工具更清爽简洁,绿柔主题经过科学的脑疲劳测试,是最适合人眼长期观看的主题界面
详见- 强大的语法提示
HX
是中国唯一一家拥有自主IDE语法分析引擎的公司,对前端语言提供准确的代码提示和转到定义(Alt+鼠标左键)- 高效极客工具
更强大的多光标、智能双击…让字处理的效率大幅提升
了解HX
的极客技巧,详见,- 更强的json支持
现代js开发中大量json结构的写法,HX
提供了比其他工具更高效的操作
详见
创建项目
1)去官网下载HBuilder X 软件
2)文件》新建》项目》5+App
模板选择:mui项目
这样一个基本的使用mui框架的5+App项目就建好了。
调试运行
既然是一个App项目,那么它的运行不是像传统网站在浏览器中运行的,而是在安卓设备或者模拟器的虚拟机上运行的。
这里我的是逍遥模拟器
(1)在逍遥模拟器官网 上下载模拟器
(2)在项目里通过HBuilderx软件链接逍遥模拟器
点击HBuilderx上的 运行》运行到手机或模拟器
这里如果我们是第一次通过HBuilderx连接模拟器的话,是无法加测到模拟器的。因为我们还未对adb命令 做以下下配置:
1)adb.exe添加到系统环境变量中去
【1】在Hbuilderx的安装目录下找到adb的路径(我的是:D:\softprogram\HBuilderX3.3.11.20220209\HBuilderX.3.3.11.20220209\HBuilderX\plugins\launcher\tools\adbs)
【2】我的电脑》右键》属性》高级系统设置》环境变量》双击系统变量栏的Path》新建》将刚刚adb的路径添加进去》保存
我这里用的是win10电脑,其它系统处理类似
2)验证adb命令是否配置正确
在终端命令窗口(cmd)中输入指令:adb version 回车查看安卓模拟器的版本信息(我这里是Android Debug Bridge version 1.0.32),
输入指令:adb devices
如果出现:List of devices attached
那么表示我们接下来可以 通过adb指令让模拟器连接上电脑。
3)让模拟器连接上电脑
【1】打开逍遥模拟器
【2】在逍遥模拟器的安装文件下打开终端命令窗口cmd
【3】执行命令:adb connect 127.0.0.1:21503
此时窗口出现信息:already connected to 127.0.0.1:21503
4)5+APP mui项目在安卓模拟器上运行
回到HBuilderx项目中》运行》运行到手机或模拟器》运行到Android App基座
这时列表中会出现:127.0.0.1:21503
如果没有出现,请按照步骤执行:adb connect 127.0.0.1:21503
最后点击运行出现以下界面表示我们的项目已经在模拟器上跑起来了!
同时点击运行》运行到手机或模拟器》点击“显示Webview调试控制台”,可查看项目运行日志(排错)。
更多用法,可查看HBuilder X 官网 和mui 官网相关知识。