DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2018-06-01 17:47
  • 更新:2023-11-04 17:43
  • 阅读:96862

如何使用HBuilderX开发微信小程序

分类:HBuilder

注意,本文讲的是使用HBuilderX开发原生微信小程序,不是uni-app。使用uni-app请在HBuilderX中新建uni-app项目

很多开发者需要开发小程序,但小程序的开发IDE却总被众多开发者吐槽。
很多开发者只把微信开发工具当模拟器用,代码编写仍然在其他专业编辑器里。

HBuilder作为专业的开发工具,近期也提供了对微信小程序的开发支持:

  • 强大的代码提示
  • 高效的字处理
  • 保存代码时自动刷新微信模拟器。

下文简单讲解使用步骤。

新建微信小程序

在HBuilderX中新建项目时,支持小程序类型,如下:

小程序项目创建后,默认工程目录如下:

]

导入已有小程序

若已存在微信小程序项目,则可以直接将工程目录拖到HBuidlerX中。

小程序语法提示

语法提示是HBuilder一贯的长项,在HBuilder中对小程序语法也有很好的提示。

小程序JS API提示:

小程序wxml标签提示:

同步到小程序模拟器

HBuilderX支持同步代码到微信开发者工具,如下图所示,点击“微信开发者工具”

系统会尝试检测并启动微信开发者工具。

若是已存在的微信项目(之前已使用微信开发者工具打开过的项目),则会直接打开并显示模拟器、编译器等截面,直接跳到下方第4步骤继续阅读即可。

若是新建的项目,则需要按照如下步骤进行小程序项目的初始化导入。

1、微信开发者工具成功启动后界面:

2、选择小程序项目,并在新打开的窗口中点击右下角的“+”,打开新项目向导:

3、项目目录设置为刚刚在HBuilderX中新建的工程根目录

4、在微信开发者工具中,点击左上角的“编译器”,关闭微信编译器;若暂时不需要调试,也可以将调试器关闭,仅保留模拟器。

5、拖一下HBuilderX和微信开发者工具的位置,像如下方式,左侧为HBuilderX的编辑器截面,右侧为小程序的模拟器截面

之后,在左侧HBuilderX中修改小程序代码,右侧模拟器会自动刷新,如下是一个实际录屏示例:

最后,微信小程序有自己的appid,向微信申请后,把appid填写在项目的project.config.json里,有个appid参数。
有appid才能正式发布上传。

8 关注 分享
Trust 天王盖地虎 DCloud_heavensoft 周华飞 s***@gmail.com Jasmine001 a***@126.com 套马杆的套子

要回复文章请先登录注册

2***@qq.com

2***@qq.com

回复 星海扬帆 :
我也是这样,请问解决了吗
2023-11-04 17:43
1***@qq.com

1***@qq.com

新建项目没有小程序选项啊
2022-09-05 20:25
2***@qq.com

2***@qq.com

回复 1***@qq.com :
manifest.json配置了没有
2022-02-22 18:00
1***@qq.com

1***@qq.com

回复 2***@qq.com :
HBX版本:3.3.11.20220209
微信开发者工具版本:1.05.2201240
HBX新建的uni-app项目,点击的 运行(R)--运行到小程序模拟器(M)--微信开发者工具(W),能拉起微信开发者工具,也能正常显示到模拟器里,但是后续的更改就不会同步了,并且修改增加methods 或者computed 中的方法,也不会同步到微信开发者工具,文件都不会变,更别提实时编译显示到模拟器了
2022-02-22 17:12
2***@qq.com

2***@qq.com

回复 1***@qq.com :
是热更新的,重启试试
2022-02-22 16:38
1***@qq.com

1***@qq.com

uni-app 开发,运行到微信开发者工具,模拟器不会实时刷新啊,还必须要手动点编译,怎么能让实时刷新啊?
2022-02-22 15:11
Azikou

Azikou

现在能开发小程序插件嘛
2021-05-23 14:45
星海扬帆

星海扬帆

我按指导拖入小程序项目后,点运行=> 微信小程序模拟器 => 本项目类型无法运行到小程序模拟器
2021-05-23 11:43
2***@qq.com

2***@qq.com

我新建项目没有小程序这个模板是为什么
2021-03-21 20:34
564527

564527

16:17:13.833 [微信小程序开发者工具] √ IDE server started successfully, listening on http://127.0.0.1:13999
16:17:13.838 [微信小程序开发者工具] - open IDE
这是怎么回事?
2020-05-13 16:32