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

news/2025/2/5 14:38:53/

目录

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

1.1 需求

1.2 理解

2.3 库、框架、平台

2.3.1 库（Library）

2.3.2 框架（Framework）

2.3.3 平台（Platform）

2.3.4 总结

uilder>HBuilder%20X%20%E5%88%9B%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AA%20uni-app%20%E5%BA%94%E7%94%A8-toc" style="margin-left:0px;">2. 使用 uilder>HBuilder X 创建第一个 uni-app 应用

uilder>HBuilder%20X%E3%80%82-toc" style="margin-left:40px;">步骤1: 进入 DCloud 官网，下载并安装 uilder>HBuilder X。

uilder>HBuilder%20X%EF%BC%8C%E9%80%89%E6%8B%A9%20%E6%96%B0%E5%BB%BA%20-%3E%20%E9%A1%B9%E7%9B%AE%20-%3E%20uni-app%EF%BC%8C%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%E5%BA%94%E7%94%A8%E3%80%82-toc" style="margin-left:40px;">步骤2: 打开 uilder>HBuilder X，选择 新建 -> 项目 -> uni-app，创建一个新的应用。

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

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

uilder>HBuilder%20X%E5%B7%A5%E5%85%B7%E4%B8%AD%E9%80%89%E6%8B%A9%20%E8%BF%90%E8%A1%8C%E5%88%B0%E6%B5%8F%E8%A7%88%E5%99%A8%20%E6%88%96%20%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%20%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95%E3%80%82-toc" style="margin-left:40px;">步骤5: 运行应用，在uilder>HBuilder X工具中选择 运行到浏览器 或 微信小程序 进行调试。

3. 安装微信开发者工具

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

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

uilder>HBuilder%20X%E9%80%89%E6%8B%A9%20%E8%BF%90%E8%A1%8C%E5%88%B0%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%EF%BC%8C%E5%B9%B6%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95%E3%80%82-toc" style="margin-left:40px;">步骤3: 通过uilder>HBuilder X选择 运行到微信开发者工具，并进行调试。

步骤4：检查

4. 尽量实现发布原生 App

uilder>HBuilder%20X%20%E4%B8%AD%E9%80%89%E6%8B%A9%20%E5%8F%91%E8%A1%8C%20-%3E%20%E5%8E%9F%E7%94%9FApp-%E4%BA%91%E6%89%93%E5%8C%85%EF%BC%8C%E6%A0%B9%E6%8D%AE%E6%8F%90%E7%A4%BA%E5%A1%AB%E5%86%99%E5%BA%94%E7%94%A8%E7%9A%84%E7%9B%B8%E5%85%B3%E4%BF%A1%E6%81%AF%E3%80%82-toc" style="margin-left:40px;">步骤1: 在 uilder>HBuilder X 中选择 发行 -> 原生App-云打包，根据提示填写应用的相关信息。

APK%E6%96%87%E4%BB%B6%E3%80%82-toc" style="margin-left:40px;">步骤2: 等待云打包完成，下载打包后的APK文件。

APK%E6%96%87%E4%BB%B6%E5%8F%91%E5%B8%83%E5%88%B0%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8%E5%95%86%E5%BA%97%E6%88%96%E6%89%8B%E5%8A%A8%E5%AE%89%E8%A3%85%E5%88%B0%E6%89%8B%E6%9C%BA%E4%B8%AD%E8%BF%9B%E8%A1%8C%E6%B5%8B%E8%AF%95%E3%80%82-toc" style="margin-left:40px;">步骤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，下载uilder>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 理解

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

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

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

  • App 云打包与发布：通过 uilder>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）

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

特点:

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

例子:

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

2.3.4 总结

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

uilder>HBuilder%20X%20%E5%88%9B%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AA%20uni-app%20%E5%BA%94%E7%94%A8" style="text-align:justify;">2. 使用 uilder>HBuilder X 创建第一个 uni-app 应用

uilder>HBuilder%20X%E3%80%82" style="text-align:justify;">步骤1: 进入 DCloud 官网，下载并安装 uilder>HBuilder X。

uilder>HBuilder%20X%EF%BC%8C%E9%80%89%E6%8B%A9%20%E6%96%B0%E5%BB%BA%20-%3E%20%E9%A1%B9%E7%9B%AE%20-%3E%20uni-app%EF%BC%8C%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84%E5%BA%94%E7%94%A8%E3%80%82" style="text-align:justify;">步骤2: 打开 uilder>HBuilder X，选择 新建 -> 项目 -> uni-app，创建一个新的应用。

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

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

uilder>HBuilder%20X%E5%B7%A5%E5%85%B7%E4%B8%AD%E9%80%89%E6%8B%A9%20%E8%BF%90%E8%A1%8C%E5%88%B0%E6%B5%8F%E8%A7%88%E5%99%A8%20%E6%88%96%20%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%20%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95%E3%80%82" style="margin-left:.0001pt;text-align:justify;">步骤5: 运行应用，在uilder>HBuilder X工具中选择 运行到浏览器 或 微信小程序 进行调试。

3. 安装微信开发者工具

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

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

uilder>HBuilder%20X%E9%80%89%E6%8B%A9%20%E8%BF%90%E8%A1%8C%E5%88%B0%E5%BE%AE%E4%BF%A1%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%EF%BC%8C%E5%B9%B6%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95%E3%80%82" style="text-align:justify;">步骤3: 通过uilder>HBuilder X选择 运行到微信开发者工具，并进行调试。

步骤4：检查

4. 尽量实现发布原生 App

uilder>HBuilder%20X%20%E4%B8%AD%E9%80%89%E6%8B%A9%20%E5%8F%91%E8%A1%8C%20-%3E%20%E5%8E%9F%E7%94%9FApp-%E4%BA%91%E6%89%93%E5%8C%85%EF%BC%8C%E6%A0%B9%E6%8D%AE%E6%8F%90%E7%A4%BA%E5%A1%AB%E5%86%99%E5%BA%94%E7%94%A8%E7%9A%84%E7%9B%B8%E5%85%B3%E4%BF%A1%E6%81%AF%E3%80%82" style="text-align:justify;">步骤1: 在 uilder>HBuilder X 中选择 发行 -> 原生App-云打包，根据提示填写应用的相关信息。

APK%E6%96%87%E4%BB%B6%E3%80%82" style="text-align:justify;">步骤2: 等待云打包完成，下载打包后的APK文件。

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

APK%E6%96%87%E4%BB%B6%E5%8F%91%E5%B8%83%E5%88%B0%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8%E5%95%86%E5%BA%97%E6%88%96%E6%89%8B%E5%8A%A8%E5%AE%89%E8%A3%85%E5%88%B0%E6%89%8B%E6%9C%BA%E4%B8%AD%E8%BF%9B%E8%A1%8C%E6%B5%8B%E8%AF%95%E3%80%82" style="text-align:justify;">步骤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


http://www.ppmy.cn/news/1524479.html

相关文章

STM32G474之CALIB输出

STM32G474之CALIB输出

STM32G474之CALIB输出源是1Hz和512Hz的时钟源。通过测试输出波形，计算RTC输入时钟和理论值之间的误差，为“校准”服务的。 1、CALIB输出原理 2、CALIB输出测试程序 #include "RTC.h" #include "stdio.h" //getchar(),putchar(),s…
阅读更多...
【设计模式】装饰模式

【设计模式】装饰模式

1. 不好的代码（冗杂） //业务操作 class Stream{ public：virtual char Read(int number)0;virtual void Seek(int position)0;virtual void Write(char data)0;virtual ~Stream(){} };//主体类 class FileStream: public Stream{ public:virt…
阅读更多...
Sqlserver常用sql

Sqlserver常用sql

1. 数据库和表操作 创建数据库 CREATE DATABASE DatabaseName; 删除数据库 DROP DATABASE DatabaseName; 创建表 CREATE TABLE TableName ( Column1 DataType1, Column2 DataType2, ... ); 删除表 DROP TABLE TableName; 2. 数据操作 插入数据 INSERT INTO TableNam…
阅读更多...
Stable Diffusion绘画 | ControlNet应用-Tile(分块)—tile_colorfix+sharp(分块-固定颜色+锐化)

Stable Diffusion绘画 | ControlNet应用-Tile(分块)—tile_colorfix+sharp(分块-固定颜色+锐化)

单纯使用 Canny 生成的图片，仅能保障图片的外轮廓、构图与人物的神态与原图相似，但颜色相差非常大： 生成图片如下： 因此，开启第二个 ControlNet： 生成的图片，整体颜色就能做到与原图相似了&…
阅读更多...
论文学习笔记 VMamba: Visual State Space Model

论文学习笔记 VMamba: Visual State Space Model

概览 这篇论文的动机源于在计算机视觉领域设计计算高效的网络架构的持续需求。当前的视觉模型如卷积神经网络（CNNs）和视觉Transformer（ViTs）在处理大规模视觉任务时展现出良好的表现，但都存在各自的局限性。特别是&am…
阅读更多...
flink中chainWith() 的详解

flink中chainWith() 的详解

chainWith() 是 Apache Flink 中用于控制算子链合并的另一种方法。它允许开发者显式地将一个算子与前一个算子链起来，形成一个新的算子链，尽管它们可能不会默认链式合并。这为开发者提供了更多控制算子链的能力，使得任务执行的调度和资源管理…
阅读更多...
使用Python实现多个PDF文件的合并

使用Python实现多个PDF文件的合并

使用Python可以很方便地实现多个PDF文件的合并。我们可以使用PyPDF2库来完成这个任务。以下是一个实现PDF合并的Python脚本： import os from PyPDF2 import PdfMergerdef merge_pdfs(input_dir, output_filename):# 创建一个PdfMerger对象merger PdfMerger()# 获取…
阅读更多...
终于！！把企业轻量级数据中台的构建路径理清了！

终于！！把企业轻量级数据中台的构建路径理清了！

一、标准化轻量级数据中台落地探索 尽管数据中台在近些年的热度有所下降，但大中型企业依然对其建设非常重视。企业通过数据中台的搭建，旨在构建统一的数据开发、管理和应用规范，创造标准统一的数据资产，夯实数据互通的基础&#…
阅读更多...
最新文章

Copyright @ 2022~2023