Hbuilder X开发工具多端调试 配置

您所在的位置:网站首页 hbuilderx配置npm Hbuilder X开发工具多端调试 配置

Hbuilder X开发工具多端调试 配置

2023-03-10 13:08| 来源: 网络整理| 查看: 265

小程序开发中使用HbuilderX来书写代码,相对于使用微信开发者工具我们来讲一讲他们的区别,以及开发的效率

微信开发者工具

微信开发者工具是将css,js,html分成了三个独立的文件在一个主体文件目录下

HbuilderX工具

只有一个独立文件,这个独立文件分为了三个部分template,script,style,类似于vue的写法。当我们使用微信开发者工具打开我们的使用HbuilderX编写的代码,微信开发者工具将HbuilderX的代码模版,按他自己的规则进行转译,进行展示。HbuilderX还支持支付宝小程序,字节跳动小程序,华为小程序等多端小程序。

1626254011(1).jpg

当我们建立一个模块时,pages配置页面的路由会自动给我们生成,不需要我们手动去写当前新增页面的路由,提高了开发效率。

1626255385(4).jpg

使用浏览器调试

1626255772(1).jpg

HbuilderX 配置开启微信开发者工具

第一步打开 工具 ---> 设置 ---> 运行设置 ---> 写入微信开发者工具安装的路径

1626255385(3).jpg

第二步 打开微信开发者工具 设置 ---> 安全 ---> 服务端口改为开启

1626255385.jpg

第三步,在HbuilderX中使用微信开发者工具调试,直接选择 小程序模拟器

1626255916(1).jpg

配置真机调试

第一步手机通过数据线连接到电脑 在使用360助手检测当前电脑连接的手机 显示为以通过数据线进行了连接 直接在运行上选择真机调试即可 (这里我使用了360手机助手进行检测手机和电脑进行连接,连接上以后,选择在手机上运行时,会显示我们的手机型号,点击运行后会打包小程序,然后再我们手机上安装,安装完成后有一个HbuilderX的图标,每次再真机调试,都是打一个新的包安装到手机)

如果使用真机调试运行时,没有看到手机型号的选项,那就检查一下,使用360助手时,电脑和手机上是否都安装了并且开启了360手机助手

1626255385(2).jpg

1626255385(1).jpg



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3