HBuilderX将Uniapp项目运行到微信开发者工具

HBuilderX将Uniapp项目运行到微信开发者工具

1、HBuilderX配置

1.1导入Uniapp项目

有三种不同的方式，这里我们选择的是第三种，从本地目录导入。即通过文件→导入→从本地目录导入。

1.2相关配置

1.2.1 微信小程序AppID配置

HBuilderX打开项目的文件结构中，找到mainfest.json文件打开，修改成自己的微信小程序AppID。

1.2.2 微信开发者工具路径配置

配置路径：运行→运行到小程序模拟器→运行设置→小程序运行设置

2、微信开发者工具配置

①微信扫描二维码登录微信开发者工具

②点击安全设置

③打开服务端口

3、运行调试部署

3.1 编译运行

在HBuilderX点击 运行→运行到小程序模拟器→微信开发者工具。

在次过程中，HBuilderX会自动检测项目，并且根据项目配置文件等，自动安装相应的插件。

比如这个项目，HBuilderX给我自动安装了Uni-app（Vue2）编译插件以及scss/sass编译插件等与之相关的其他插件。

3.2 插件查看

HBuilderX插件下载查看位置如下：

3.3 编译日志

执行完步骤3.1编译运行步骤后，HBuilder会在下面的日志栏里有相关的提示。

3.4 信任并运行

这时候微信开发者工具会自动启动，提示您信任此项目的作者吗弹窗时？点击信任并运行。

4、效果展示

最后，微信开发者工具完美小程序项目效果。