uniapp项目的编译运行

一、准备工作

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项目:
在这里插入图片描述
运行成功后,开发者工具会自动打开。

  • 10
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
运行uniapp项目,你可以按照以下步骤进行操作: 1. 首先,确保你的手机已连接到电脑,并开启了USB调试模式。进入hello-uniapp项目,在工具栏上点击运行 -> 真机运行 -> 选择你要运行的设备。这样你就可以在设备上体验uni-app了。如果你的手机无法被识别,可以点击菜单上的运行 -> 运行到手机或模拟器 -> 真机运行常见故障排查指南进行故障排查。同时,请注意目前开发App也需要安装微信开发者工具。\[1\] 2. 使用HBuilder X软件打开uniapp项目。点击菜单栏的运行 -> 运行小程序模拟器 -> 微信开发者工具(W)。在编译过程中,可能需要安装一些必要的插件。安装完成后,重新编译项目。如果编译成功,你可以使用开发者工具导入该uniapp项目运行。\[2\] 3. 如果是第一次使用,你需要配置开发工具的相关路径。点击工具栏的运行 -> 运行小程序模拟器 -> 运行设置,配置相应小程序开发者工具的路径。对于支付宝、百度、字节跳动和360小程序工具,它们不支持直接指定项目启动并运行。因此,在开发工具启动后,请将HBuilderX控制台中提示的项目路径,在相应的小程序开发者工具中打开。如果自动启动小程序开发工具失败,请手动启动小程序开发工具,并打开HBuilderX控制台提示的项目路径。你也可以使用快捷键Ctrl+r来运行项目。另外,HBuilderX还提供了快捷运行菜单,可以按数字快速选择要运行的设备。\[3\] 希望以上步骤对你有所帮助! #### 引用[.reference_title] - *1* *3* [从头开始认识uniapp](https://blog.csdn.net/m0_37578997/article/details/109304683)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp项目编译运行](https://blog.csdn.net/qq_26383975/article/details/121763458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值