博客 (32)

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

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

所需准备

1. 一台运行 HarmonyOS Next 的华为 MateBook Pro。

2. 一台 Windows 电脑。

3. 一根数据线：

• USB-A to Type-C

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

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

步骤详解

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

1. 连接设备： 使用数据线将鸿蒙 MateBook Pro 连接到 Windows 电脑。

2. 打开设置： 在鸿蒙 PC 上，进入 设置。

3. 进入关于本机： 在设置中，找到并点击 关于本机 或您的 电脑型号。

4. 启用开发者模式：

• 在“关于本机”界面，找到 软件版本 或 HarmonyOS 版本。

• 连续点击 软件版本/HarmonyOS 版本 文字 5 次以上。

• 系统会提示“您已处于开发者模式”或提示重启进入开发者模式。按提示重启电脑（如果需要）。

5. 打开开发者选项：

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

6. 启用 USB 调试：

• 在开发者选项中，找到 USB 调试，将其开启。

• 首次开启时，可能会弹出提示（连接线后或稍后操作时），点击 允许。

• 注意提示：系统可能提示“Matebook Pro 上的右上角的 Type-C 口可以进行调试”，确保使用正确的接口连接调试线。如果弹出“始终允许本机调试”选项，勾选并允许。

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

• 在开发者选项中，找到 无线调试，将其开启。

• 开启后，系统会显示一个 IP 地址和端口号（例如 192.168.x.x:xxxxx）。务必准确记下这个 IP 地址和端口号，后续在 Windows 端连接时必须用到。

• 至此，鸿蒙 PC 端的准备工作完成。

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

1. 获取工具和 HAP 包：

• 访问包含 HarmonyOS Next 可用 HAP 包的资源（如 GitHub 上的相关仓库，搜索 “HarmonyOS Next HAP”）。

• 下载小白调试助手：

• 在工具仓库中找到 小白调试助手 或类似名称。

• 点击 Latest (最新版本)。

• 点击 Download 下载其 Windows 版压缩包（.zip 文件）。

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

• 在应用仓库中找到 ClashBox。

• 同样点击 Latest -> Download 下载其 HAP 包（.hap 文件）。

2. 准备小白调试助手：

• 将下载的小白调试助手压缩包解压到一个非中文且无空格路径的文件夹。

• 进入解压后的文件夹，找到可执行文件。双击运行。根据 Windows SmartScreen 或安全软件提示（若有），选择 更多信息 -> 仍要运行。

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

• 在小白调试助手界面，找到登录入口（通常在界面顶部或设置中），点击 登录。

• 使用您的华为开发者账号登录（登录时，您的华为手机可能会收到验证码，或在鸿蒙PC上验证）。

• 输入验证码，并在授权请求页面点击 允许。登录成功后，界面通常会显示您的账号昵称或ID。

• 重要： 开发者账号签发的应用证书有效期通常为 6 个月，普通账号仅 14 天。为方便使用，建议申请华为开发者账号。

4. 连接鸿蒙设备：

• 在小白调试助手主界面，找到 连接设备、添加设备 或类似功能的按钮并点击。

• 在弹出的连接窗口（通常是输入IP和端口的对话框）中：

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

• 输入记录的 端口号。

• 点击 确定、连接 或 OK。

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

• 鸿蒙 PC 可能弹出调试请求（“允许调试？”），勾选“始终允许”并点击 允许。

• 小白调试助手界面会显示“连接成功”或目标设备信息。

• （若未弹出提示框但连接成功，也属正常）

第三步：安装第三方 HAP 包

1. 选择 HAP 包：

• 确保设备已连接成功。

• 在小白调试助手界面，找到 选择 HAP、加载 HAP、安装应用 或类似按钮（通常在文件菜单或主功能区）。

• 点击该按钮，浏览文件系统，找到您下载好的目标 HAP 文件（如 ClashBox-xxx.hap），选中并点击 打开。

2. 开始安装：

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

• 点击 开始调试 或 安装。

3. 等待安装完成：

• 小白调试助手会开始处理 HAP 包：进行签名、推送到设备并安装。

• 观察进度条或日志输出，耐心等待直至提示“安装成功”。

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

• 安装完成后，返回您的鸿蒙 MateBook Pro。

• 在桌面或 开始菜单 中，查找您刚刚安装的应用图标（如 ClashBox）。

• 点击图标即可启动使用该应用。

常见问题处理

• 签名错误/证书问题：在小白调试助手内寻找 **清理缓存、重置证书、重新登录** 或类似选项。执行后，重新登录开发者账号，再尝试安装。确保登录的是开发者账号。

• Java 环境报错：如果小白调试助手提示需要 Java 环境（如 java 命令未找到），按照其提示点击安装，它会引导下载并安装所需的 Java Runtime Environment (JRE)。

• 连接失败：

• 检查鸿蒙 PC 的 无线调试 IP 和端口号是否变化（息屏、重启、网络切换可能导致变化），在开发者选项里重新确认并输入。

• 确保两台电脑在同一局域网。

• 检查鸿蒙 PC 的 **USB 调试 和 无线调试 是否已开启**。

• 尝试在鸿蒙 PC 的开发者选项中关闭再重新开启 无线调试，获取新的端口号。

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

今天忘了带鼠标，正巧笔记本电脑的触摸板驱动坏了，一时也用不了，所以想到用 iPhone 当作电脑的触控板来用。电脑操作系统是 Windows。

一、电脑上下载并安装 Remote Helper（此步需要会使用纯键盘来操作电脑，常用的键是 TAB、方向键、回车键）

二、手机上 App Store 中搜索并获取 鼠标·键盘

电脑和手机需要连接同一局域网，如果没有局域网，可以将电脑连接 iPhone 的热点。

打开 App，搜索 PC，授权，就可以控制光标了。

如果电脑未显示光标，尝试双击 CTRL 键来确定当前光标的位置，前提是安装了 PowerToys。

微信网页开发 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 的公众号（可以在授权弹框中看到服务号名称），点击右上角人形图标，继续点击右上角三个点图标，选择设置，关闭“位置信息”。

不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。

方式一、监听 paste 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
    input.value = event.clipboardData.getData('text');
});

这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。

经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。

方式二、监听 keydown 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        input.value = clipboardData.getData('text');
    }
});

测试发现报错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getData')

Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')

看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        window.navigator.clipboard.readText().then(text => {
            input.value = text;
        });
    }
});

缺点是需要用户授权：

仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。

以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。

兼容更多时间格式，并调整时区

<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：

const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
    input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}

以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。

当然如果希望支持中文的年月日，可以先用正则表达式替换一下：

text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");

处理页面上的所有 <input type="date" />

const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
    input.addEventListener(...);
});

封装为独立域

避免全局变量污染，使用 IIFE 函数表达式：

(function() {
  // 将代码放在这里
})();

或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。

在 Vue 中使用

如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：

<div id="app">
    <input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
    {{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data: function () {
            return {
                a: null,
            }
        },
        methods: {
            fn_pasteToDateInput: function (event) {
                const text = event.clipboardData.getData('text');
                const parsedDate = new Date(text);
                if (!isNaN(parsedDate.getTime())) {
                    const att = event.target.getAttribute('data-model');
                    this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
                }
            },
        }
    });
    const vm = app.mount('#app');
</script>

示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。 

如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值

let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
    target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);

错误 Web 部署任务失败。

在远程计算机上处理请求时出错。

无法执行此操作。请与服务器管理员联系，检查授权和委派设置。

原因：WDeployAdmin 与 WDeployConfigWriter 这两个用户密码过期。

解决方法：

第一步，打开用户管理，重新设置这两个用户的密码

并在“属性”窗口勾选“密码永不过期”

第二步，打开 IIS 管理器中的“管理服务委派”

找到所有与这两个用户有关的项，右键“编辑”

点击左下角的“设置”按钮，填入与原来一致的用户名与第一步新设置的密码

全部设置完成后，即可正常发布项目。

通过 nuget 安装 UEditorNetCore

从 UEditor 官网 下载最新的包 ueditorx_x_x_x-utf8-net.zip

解压包，并复制到项目的 wwwroot/lib 目录下，删除 net 目录。

根据 UEditorNetCore 官方的使用说明进行操作

步骤中，控制器 UEditorController 接替原 controller.ashx 的功能，用于统一处理上传逻辑

原 config.json 复制到项目根目录，用于配置上传相关设置（若更改文件名和路径在 services.AddUEditorService() 中处理）。

个人喜欢将 xxxPathFormat 值改为：upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}，方便日后迁移附件后进行批量替换。

记得配置 catcherLocalDomain 项。

上传相关的身份验证和授权控制请在 UEditorController 中处理，如：

public void Do()
{
    if (用户未登录) { throw new System.Exception("请登录后再试"); }
    _ue.DoAction(HttpContext);
}

如果图片仅仅上传到网站目录下，那么这样配置就结束了，如果要上传到阿里云 OSS 等第三方图床，那么继续往下看。

因 UEditorNetCore 虽然实现了上传到 FTP 和 OSS 的功能，但未提供配置相关的账号信息的途径，所以只能（1）重写 action，或（2）下载 github 的源代码，将核心项目加入到您的项目中进行修改。

重写 action 不方便后期维护，这里记录修改源码的方式。

将源码改造为可配置账号的上传到 OSS 的功能，具体步骤如下：

1. 将 Consts.cs 从项目中排除。

2. 打开 Handlers/UploadHandler.cs，找到 UploadConfig 类，将

   FtpUpload 改为 OssUpload，

   FtpAccount 改为 OssAccessKeyId，

   FtpPwd 改为 OssAccessKeySecret，

   FtpIp 改为 OssAccessEndpoint，

   再添加一个属性 OssBucketName。

3. 打开 Handlers/UploadHandler.cs，找到 Process() 方法， 

   将 UploadConfig.FtpUpload 改为 UploadConfig.OssUpload，

   将 Consts.AliyunOssServer.* 改为 UploadConfig.Oss*。

4. 打开 Handlers/CrawlerHandler.cs，找到 Fetch() 方法，

   将 Config.GetValue<bool>("catcherFtpUpload") 改为 Config.GetValue<bool>("OssUpload")，

   将 Consts.AliyunOssServer.* 改为 Config.GetString("Oss*")。

5. 打开 UEditorActionCollection.cs，找到 UploadImageAction，将

   FtpUpload = Config.GetValue<bool>("imageFtpUpload"),
   FtpAccount = Consts.ImgFtpServer.account,
   FtpPwd = Consts.ImgFtpServer.pwd,
   FtpIp = Consts.ImgFtpServer.ip,

   替换为

   OssUpload = Config.GetValue<bool>("OssUpload"),
   OssAccessKeyId = Config.GetString("OssAccessKeyId"),
   OssAccessKeySecret = Config.GetString("OssAccessKeySecret"),
   OssAccessEndpoint = Config.GetString("OssAccessEndpoint"),
   OssBucketName = Config.GetString("OssBucketName"),

   其余 3 个 Action（UploadScrawlAction、UploadVideoAction、UploadFileAction）按同样的方式修改。

   在所有创建 UploadHandler 对象时补充添加 SaveAbsolutePath 属性。

6. 打开 config.json，添加相关配置项（注：配置文件中的 *FtpUpload 全部废弃，统一由 OssUpload 决定）

   "OssUpload": true,
   "OssAccessEndpoint": "",
   "OssAccessKeyId": "",
   "OssAccessKeySecret": "",
   "OssBucketName": "",

   将 xxxUrlPrefix 的值改为 OSS 对应的 CDN 网址（以 / 结尾，如：//cdn.xoyozo.net/）。

其它注意点：

• 若使用 UEditorNetCore github 提供的源代码类库代替 nuget，且使用本地存储，那么需要将 Handlers 目录中与定义 savePath 相关的代码（查找  var savePath）替换成被注释的行
  

这个现象在国产浏览器上使用极速内核时出现，原因是百度编辑器上传图片功能通过 <form /> 提交到 <iframe /> 时，因跨域导致 cookie 丢失。

ASP.NET 的 ASP.NET_SessionId 默认的 SameSite 属性值为 Lax，将其设置为 None 即可：

protected void Session_Start(object sender, EventArgs e)
{
    // 解决在部分国产浏览器上使用百度编辑器上传图片时（iframe），未通过 cookie 传递 ASP.NET_SessionId 的问题
    string ua = Request.UserAgent ?? "";
    var browsers = new string[] { "QQBrowser/" /*, "Chrome/" 不要直接设置 Chrome，真正的 Chrome 会出现正常页面不传递 Cookie 的情况 */ };
    bool inWeixin = ua.Contains("MicroMessenger/"); // 是否在微信中打开（因微信PC端使用QQ浏览器内核，下面的设置会导致其网页授权失败）
    if (browsers.Any(c => ua.Contains(c)) && !inWeixin)
    {
        Response.Cookies["ASP.NET_SessionId"].SameSite = SameSiteMode.None;
    }
}

以上代码加入到 Global.asax 的 Session_Start 方法中，或百度编辑器所在页面。

注意一：SameSite=None 时会将父页面的 cookie 带入到 iframe 子页的请求中，从而导致 cookie 泄露，请确保项目中无任何站外引用，如网站浏量统计器、JS组件远程CDN等！

注意二：微信PC版的内嵌浏览器使用QQ浏览器内核，以上代码会导致其微信网页授权不能正常执行。

ASP.NET MVC 使用 Authorize 过滤器验证用户登录。Authorize 过滤器首先运行在任何其它过滤器或动作方法之前，主要用来做登录验证或者权限验证。

示例：使用 Authorize 过滤器实现简单的用户登录验证。

1、创建登录控制器 LoginController

/// <summary>
/// 登录控制器
/// </summary>
[AllowAnonymous]
public class LoginController : Controller
{
    /// <summary>
    /// 登录页面
    /// </summary>
    public ActionResult Index()
    {
        return View();
    }
 
    /// <summary>
    /// 登录
    /// </summary>
    [HttpPost]
    public ActionResult Login(string loginName, string loginPwd)
    {
        if (loginName == "admin" && loginPwd == "123456")
        {
            // 登录成功
            Session["LoginName"] = loginName;
            return RedirectToAction("Index", "Home");
        }
        else
        {
            // 登录失败
            return RedirectToAction("Index", "Login");
        }
    }
 
    /// <summary>
    /// 注销
    /// </summary>
    public ActionResult Logout()
    {
        Session.Abandon();
        return RedirectToAction("Index", "Login");
    }
}

注意：在登录控制器 LoginController 上添加 AllowAnonymous 特性，该特性用于标记在授权期间要跳过 AuthorizeAttribute 的控制器和操作。

2、创建登录页面

@{
    ViewBag.Title = "登录页面";
    Layout = null;
}
 
<h2>登录页面</h2>
 
<form action='@Url.Action("Login","Login")' id="form1" method="post">
    用户：<input type="text" name="loginName" /><br />
    密码：<input type="password" name="loginPwd" /><br />
    <input type="submit" value="登录">
</form>

效果图：

3、创建主页控制器 LoginController

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // 获取当前登录用户
        string loginName = Session["LoginName"].ToString();
        ViewBag.Message = "当前登录用户：" + loginName;
        return View();
    }
}

4、创建主页页面

@{
    ViewBag.Title = "Index";
    Layout = null;
}
 
<h2>Index</h2>
<h3>@ViewBag.Message</h3>
<a href="@Url.Action("Logout","Login")">注销</a>

效果图：

5、创建授权过滤器 LoginAuthorizeAttribute 类

创建 Filter 目录，在该目录下创建授权过滤器 LoginAuthorizeAttribute 类，继承 AuthorizeAttribute。

using System.Web.Mvc;
 
namespace MvcApp.Filter
{
    /// <summary>
    /// 授权过滤器
    /// </summary>
    public class LoginAuthorizeAttribute : AuthorizeAttribute
    {
        public override void OnAuthorization(AuthorizationContext filterContext)
        {
            // 判断是否跳过授权过滤器
            if (filterContext.ActionDescriptor.IsDefined(typeof(AllowAnonymousAttribute), true)
               || filterContext.ActionDescriptor.ControllerDescriptor.IsDefined(typeof(AllowAnonymousAttribute), true))
            {
                return;
            }
 
            // 判断登录情况
            if (filterContext.HttpContext.Session["LoginName"] == null || filterContext.HttpContext.Session["LoginName"].ToString()=="")
            {
                //HttpContext.Current.Response.Write("认证不通过");
                //HttpContext.Current.Response.End();
 
                filterContext.Result = new RedirectResult("/Login/Index");
            }
        }
    }
}

通常 Authorize 过滤器也是在全局过滤器上面的，在 App_Start 目录下的 FilterConfig 类的 RegisterGlobalFilters 方法中添加：

using System.Web;
using System.Web.Mvc;
using MvcApp.Filter;
 
namespace MvcApp
{
    public class FilterConfig
    {
        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
 
            // 添加全局授权过滤器
            filters.Add(new LoginAuthorizeAttribute());
        }
    }
}

Global.asax 下的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
 
namespace MvcApp
{
    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

xoyozo：暂时没有按区域（Area）来统一配置的方法，建议加在 Controller 上。https://stackoverflow.com/questions/2319157/how-can-we-set-authorization-for-a-whole-area-in-asp-net-mvc

附 ASP.NET Form 相关：

400：

Response.StatusCode = 400;
Response.Write("错误提示");
Response.End();

情况：

马甲 App 添加链接 a（域名 A），该页面跳转至页面 b（域名 B），信任域名添加 B。

现象：

无法获取 token，即授权不成功。

原因：

马甲 App 是判断首次打开的域名（即本例中的域名 A）是否在信任域名中。

解决：

将上述两个域名都填到信任域名中，或直接添加链接 b，不使用链接 a 作跳转。

另外提醒：

信任域名是真实的 token，合作域名是临时的 token，区别是权限高低；

配置完域名白名单后，应该重启 App 再测试，因为客户端有缓存。