这里写目录标题

  • 一、准备工作
  • 二、编译运行
  • 1.使用HBuilder X 软件打开uniapp项目
  • 2.点击菜单栏“运行”---》运行到小程序模拟器---》微信开发者工具(W)
  • 3.编译过程中,安装必要的插件
  • 4.插件安装完成后,重新编译
  • 5.编译成功
  • 6.使用开发者工具导入该uniapp项目,即可运行


一、准备工作

uniapp项目

安装npm 运行环境

安装HBuilder X 软件、设置运行配置

hbuilderx 运行java hbuilderx 运行uniapp_vue.js

二、编译运行

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

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

hbuilderx 运行java hbuilderx 运行uniapp_小程序_02

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

hbuilderx 运行java hbuilderx 运行uniapp_微信开发者工具_03


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

hbuilderx 运行java hbuilderx 运行uniapp_小程序_04


配置好后,运行配置如下:

hbuilderx 运行java hbuilderx 运行uniapp_小程序_05

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

hbuilderx 运行java hbuilderx 运行uniapp_vue.js_06

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

(1)点击菜单栏“工具“—》插件安装

hbuilderx 运行java hbuilderx 运行uniapp_前端_07


(2)在出现的页面,点击”前往插件市场安装“

hbuilderx 运行java hbuilderx 运行uniapp_微信开发者工具_08


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

hbuilderx 运行java hbuilderx 运行uniapp_前端_09


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

hbuilderx 运行java hbuilderx 运行uniapp_vue.js_10


在出现的弹窗中,点击”打开 HBuilder X“:

hbuilderx 运行java hbuilderx 运行uniapp_微信开发者工具_11


在出现的弹窗中,点击”是“:

hbuilderx 运行java hbuilderx 运行uniapp_前端_12


插件安装中:

hbuilderx 运行java hbuilderx 运行uniapp_vue.js_13


安装成功,点击确定:

hbuilderx 运行java hbuilderx 运行uniapp_vue.js_14

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

(1)停止运行

hbuilderx 运行java hbuilderx 运行uniapp_hbuilderx 运行java_15


(2)运行

hbuilderx 运行java hbuilderx 运行uniapp_vue.js_16


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

5.编译成功

hbuilderx 运行java hbuilderx 运行uniapp_前端_17

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

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

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

hbuilderx 运行java hbuilderx 运行uniapp_vue.js_18


hbuilderx 运行java hbuilderx 运行uniapp_hbuilderx 运行java_19


然后,重新运行uniapp项目:

hbuilderx 运行java hbuilderx 运行uniapp_前端_20


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