【智能终端】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 应用
步骤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 应…...
)#pragma pack()))
结构体的字节对齐方式（__attribute_pack(packed))#pragma pack())
结构体的字节对齐方式（__attribute_pack(packed))&#pragma pack()) 1、编译器的字节对齐方式 当前编译器都有默认的字节对齐方式， struct PackedStruct {char a;int b;short c; };如上代码段中的结构体，在编译运行后发现他的大小并不…...
若依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…...
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，如图所示： 顺利运行…...
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…...
使用 ShuffleNet 模型在 CIFAR-100 数据集上的图像分类
简介 在深度学习领域，图像分类任务是衡量算法性能的重要基准。本文将介绍我们如何使用一种高效的卷积神经网络架构——ShuffleNet，来处理 CIFAR-100 数据集上的图像分类问题。 CIFAR-100 数据集简介 CIFAR-100 数据集是一个广泛使用的图像分类数据集&…...
怎么利用短信接口发送文字短信
在当今这个快节奏的数字时代，即时通讯已成为人们日常生活和工作中不可或缺的一部分。而短信接口（SMS Interface），作为传统与现代通讯技术结合的典范，凭借其高效、稳定、广泛覆盖的特性，在众多领域发挥着不可…...
【C#生态园】提升C#开发效率：掌握这六款单元测试利器
从xUnit到SpecFlow：C#测试驱动开发全指南 前言 在C#开发中，单元测试和模拟框架是至关重要的工具，它们可以帮助开发人员确保代码的质量和可靠性。本文将介绍一些常用的C#单元测试框架和相关库，包括xUnit、NUnit、Moq、FluentAsse…...
【QT】自制一个简单的小闹钟，能够实现语音播报功能
做了一个自制的小闹钟，能够自己输入时间，以及对应的闹铃，时间到了自动播放设定的闹铃，可以随时取消重新设定，采用分文件编译 注意：需要在.pro文件中加入：QT core gui texttospeech 代码…...
基于深度学习的图像描述生成
基于深度学习的图像描述生成（Image Captioning）是一种将计算机视觉与自然语言处理结合的任务，其目标是通过自动生成自然语言来描述输入的图像。该技术能够理解图像中的视觉内容，并生成相应的文本描述，广泛应用于视觉问…...
Linux和C语言（Day11）
一、学习内容 讲解有参函数 形参 和 实参 形参——定义时的参数，形式上的参数，没有实际意义，语法上必须带有数据类型 void fun(int a,int b); void fun(int a[],int n); void fun(char *s); 可以是：变量、数组、指针 实参——调用…...
使用Zlib库进行多文件或者多文件夹的压缩解压缩
zlib库可在git上自己clone下来然后使用cmake工具生成解决方案，编译、生成zlib二进制文件。然后将zlib库引入项目： //zlib库支持 #include "../zlib/include/zlib.h" #ifdef _DEBUG #pragma comment(lib, "../zlib/lib/zlibd.lib") …...
CSGHub携手Nvidia NIM、阿里计算巢打造企业级私有化部署解决方案
强强联合 人工智能与大数据的迅速发展，大模型的推理应用和资产管理已成为企业数字化转型的重要组成部分，企业正寻求高效、安全的AI模型部署解决方案。为应对日益增长的计算需求和复杂的数据管理挑战，CSGHub、Nvidia和阿里云计算巢强强联手&a…...
opencv的球面投影
cv::detail::SphericalProjector 在全景图像拼接任务中，可能需要对多个图像进行球面投影以实现无缝拼接。每个cv::detail::SphericalProjector可以负责一个图像的球面投影操作。通过将多个这样的投影器存储在std::vector中，可以对一组图像依次进行投影处…...
5. 去中心化应用（dApp）
去中心化应用（dApp） 去中心化应用（dApp）是基于区块链技术构建的应用程序，其核心特性是去中心化、透明和开放。dApp与传统应用有许多显著的区别，它们在实现和功能上都带来了新的变革。以下是对dApp的详细介…...
k8s服务发布Ingress
Kubernetes暴露服务的方式目前只有三种：LoadBlancer Service、NodePort Service、Ingress，通俗来讲，ingress和之前提到的Service、Deployment，也是一个k8s的资源类型，ingress用于实现用域名的方式访问k8s内部应用。 In…...
区块链学习笔记1--比特币
区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。 从狭义上来说：区块链是一种按照时间顺序将数据区块以顺序相连的方式组合成的一种链式数据结构，并以密码学的方式保证的不可篡改和不可伪造的分布式账本。 意思就是…...
在 Vite 项目中自动为每个 Vue 文件导入 base.less
在 Vue.js 项目中，使用 Less 作为 CSS 预处理器时，我们通常会创建一个全局的样式文件（如 base.less），用于存放一些全局变量、混合、通用样式等。为了避免在每个 Vue 组件中手动导入这个文件，我们可以通过配…...
RUST 学习之全局变量
RUST 全局变量 rust 全局变量编译期初始化的全局变量静态常量静态变量原子类型的静态变量 运行期初始化的全局变量lazy_staticBox::leakOnceCell & OnceLock 参考文档 rust 全局变量 编译期初始化的全局变量 静态常量 在编译期初始化，所以其赋值只能是表达式…...
代码随想录八股训练营第三十九天| C++
前言 一、说一下 lambda函数？ 1.1.Lambda 函数的一般语法如下: 1.2.捕获子句： 二、C 怎么实现一个单例模式？ 2.1.懒汉式（线程不安全）: 2.2.饿汉式（线程安全）: 2.3.双重检查锁定ÿ…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
Linux离线（zip方式）安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1：修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本：CentOS 7 64位 内核版本：3.10.0 相关命令： uname -rcat /etc/os-rele…...
Python Ovito统计金刚石结构数量
大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...