与“按钮”相关的文章 - 𝓍𝑜𝓎𝑜𝓏𝑜.𝓃𝑒𝓉

鸿蒙 HarmonyOS PC 侧载安装第三方 HAP 包教程

目标：在运行 HarmonyOS Next 的华为 MateBook Pro 上侧载安装第三方应用程序。

注：本教程同样适用于在运行 HarmonyOS Next 的华为手机上侧载安装第三方应用程序。

所需准备

一台运行 HarmonyOS Next 的华为 MateBook Pro。
一台 Windows 电脑。
一根数据线：

USB-A to Type-C
或 Type-C to Type-C (确保能将两台电脑连接)。

网络连接：两台电脑需在同一局域网下（用于无线调试连接）。

步骤详解

第一步：鸿蒙 PC (MateBook Pro) 端设置 (启用开发者模式与调试)

连接设备：使用数据线将鸿蒙 MateBook Pro 连接到 Windows 电脑。
打开设置：在鸿蒙 PC 上，进入 设置。
进入关于本机：在设置中，找到并点击 关于本机 或您的 电脑型号。
启用开发者模式：

在“关于本机”界面，找到 软件版本 或 HarmonyOS 版本。
连续点击 软件版本/HarmonyOS 版本 文字 5 次以上。
系统会提示“您已处于开发者模式”或提示重启进入开发者模式。按提示重启电脑（如果需要）。

打开开发者选项：

重启后，回到 设置 -> 系统 -> 开发者选项 (路径可能略有不同，在“系统和更新”或“隐私与安全”下查找)。

启用 USB 调试：

在开发者选项中，找到 USB 调试，将其开启。
首次开启时，可能会弹出提示（连接线后或稍后操作时），点击 允许。
注意提示：系统可能提示“Matebook Pro 上的右上角的 Type-C 口可以进行调试”，确保使用正确的接口连接调试线。如果弹出“始终允许本机调试”选项，勾选并允许。

启用并记录无线调试信息：

在开发者选项中，找到 无线调试，将其开启。
开启后，系统会显示一个 IP 地址和端口号（例如 192.168.x.x:xxxxx）。务必准确记下这个 IP 地址和端口号，后续在 Windows 端连接时必须用到。
至此，鸿蒙 PC 端的准备工作完成。

第二步：Windows 电脑端操作 (使用小白调试助手)

获取工具和 HAP 包：

访问包含 HarmonyOS Next 可用 HAP 包的资源（如 GitHub 上的相关仓库，搜索 “HarmonyOS Next HAP”）。
下载小白调试助手：

在工具仓库中找到 小白调试助手 或类似名称。
点击 Latest (最新版本)。
点击 Download 下载其 Windows 版压缩包（.zip 文件）。

下载目标应用的 HAP 包（以 ClashBox 为例，你也可以使用自己已有的 .hap 文件）：

在应用仓库中找到 ClashBox。
同样点击 Latest -> Download 下载其 HAP 包（.hap 文件）。

准备小白调试助手：

将下载的小白调试助手压缩包解压到一个非中文且无空格路径的文件夹。
进入解压后的文件夹，找到可执行文件。双击运行。根据 Windows SmartScreen 或安全软件提示（若有），选择 更多信息 -> 仍要运行。

登录华为开发者账号 (强烈推荐)：

在小白调试助手界面，找到登录入口（通常在界面顶部或设置中），点击 登录。
使用您的华为开发者账号登录（登录时，您的华为手机可能会收到验证码，或在鸿蒙PC上验证）。
输入验证码，并在授权请求页面点击 允许。登录成功后，界面通常会显示您的账号昵称或ID。
重要： 开发者账号签发的应用证书有效期通常为 6 个月，普通账号仅 14 天。为方便使用，建议申请华为开发者账号。

连接鸿蒙设备：

在小白调试助手主界面，找到 连接设备、添加设备 或类似功能的按钮并点击。
在弹出的连接窗口（通常是输入IP和端口的对话框）中：

输入您在鸿蒙 PC 上 无线调试 功能中记录的 IP 地址。
输入记录的端口号。

点击 确定、连接 或 OK。
连接成功：如果地址和端口输入正确，且鸿蒙 PC 的开发者选项已开启无线调试：

鸿蒙 PC 可能弹出调试请求（“允许调试？”），勾选“始终允许”并点击 允许。
小白调试助手界面会显示“连接成功”或目标设备信息。
（若未弹出提示框但连接成功，也属正常）

第三步：安装第三方 HAP 包

选择 HAP 包：

确保设备已连接成功。
在小白调试助手界面，找到 选择 HAP、加载 HAP、安装应用 或类似按钮（通常在文件菜单或主功能区）。
点击该按钮，浏览文件系统，找到您下载好的目标 HAP 文件（如 ClashBox-xxx.hap），选中并点击 打开。

开始安装：

选择好 HAP 文件后，小白调试助手界面通常会激活 开始调试、安装 或 运行 按钮。
点击 开始调试 或 安装。

等待安装完成：

小白调试助手会开始处理 HAP 包：进行签名、推送到设备并安装。
观察进度条或日志输出，耐心等待直至提示“安装成功”。

第四步：在鸿蒙 PC 上使用安装的应用

安装完成后，返回您的鸿蒙 MateBook Pro。
在桌面或 开始菜单 中，查找您刚刚安装的应用图标（如 ClashBox）。
点击图标即可启动使用该应用。

常见问题处理

签名错误/证书问题：在小白调试助手内寻找 **清理缓存、重置证书、重新登录** 或类似选项。执行后，重新登录开发者账号，再尝试安装。确保登录的是开发者账号。
Java 环境报错：如果小白调试助手提示需要 Java 环境（如 java 命令未找到），按照其提示点击安装，它会引导下载并安装所需的 Java Runtime Environment (JRE)。
连接失败：

检查鸿蒙 PC 的 无线调试 IP 和端口号是否变化（息屏、重启、网络切换可能导致变化），在开发者选项里重新确认并输入。
确保两台电脑在同一局域网。
检查鸿蒙 PC 的 **USB 调试 和 无线调试 是否已开启**。
尝试在鸿蒙 PC 的开发者选项中关闭再重新开启 无线调试，获取新的端口号。

其他报错：查阅小白调试助手官方的使用说明或 GitHub 仓库的 Issue 区寻求解决方案。

xoyozo 3 个月前

4,112

如何给C盘瘦身

以下列出本人所遇到的情况及处理方法，肯定不全，但都有用。

使用系统自带清理工具进行清理
Windows 7 / 8 / 8.1 / 10：在 C 盘上点击右键属性 - 磁盘清理 - 清理系统文件 - 视情况勾选 - 确定
Windows 11：在 C 盘上点击右键属性 - 详细信息 - 临时文件 - 视情况勾选 - 确定
关闭“传递优化”
设置 - Windowx 更新 - 高级选项 - 传递优化，关闭“允许从其他设备下载”
其实前面说到的清理临时文件中已经包含了“传递优化文件”，所以这里按个人喜好选择是否关闭。
更改虚拟内存路径
可以将虚拟内存路径更改为非系统盘，但建议是固态硬盘。
关闭系统还原
当遇到系统问题时，如果你喜欢重装系统，而不是系统还原，那么可以关闭它。
更改桌面、文档、下载等用户文件夹的位置
将这些目录路径更改到非系统，但仍然建议是固态硬盘。以 Windows 11 的桌面目录为例：
打开资源管理器 - 主文件夹，右键点击“桌面”属性，切换到“位置”，移动。
将软件安装到其它盘
有些电脑管理软件有软件迁移功能，但我还是建议先卸载软件，再安装到其它盘符。
将软件文档路径更改到其它盘
如果不想把软件安装到其它盘（譬如只有C盘是固态硬盘），那么可以将文档路径更改到其它盘，譬如：
微信：☰ - 设置 - 文件管理 - 更改
QQ：☰ - 设置 - 存储管理 - 更改存储路径（注意是聊天消息那个）
企业微信：头像 - 设置 - 存储管理
钉钉：头像 - 设置与隐私 - 通用 - 缓存目录
千牛：设置 - 数据存储文件夹
清理浏览器缓存
Chrome：┇ - 设置 - 隐私与安全 - 删除浏览数据
Edge：… - 设置 - 隐私、搜索和服务 - 删除浏览记录 - 选择要清除的内容
Firefox：☰ - 设置 - 隐私与安全 - 历史记录 - 清除历史记录
VMware 虚拟机
在已安装的镜像上点击右键 - 管理 - 清理磁盘
把已安装的镜像复制到其它磁盘，再添加到 VMware 中，删除原镜像文件。
更改 Navicat 数据库备份目录
如果你的 Navicat 启用了自动运行的备份任务，那么可以更改备份路径。
在连接上点击右键编辑连接，切换到高级，更改设置位置。
SQL Server 数据库文件瘦身
若 SQL Server 数据目录（C:\Program Files\Microsoft SQL Server\MSSQL16.MSSQLSERVER\MSSQL\DATA）中有很多较大的数据库日志文件（.ldf），可以按需采取以下措施：
使用 SSMS 连接到你的 SQL Server 实例；数据库恢复模式设置为“简单”；右键点击要压缩的数据库，选择“任务”->“收缩”->“文件”，选择“日志”，在“释放未使用的空间前重新组织页”一项中设置为 0MB，然后点击“确定”按钮。

最后推荐一款免费软件 TreeSize Free，可以查看磁盘中各目录和文件占用空间大小，小白不要乱删文件哦，删错了可就得重装系统了。

xoyozo 8 个月前

911

连接 Filezilla Server 时提示“服务器的证书未知。请小心验证证书以确信该服务器可信任。”

解决办法：登录服务器，打开 Administrator FileZilla Server，菜单中选择 Server，Configure，点击左侧的 Administration，切换到 Connection security 页，点击 Generate new 按钮，OK。

Protocols settings 的 FTP and FTP over TLS(FTPS) 中同样也需要点击 Generate new。

xoyozo 9 个月前

981

小鹅通 Windows 版看不了直播

先在网页版上找到并进入这个直播间，再点 Windows 版客户端上的刷新按钮，就会显示这个直播了。

xoyozo 11 个月前

1,156

微信网页开发 JS-SDK 中的获取地理位置接口也有 fail 和 cancel 回调函数

微信网页开发 JS-SDK 官方文档介绍的获取地理位置接口示例是这样的：

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    var speed = res.speed; // 速度，以米/每秒计
    var accuracy = res.accuracy; // 位置精度
  }});

实际上是这样的：

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  success: function (res) {
    // 网页位置信息授权点击“确定”按钮，以及允许后继续获取定位信息
  },
  fail: function (err) {
    // 获取定位信息失败（譬如：网页位置信息已授权，但操作系统定位已关闭）
  },
  cancel: function (err) {
    // 网页位置信息授权点击“拒绝”按钮
  }
});

顺便提一下如何关闭网页授权：

进入网页使用 JS-SDK 的公众号（可以在授权弹框中看到服务号名称），点击右上角人形图标，继续点击右上角三个点图标，选择设置，关闭“位置信息”。

授权框.png 公众号设置.png

xoyozo 1 年前

1,230

使用 SignalR 进行实时 ASP.NET MVC

SignalR 是一个开源的实时通信库，用于构建实时 Web 应用程序。它提供了一个简单的 API，可以在客户端和服务器之间建立持久连接，以便实时地推送数据。

与传统的 WebSocket 相比，SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别：

支持多种传输方式：SignalR 可以使用多种传输方式，包括 WebSocket、Server-Sent Events（SSE）、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力，即使某些浏览器不支持 WebSocket，也可以使用其他传输方式。
自动处理连接管理：SignalR 管理连接的生命周期，包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑，简化了开发人员的工作。
服务器端推送：SignalR 允许服务器端主动推送消息给客户端，而不需要客户端发起请求。这使得实时通信变得更加高效和实时，适用于聊天应用、实时监控等场景。
跨平台支持：SignalR 可以在多个平台上使用，包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。

微软官方提供了针对 ASP.NET Core Web 应用（Razor 页面）的详细教程，这里给出 MVC 版本入门教程。

最终将创建一个正常运行的聊天应用：

创建 Web 应用项目

添加 SignalR 客户端库

在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。

在“添加客户端库”对话框中：

“提供程序”选择“unpkg”
“库”，请输入 @microsoft/signalr@latest。
选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。
点击“安装” 。

创建 SignalR Hubs 类

using Microsoft.AspNetCore.SignalR;

/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
        /// <summary>
        /// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息
        /// </summary>
    public async Task SendMessage(string user, string message)
    {
        // Clients.All 向所有的客户端发送消息
        // ReceiveMessage 是客户端监听的方法
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。

配置 SignalR

打开 Program.cs，添加注入：

builder.Services.AddSignalR();

添加路由：

app.MapHub<ChatHub>("/chatHub");

添加 SignalR 客户端代码

视图页面：

<div class="container">
    <div class="row p-1">
        <div class="col-1">用户</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">消息</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="发送消息" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>

chat.js 文件：

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // 修改此处时应注意脚本注入问题
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

完成。在线示例：https://xoyozo.net/Demo/SignalRDemo

xoyozo 2 年前

2,581

.NET 桌面应用程序如何实时更新界面

本文由 ChatGTP 3.5 提供

在 .NET C# 桌面应用程序中，你可以使用委托和事件来实现在窗体页面处理事务过程中实时更新界面。下面是一个示例，展示了在不同情况下如何更新主界面：

首先，在窗体页面中定义一个委托和一个事件，用于更新界面：

public delegate void UpdateUIHandler(string msg);
public event UpdateUIHandler UpdateUIEvent;

然后，在窗体的构造函数中订阅事件，并在事件处理程序中更新界面：

public Form1()
{
    InitializeComponent();
    UpdateUIEvent += UpdateUI;
}

private void UpdateUI(string msg)
{
    if (InvokeRequired)
    {
        Invoke(new UpdateUIHandler(UpdateUI), msg);
    }
    else
    {
        // 在这里更新界面
        label1.Text = msg;
    }
}

现在，你可以在窗体页面的任何地方调用 UpdateUIEvent 来触发更新界面的事件。例如，在按钮点击事件中：

private void button1_Click(object sender, EventArgs e)
{
    // 处理事务过程中实时更新界面
    string msg = "处理事务中...";
    UpdateUIEvent?.Invoke(msg);

    // 异步调用一个类方法中的方法，并在方法内部实时更新主界面
    Task.Run(() =>
    {
        MyClass myClass = new MyClass();
        myClass.LongRunningMethod(UpdateUIEvent);
    });
}

在上面的示例中，MyClass 是一个自定义的类，其中的 LongRunningMethod 是一个耗时的方法。在这个方法内部，你可以通过传递 UpdateUIEvent 来实时更新主界面：

public class MyClass
{
    public void LongRunningMethod(UpdateUIHandler updateUI)
    {
        // 处理事务过程中实时更新界面
        string msg = "处理事务中...";
        updateUI?.Invoke(msg);

        // 其他耗时操作...
    }
}

通过以上示例，你可以在窗体页面处理事务过程中实时更新界面，并且在异步调用的方法内部也能实时更新主界面。记得在更新界面时使用 Invoke 方法，以确保在主线程上更新界面，避免跨线程访问 UI 的问题。

xoyozo 2 年前

2,791

在 Vue 中，将一个布尔对象双向绑定到 radio 输入上时，如何确保 radio 的 value 属性仍然保持布尔类型

在 Vue 中，当你将一个布尔对象双向绑定到 radio 输入上时，确保 radio 的 value 属性仍然保持布尔类型是很重要的。如果 value 属性是字符串，那么 Vue 会将其解释为字符串而不是布尔值。以下是一个示例，演示如何正确地将布尔对象双向绑定到 radio 按钮，并确保 value 属性保持布尔类型：

<template>
  <div>
    <input type="radio" v-model="myBoolean" :value="true" /> True
    <input type="radio" v-model="myBoolean" :value="false" /> False
    <p>myBoolean: {{ myBoolean }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myBoolean: false, // 布尔对象
    };
  },
};
</script>

在这个示例中，我们使用了 v-model 指令将 myBoolean 属性与两个 radio 按钮进行了双向绑定。通过将 value 属性设置为 true 和 false，我们确保了 myBoolean 属性保持布尔类型。

这样，当用户选择其中一个 radio 按钮时，myBoolean 属性将保持布尔值而不是字符串。确保 value 属性的类型与要绑定的数据类型匹配，以确保绑定的数据类型保持一致。

同样的问题出现在 select 上也是一样：

<select v-model="cat.colorId" required>
    <option :value="null">不选择</option>
    <option v-for="color in colors" :value="color.id">{{color.name}}</option>
</select>