| LigerShark.WebOptimizer.Core | BuildBundlerMinifier | |
| 特点 | 在运行时捆绑和缩小 CSS 和 JavaScript 文件 具有完整的服务器端和客户端缓存，以确保高性能 可禁用缩小 支持使用通配模式 标记帮助程序与缓存破坏 支持内联 支持 SCSS | 将 CSS、JavaScript 或 HTML 文件捆绑到单个输出文件中 保存源文件会自动触发重新捆绑 支持通配模式 支持 CI 方案的 MSBuild 支持 缩小单个或捆绑的 CSS、JavaScript 和 HTML 文件 每种语言的缩小选项是可定制的 打开生成的文件时显示水印 任务运行程序资源管理器集成 命令行支持 快捷更新解决方案中所有捆绑包 禁止生成输出文件 转换为 Gulp |
| 注入（Program.cs） | services.AddWebOptimizer(); app.UseWebOptimizer(); | |
| 指定捆绑的项目 | 在运行时自动缩小 css 和 js，也可以在 AddWebOptimizer 中自定义。默认情况下，生成的文件不会保存到磁盘，而是保存在缓存中。 | 手动编辑 bundleconfig.json 文件来指定需要合并和缩小的文件 |
| 功能配置 | | 在 bundleconfig.json 捆绑时设置 |
| 热重载（在开发模式中保存文件自动更新浏览器效果） | VS 安装扩展，方法：菜单 - 扩展 - 管理扩展 - 联机 搜索“Bundler & Minifier” | |
| 其它资料 | ASP.NET 官方文档 |
原生判断
window.addEventListener('scroll', scroll)
function scroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop === 0) {
console.log('滚动到顶了');
}
if (scrollTop + clientHeight >= scrollHeight - 100) {
console.log('滚动到底了');
}
}
window.removeEventListener('scroll', scroll) // 移除滚动事件scrollTop：文档在可视区上沿的位置距离文档顶部的距离
clientHeight：可视区的高度
scrollHeight：文档总高度
100：用于在滚动到底部之前提前加载内容（如瀑布流），提高用户体验，请自行修改数值（建议不小于 2 像素，以规避在部分浏览器上因获得值为小数时可能无法触发的问题）
jQuery 判断
window.addEventListener('scroll', scroll)
function scroll() {
const doc_height = $(document).height();
const scroll_top = $(document).scrollTop();
const window_height = $(window).height();
if (scroll_top === 0) {
console.log('滚动到顶了');
} else if (scroll_top + window_height >= doc_height - 100) {
console.log('滚动到底了');
}
}User-Agent 字符串不会进行更新以区分 Windows 11 和 Windows 10。
但我们可以使用 JS 进行客户端判断是否为 Windows 11：
navigator.userAgentData.getHighEntropyValues(["platformVersion"])
.then(ua => {
if (navigator.userAgentData.platform === "Windows") {
const majorPlatformVersion = parseInt(ua.platformVersion.split('.')[0]);
if (majorPlatformVersion >= 13) {
console.log("Windows 11 or later");
}
else if (majorPlatformVersion > 0) {
console.log("Windows 10");
}
else {
console.log("Before Windows 10");
}
}
else {
console.log("Not running on Windows");
}
});支持客户端提示 User-Agent 浏览器：
| 浏览器 | 通过客户端提示 User-Agent 区别？ |
|---|---|
| Microsoft Edge 94 及以上 | 是 |
| Chrome 95 及以上 | 是 |
| Opera | 是 |
| Firefox | 否 |
| Internet Explorer 11 | 否 |
错误 TS5055 无法写入文件“***.js”，因为它会覆盖输入文件。
添加 tsconfig.json 文件有助于组织包含 TypeScript 和 JavaScript 文件的项目。有关详细信息，请访问 https://aka.ms/tsconfig。
检查“输出”窗口，找到“error”的行，并修复该错误。
一种可能的情况是，使用了 vue3 的 computed 计算属性。原因未知，尝试又定义了一个变量并使用 watch 侦听原变量来给它赋值，同样报错。
本文以 vue 3 为例，vue 2 同理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clipboard.js 在 vue.js 中使用</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">
{{item}}
<button class="btn-cp" :value="item">复制</button>
</li>
</ul>
</div>
<script src="//xxx/vue/core-3.x.x/vue.global.js"></script>
<script src="//xxx/clipboard/clipboard.js-2.x.x/dist/clipboard.min.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
list: ["aaa", "bbb", "ccc"]
}
},
mounted: function () {
var clipboard = new ClipboardJS('.btn-cp', {
text: function (trigger) {
return trigger.getAttribute('value');
}
});
clipboard.on('success', function (e) {
alert('已复制“' + e.text + '”到粘贴板');
e.clearSelection();
});
}
});
const vm = app.mount('#app');
</script>
</body>
</html>第一步，创建用户和 AccessKey
登录阿里云控制台后，从头像处进入 AccessKey 管理
“开始使用子用户 AccessKey”
点击“创建用户”，填写用户名（本文以 oss-bbs 为例），并勾选“Open API 调用访问”
点击确定创建成功，可以看到 AccessKey ID 和 AccessKey Secret
第二步，创建权限策略
在阿里云控制台左侧菜单“RAM 访问控制”中展开“权限管理”，选择“权限策略”
点击“创建权限策略”，切换到“脚本编辑”
输入以下策略文档（JSON 格式）
{
"Version": "1",
"Statement": [
{
"Effect": "Allow",
"Action": [
"oss:ListBuckets",
"oss:GetBucketStat",
"oss:GetBucketInfo",
"oss:GetBucketAcl"
],
"Resource": "acs:oss:*:*:*"
},
{
"Effect": "Allow",
"Action": [
"oss:Get*",
"oss:Put*",
"oss:List*",
"oss:DeleteObject"
],
"Resource": "acs:oss:*:*:bbs"
},
{
"Effect": "Allow",
"Action": [
"oss:Get*",
"oss:Put*",
"oss:List*",
"oss:DeleteObject"
],
"Resource": "acs:oss:*:*:bbs/*"
}
]
}脚本中第一段表示允许用户登录，第二段表示允许操作 Bucket，第三段表示允许操作 Bucket 内的文件对象。
示例中的 bbs 是 Bucket Name，请修改为自己的 Bucket 名称。
点击下一步，填写名称，确定即可。
第三步，添加用户权限
转到“用户”页面，在刚才创建的用户行“添加权限”
切换到“自定义策略”，将上一步创建的权限策略添加到右侧“已选择”区
确定。
相关信息：
You have no right to access this object because of bucket acl.
本文使用 ASP.NET 6 版本 Senparc.Weixin.Sample.MP 示例项目改造。
第一步 注册多公众号
方法一：打开 appsettings.json 文件，在 SenparcWeixinSetting 节点内添加数组节点 Items，该对象类型同 SenparcWeixinSetting。
//Senparc.Weixin SDK 设置
"SenparcWeixinSetting": {
"IsDebug": true,
"Token": "",
"EncodingAESKey": "",
"WeixinAppId": "",
"WeixinAppSecret": "",
"Items": [
{
"IsDebug": true,
"Token": "a",
"EncodingAESKey": "a",
"WeixinAppId": "a",
"WeixinAppSecret": "a"
},
{
"IsDebug": true,
"Token": "b",
"EncodingAESKey": "b",
"WeixinAppId": "b",
"WeixinAppSecret": "b"
}
]
}方法二：修改 Program.cs 文件，在 UseSenparcWeixin 方法中注册多个公众号信息。
var registerService = app.UseSenparcWeixin(app.Environment,
null /* 不为 null 则覆盖 appsettings 中的 SenparcSetting 配置*/,
null /* 不为 null 则覆盖 appsettings 中的 SenparcWeixinSetting 配置*/,
register => { /* CO2NET 全局配置 */ },
(register, weixinSetting) =>
{
//注册公众号信息（可以执行多次，注册多个公众号）
//register.RegisterMpAccount(weixinSetting, "【盛派网络小助手】公众号");
foreach (var mp in 从数据库或配置文件中获取的公众号列表)
{
register.RegisterMpAccount(new SenparcWeixinSetting
{
//IsDebug = true,
WeixinAppId = mp.AppId,
WeixinAppSecret = mp.AppSecret,
Token = mp.Token,
EncodingAESKey = mp.EncodingAeskey,
}, mp.Name);
}
});完成后，我们可以从 Config.SenparcWeixinSetting.Items 获取这些信息。
第二步 接入验证与消息处理
打开 WeixinController 控制器，将构造函数改写为：
public WeixinController(IHttpContextAccessor httpContextAccessor)
{
AppId = httpContextAccessor.HttpContext!.Request.Query["appId"];
var MpSetting = Services.MPService.MpSettingByAppId(AppId);
Token = MpSetting.Token;
EncodingAESKey = MpSetting.EncodingAESKey;
}示例中 Services.MPService.MpSettingByAppId() 方法实现从 Config.SenparcWeixinSetting.Items 返回指定 appId 的公众号信息。
为使 IHttpContextAccessor 注入生效，打开 Program.cs，在行
builder.Services.AddControllersWithViews();下方插入
builder.Services.AddHttpContextAccessor();这样，我们就可以在构造函数中直接获取地址栏中的 appId 参数，找到对应的公众号进行消息处理。
第三步 消息自动回复中的 AppId
打开 CustomMessageHandler.cs，将
private string appId = Config.SenparcWeixinSetting.MpSetting.WeixinAppId;
private string appSecret = Config.SenparcWeixinSetting.MpSetting.WeixinAppSecret;替换为：
private string appId = null!;
private string appSecret = null!;并在构造函数中插入
appId = postModel.AppId;
appSecret = Services.MPService.MpSettingByAppId(postModel.AppId).WeixinAppSecret;这样，本页中使用的 appId / appSecret 会从 postModel 中获取，而非默认公众号。postModel 已在 WeixinController 中赋值当前的 appId。
改造后，我们可以在 OnTextRequestAsync() 等处理消息的方法中可以判断 appId 来处理不同的消息。
第四步 其它功能和接口
其它功能和接口均可用指定的 AppId 和对应的 AppSecret 进行调用。
[
{
"outputFileName": "wwwroot/js/Admin/Blog/List.js",
"inputFiles": [
"Areas/Admin/Views/Blog/List.cshtml.js"
]
}
]JS 源文件在视图目录，独立于 .cshtml 文件，又折叠于 .cshtml 文件。
输出目录在 wwwroot 中，若文件名不以“.min.js”结尾，那么会自动生成“.js”和“.min.js”两个文件，分别在开发模式和生产模式的视图中引用。
缺点：只更改 JS 内容，执行“生成解决方案”项目不会重新编译更新 wwwroot 中的 .js 和 .min.js 文件，这时使用“重新生成解决方案”可以解决这个问题。