当前位置： 首页 > news >正文

【智能终端】HBuilder X 与微信开发者工具集成与调试实战

news 2026/2/9 7:10:32

目录

1. 需求和理解库、框架、平台

1.1 需求

1.2 理解

2.3 库、框架、平台

2.3.1 库（Library）

2.3.2 框架（Framework）

2.3.3 平台（Platform）

2.3.4 总结

2. 使用 HBuilder X 创建第一个 uni-app 应用

步骤1: 进入 DCloud 官网，下载并安装 HBuilder X。

步骤2: 打开 HBuilder X，选择 新建 -> 项目 -> uni-app，创建一个新的应用。

步骤3: 根据界面提示，填写应用名称、选择模板（如Hello uni-app），然后点击 创建。

步骤4: 项目创建成功后，您可以在编辑器中看到 pages 文件夹中的页面代码。

步骤5: 运行应用，在HBuilder X工具中选择 运行到浏览器 或 微信小程序 进行调试。

3. 安装微信开发者工具

步骤1: 访问 微信开发者工具，下载并安装适合您系统的版本。

步骤2: 打开微信开发者工具，登录您的微信开发者账号。

步骤3: 通过HBuilder X选择 运行到微信开发者工具，并进行调试。

步骤4：检查

4. 尽量实现发布原生 App

步骤1: 在 HBuilder X 中选择 发行 -> 原生App-云打包，根据提示填写应用的相关信息。

步骤2: 等待云打包完成，下载打包后的APK文件。

步骤3: 将APK文件发布到相关应用商店或手动安装到手机中进行测试。

5. 安装 Node.js 和 spy-debugger 工具

步骤1: 访问 Node.js官网，下载并安装适合您操作系统的Node.js，然后安装。

步骤2: 安装完成后，打开命令行窗口，输入 node -v 检查安装是否成功。

步骤3: 安装 spy-debugger 工具。

步骤4: 运行 spy-debugger 以开始调试

1. 需求和理解库、框架、平台

1.1 需求

1. 理解库、框架、平台，把基本概念写入实验报告

2. 进入https://www.dcloud.io，下载HBuilder X，创建第一个uni-app应用，把创建流程记录到实验报告里

3. 安装微信开发者工具

4. 尽量能够实现发布原生App

5. 安装node.js，安装页面调试工具(spy-debugger)。

安装命令：

windows系统 npm install spy-debugger -g

Mac系统 sudo npm install spy-debugger -g

1.2 理解

  • 提升跨平台开发能力：通过使用 HBuilder X 和 uni-app，你可以同时为多个平台（如 Web、微信小程序、iOS、Android 等）开发应用。这不仅提升了开发效率，还减少了开发成本，因为你只需要编写一套代码。

  • 熟悉现代开发框架：了解 uni-app 这种基于 Vue.js 的框架，不仅帮助你掌握前端开发，还能让你熟悉常见的前端技术栈（如 HTML、CSS、JavaScript）。这些技术在 web 和移动应用开发中广泛应用，能够增加你的技术栈深度。

  • 微信小程序开发：学习如何使用微信开发者工具，能够让你快速开发、调试和发布微信小程序，这在国内的应用场景中非常重要。微信小程序开发技能已经成为许多企业和个人开发者的必备技能之一。

  • App 云打包与发布：通过 HBuilder X 的云打包功能，你可以快速将 uni-app 项目打包成原生 Android 或 iOS 应用，便于发布到应用商店。这可以大大缩短从开发到上线的时间，让你更快地测试市场和用户反馈。

  • 调试工具的使用：学习 Node.js 和 spy-debugger，你可以更好地理解如何在移动端调试应用，特别是针对移动浏览器和 App 内的调试。这些工具可以帮助你解决开发中的兼容性问题、性能优化等实际问题。

2.3 库、框架、平台

2.3.1 库（Library）

定义: 库是一组可复用的代码，专注于实现某些特定功能。开发者可以通过调用库中的代码，快速完成某个功能，而不需要从头编写。

特点:

  • 可复用性: 提供现成的功能。
  • 灵活性: 开发者可自由选择何时调用。

例子:

  • jQuery: 前端库，用于简化 HTML 操作。
  • Lodash: 提供数组、对象等数据操作的工具函数。

2.3.2 框架（Framework）

定义: 框架为开发提供结构和流程。它规定了应用的整体架构，开发者在框架的约束下编写代码。

特点:

  • 规定结构: 统一的开发架构和标准。
  • 内置功能: 提供诸如路由、数据管理等常见功能。

例子:

  • Vue.js: 前端框架，适合构建用户界面。
  • Spring: Java 框架，适用于企业级应用。

2.3.3 平台（Platform）

定义: 平台是一种集成开发环境，提供从编写代码到发布应用的完整工具链。

特点:

  • 集成工具: 开发、调试、测试、发布一体化。
  • 全流程支持: 提供开发到上线的全套服务。

例子:

  • HBuilder X: 支持多平台开发的集成环境。
  • 微信开发者工具: 专门用于微信小程序开发和调试。

2.3.4 总结

  • 库提供功能，开发者调用即可。
  • 框架提供结构和流程，开发者在框架规定下开发。
  • 平台是集成工具环境，支持整个开发流程。

2. 使用 HBuilder X 创建第一个 uni-app 应用

步骤1: 进入 DCloud 官网，下载并安装 HBuilder X。

步骤2: 打开 HBuilder X，选择 新建 -> 项目 -> uni-app，创建一个新的应用。

步骤3: 根据界面提示，填写应用名称、选择模板（如Hello uni-app），然后点击 创建。

步骤4: 项目创建成功后，您可以在编辑器中看到 pages 文件夹中的页面代码。

步骤5: 运行应用，在HBuilder X工具中选择 运行到浏览器 或 微信小程序 进行调试。

3. 安装微信开发者工具

步骤1: 访问 微信开发者工具，下载并安装适合您系统的版本。

步骤2: 打开微信开发者工具，登录您的微信开发者账号。

步骤3: 通过HBuilder X选择 运行到微信开发者工具，并进行调试。

步骤4：检查

4. 尽量实现发布原生 App

步骤1: 在 HBuilder X 中选择 发行 -> 原生App-云打包，根据提示填写应用的相关信息。

步骤2: 等待云打包完成，下载打包后的APK文件。

打包完成后会提示在那个目录的

步骤3: 将APK文件发布到相关应用商店或手动安装到手机中进行测试。

5. 安装 Node.js 和 spy-debugger 工具

步骤1: 访问 Node.js官网，下载并安装适合您操作系统的Node.js，然后安装。

https://nodejs.org/zh-cn

步骤2: 安装完成后，打开命令行窗口，输入 node -v 检查安装是否成功。

步骤3: 安装 spy-debugger 工具。

Windows 系统:

npm install spy-debugger -g

Mac 系统:

sudo npm install spy-debugger -g

步骤4: 运行 spy-debugger 以开始调试：

spy-debugger

spy-debugger -p 9889

相关文章：

【智能终端】HBuilder X 与微信开发者工具集成与调试实战

目录 1. 需求和理解库、框架、平台 1.1 需求 1.2 理解 2.3 库、框架、平台 2.3.1 库（Library） 2.3.2 框架（Framework） 2.3.3 平台（Platform） 2.3.4 总结 2. 使用 HBuilder X 创建第一个 uni-app 应…...

编程日记 2024/9/12 4:30:15

结构体的字节对齐方式（__attribute_pack(packed))#pragma pack())

结构体的字节对齐方式（__attribute_pack(packed))&#pragma pack()) 1、编译器的字节对齐方式 当前编译器都有默认的字节对齐方式， struct PackedStruct {char a;int b;short c; };如上代码段中的结构体，在编译运行后发现他的大小并不…...

编程日记 2024/9/12 4:28:13

若依Ruoyi之智能售货机运营管理系统（新增运营运维工单管理）

idea抽取独立方法快捷键：ctrlaltm TaskDto.java package com.dkd.manage.service.impl;import java.time.Duration; import java.util.List; import java.util.stream.Collectors;import cn.hutool.core.bean.BeanUtil; import cn.hutool.core.collection.CollUti…...

编程日记 2024/9/12 4:27:12

ModuleNotFoundError: No module named ‘keras.layers.core‘怎么解决

问题 ModuleNotFoundError: No module named keras.layers.core，如图所示： 如何解决 将from keras.layers.core import Dense,Activation改为from tensorflow.keras.layers import Dense,Activation，如图所示： 顺利运行&#xf…...

编程日记 2024/9/12 4:22:03

C++（三）----内存管理

1.C/C内存分布 看下面这个问题（考考你们之前学的咋样）： int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] {1, 2, 3, 4};char char2[] "abcd";char* pCh…...

编程日记 2024/9/12 4:19:59

使用 ShuffleNet 模型在 CIFAR-100 数据集上的图像分类

简介 在深度学习领域，图像分类任务是衡量算法性能的重要基准。本文将介绍我们如何使用一种高效的卷积神经网络架构——ShuffleNet，来处理 CIFAR-100 数据集上的图像分类问题。 CIFAR-100 数据集简介 CIFAR-100 数据集是一个广泛使用的图像分类数据集&…...

编程日记 2024/9/12 4:18:57

怎么利用短信接口发送文字短信

在当今这个快节奏的数字时代，即时通讯已成为人们日常生活和工作中不可或缺的一部分。而短信接口（SMS Interface），作为传统与现代通讯技术结合的典范，凭借其高效、稳定、广泛覆盖的特性，在众多领域发挥着不可…...

编程日记 2024/9/12 4:17:56

【C#生态园】提升C#开发效率：掌握这六款单元测试利器

从xUnit到SpecFlow：C#测试驱动开发全指南 前言 在C#开发中，单元测试和模拟框架是至关重要的工具，它们可以帮助开发人员确保代码的质量和可靠性。本文将介绍一些常用的C#单元测试框架和相关库，包括xUnit、NUnit、Moq、FluentAsse…...

编程日记 2024/9/12 4:15:53

【QT】自制一个简单的小闹钟，能够实现语音播报功能

做了一个自制的小闹钟，能够自己输入时间，以及对应的闹铃，时间到了自动播放设定的闹铃，可以随时取消重新设定，采用分文件编译 注意：需要在.pro文件中加入：QT core gui texttospeech 代码…...

编程日记 2024/9/12 4:14:52

基于深度学习的图像描述生成

基于深度学习的图像描述生成（Image Captioning）是一种将计算机视觉与自然语言处理结合的任务，其目标是通过自动生成自然语言来描述输入的图像。该技术能够理解图像中的视觉内容，并生成相应的文本描述，广泛应用于视觉问…...

编程日记 2024/9/12 4:11:45

Linux和C语言（Day11）

一、学习内容 讲解有参函数 形参 和 实参 形参——定义时的参数，形式上的参数，没有实际意义，语法上必须带有数据类型 void fun(int a,int b); void fun(int a[],int n); void fun(char *s); 可以是：变量、数组、指针 实参——调用…...

编程日记 2024/9/12 4:10:43

使用Zlib库进行多文件或者多文件夹的压缩解压缩

zlib库可在git上自己clone下来然后使用cmake工具生成解决方案，编译、生成zlib二进制文件。然后将zlib库引入项目： //zlib库支持 #include "../zlib/include/zlib.h" #ifdef _DEBUG #pragma comment(lib, "../zlib/lib/zlibd.lib") …...

编程日记 2024/9/12 4:09:42

CSGHub携手Nvidia NIM、阿里计算巢打造企业级私有化部署解决方案

强强联合 人工智能与大数据的迅速发展，大模型的推理应用和资产管理已成为企业数字化转型的重要组成部分，企业正寻求高效、安全的AI模型部署解决方案。为应对日益增长的计算需求和复杂的数据管理挑战，CSGHub、Nvidia和阿里云计算巢强强联手&a…...

编程日记 2024/9/12 4:08:41

opencv的球面投影

cv::detail::SphericalProjector 在全景图像拼接任务中，可能需要对多个图像进行球面投影以实现无缝拼接。每个cv::detail::SphericalProjector可以负责一个图像的球面投影操作。通过将多个这样的投影器存储在std::vector中，可以对一组图像依次进行投影处…...

编程日记 2024/9/12 4:04:33

5. 去中心化应用（dApp）

去中心化应用（dApp） 去中心化应用（dApp）是基于区块链技术构建的应用程序，其核心特性是去中心化、透明和开放。dApp与传统应用有许多显著的区别，它们在实现和功能上都带来了新的变革。以下是对dApp的详细介…...

编程日记 2024/9/12 4:03:32

k8s服务发布Ingress

Kubernetes暴露服务的方式目前只有三种：LoadBlancer Service、NodePort Service、Ingress，通俗来讲，ingress和之前提到的Service、Deployment，也是一个k8s的资源类型，ingress用于实现用域名的方式访问k8s内部应用。 In…...

编程日记 2024/9/12 4:02:30

区块链学习笔记1--比特币

区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。 从狭义上来说：区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一种链式数据结构，并以密码学的方式保证的不可篡改和不可伪造的分布式账本。 意思就是…...

编程日记 2024/9/12 4:01:29

在 Vite 项目中自动为每个 Vue 文件导入 base.less

在 Vue.js 项目中，使用 Less 作为 CSS 预处理器时，我们通常会创建一个全局的样式文件（如 base.less），用于存放一些全局变量、混合、通用样式等。为了避免在每个 Vue 组件中手动导入这个文件，我们可以通过配…...

编程日记 2024/9/12 3:57:19

RUST 学习之全局变量

RUST 全局变量 rust 全局变量编译期初始化的全局变量静态常量静态变量原子类型的静态变量 运行期初始化的全局变量lazy_staticBox::leakOnceCell & OnceLock 参考文档 rust 全局变量 编译期初始化的全局变量 静态常量 在编译期初始化，所以其赋值只能是表达式…...

编程日记 2024/9/12 3:56:18

代码随想录八股训练营第三十九天| C++

前言 一、说一下 lambda函数？ 1.1.Lambda 函数的一般语法如下: 1.2.捕获子句： 二、C 怎么实现一个单例模式？ 2.1.懒汉式（线程不安全）: 2.2.饿汉式（线程安全）: 2.3.双重检查锁定&#xff…...

编程日记 2024/9/12 3:55:17

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/8 4:37:08

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中，我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2026/2/8 20:42:58

golang循环变量捕获问题​​

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下： 问题背景 看这个代码片段： fo…...

编程新知 2026/1/21 14:29:57

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40