一、准备工作

uniapp项目
安装npm 运行环境
安装HBuilder X 软件、设置运行配置

二、编译运行

步骤：
（1）使用HBuilder X 软件打开uniapp项目
（2） 点击菜单栏“运行”—》运行到小程序模拟器—》微信开发者工具（W）

1.使用HBuilder X 软件打开uniapp项目

2.点击菜单栏“运行”—》运行到小程序模拟器—》微信开发者工具（W）

如果是第一次配置，需要设置小程序的运行配置：微信开发者工具路径

配置好后，运行配置如下：

编译运行过程如下，第一次配置时间会长些，根据控制台提示的进行相关的操作，如下提示需要安装必要的插件：

3.编译过程中，安装必要的插件

（1）点击菜单栏“工具“—》插件安装
（2）在出现的页面，点击”前往插件市场安装“

搜索要安装的插件，需要登录，没有账号，先去注册

点击出现的结果，进入安装页面，点击”使用HBuilderX导入插件“：

在出现的弹窗中，点击”打开 HBuilder X“：

在出现的弹窗中，点击”是“：

插件安装中：

安装成功，点击确定：

4.插件安装完成后，重新编译

（1）停止运行

（2）运行

运行的过程中重复步骤3和4，直到没有预编译错误

5.编译成功

6.使用开发者工具导入该uniapp项目，即可运行

如果想要在HBuilderX中编译uniapp同时打开微信开发者工具，需要在开发者工具进行如下配置：

设置—》安全设置—》开启服务端口


然后，重新运行uniapp项目：

运行成功后，开发者工具会自动打开。