为了账号安全,请及时绑定邮箱和手机立即绑定

uni-app 模拟机调试环境搭建

标签:
前端工具

nui-app.001

前言

最近接手了一份使用 uni-app 进行开发的工作,今天才有时间正式开始,在这里记录一下使用 HBuilderX 进行 uni-app 开发的调试环境搭建过程。

下载安装 HBuilderX

进入 HbuilderX 官网 选择你需要的版本进行下载安装,我这里选的是 App 开发版。

image-20220223162042871

下载安装安卓模拟器

我使用的是模拟机调试,所以需要安装 Android 模拟器。这里我选择的是”网易 MuMu 模拟器”,其下载地址在这里,安装好之后启动模拟器,界面如下图:

image-20220223163605739.png

使用模拟器运行项目代码

使用上面安装好的 HbuilderX 打开我们的项目代码,然后按照下图所示步骤选择 Android 模拟器运行项目:

image-20220223152939476.png

会弹出这样一个弹窗:

image-20220223162643633

点击弹窗中的链接下载安装微信开发者工具,再按照上上图的步骤运行项目,HbuilderX 终端中显示信息为:

image-20220223163941602

在模拟器中查看页面,正常显示。

使用模拟器调试项目代码

既然是开发,那就免不了要进行代码调试。

在上一步的基础上,点击 HBuilderX 右下角的 “debug” 图标:

image-20220223164326121

如果之前没有安装过 App 调试工具,那就会自动安装调试工具,安装完成后自动运行,其内容如下:

image-20220223164525338

然后就可以在调试工具中使用 JavaScript 的断点调试等功能了。

总结

以上就是使用 HBuilderX 、微信开发者工具和 Android 模拟器进行 ui-app 开发的调试环境搭建步骤。

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
84

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消