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

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

news 2026/2/9 21:38:27

目录

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

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/9 16:57:53

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2026/1/14 22:12:47

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2026/2/8 18:25:56

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...

编程新知 2026/2/9 11:41:07

Linux 内存管理调试分析：ftrace、perf、crash 的系统化使用

Linux 内存管理调试分析&#xff1a;ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础&#xff0c;但这一子系统结构复杂&#xff0c;常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题&#xff0c;需要一套工具化、…...

编程新知 2026/2/6 1:15:38

统计按位或能得到最大值的子集数目

我们先来看题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出 nums 子集 按位或 可能得到的 最大值 &#xff0c;并返回按位或能得到最大值的 不同非空子集的数目 。 如果数组 a 可以由数组 b 删除一些元素&#xff08;或不删除&#xff09;得到&#xff0c;…...

编程新知 2026/1/29 3:33:38