为知

人人都应该有一台自己的云服务器，解锁数字生活的另一种方式

Sun, 16 Mar 2025 13:08:36 +0800

人人都应该有一台自己的云服务器，解锁数字生活的另一种方式

今天结合个人对云服务器的用法，分享一下心得。

还在使用云服务器搭个人博客？

说到云服务器，首先想到的是不是创建个人网站，比如个人博客，论坛等。

在流量竞争如此激烈的当下，个人创建的博客等类型网站，根本就没有什么浏览量，只能用来自娱自乐。

所以，个人云服务器搭建网站，我认为是最没用的使用方法。

而云服务器的正确用法，我觉得是搭建实用工具。

个人用的云服务器有什么特点

个人购买使用的云服务器与企业的使用的云服务器、家庭的NAS是有很大区别的。

我自己一般只会在云服务器厂商活动期间购买类似99元一年的机型。

这里我也整理了下这种云服务器的特点。

1. 公网IPV4地址
2. 7*24小时不间断运行
3. 配置比较低，CPU在2～4核，内存2～4G，无显卡，磁盘50G以内。
4. 带宽也不大，一般在10M以内

这样的配置特点，直接把一些使用场景拒之门外，比如下载机，搭建网盘。

跑大模型也不要想😄

用来做什么？

介绍一下我个人云服务器的玩法。

服务器运维管理

这个是服务器的基座了
用来管理服务器，看看资源占用，搭建基础环境。

我现在使用的是宝塔面板，用的时间也比较长了，也懒得换了，不过个人感觉宝塔的商业味越来越浓了。
如果是新的服务器，我可能更倾向于1Panel。

Rustdesk中转服务器

Rustdesk是一个开源的远程桌面平台，支持远程控制，文件传输等。
在Teamviewer、toDesk一众商业软件吃相越来越难看，其真的是一股清流了。

使用云服务器搭建Rustdesk中转服务器，可以让不同网络下的电脑，都可以互相进行远程连接。

妈妈再也不用担心电脑不会用了🤣

如果能再搭配家里一台全天24小时开机运行的windows小主机，体验能直接炸裂。

Alist

Alist是一款开源的多云存储管理工具，支持整合百度网盘、阿里云盘、OneDrive等20+主流存储服务，提供统一Web界面和WebDAV协议对接，实现跨平台文件管理与预览，GitHub星标超46k。

有同学想问了，挂载网盘，不是需要云服务器有大带宽才行吗？

这个就不用担心了，alist提供了一种302代理的挂载方式，你看到的alist页面是部署在你的服务器上面的，但是实际访问到的文件，都是连接到网盘，相当于通过网盘访问是什么速度，通过云服务器Alist访问就是什么速度。

后续再配合Emby，就能打造一个云端媒体库了。

夸克网盘拖后腿了（只能本地代理）

图床

当你想把一些图片嵌入到你的文章中，对外发布的时候，你需要一个图床这样的载体。

个人云服务器虽然因为磁盘空间的限制，无法大量保存视频文件，但是图片是完全没问题。

我自己是使用的是简单图床，主要用来给markdown文章挂载图片的。

内网穿透

现在的宽带运营商已经很少能够提供公网ipv4地址了。

当前的状态：移动完全没有；电信基本要不到；联通有些地区可以要到。

所以一个稳定的可以访问到家里的内网穿透工具是很重要。

有了它可以在外的时候访问自己的电脑，查看照片，控制家里的设备。

我个人使用的是NPS。

像这样的内网穿透工具有很多的。

其他

还有其他工具可以部署。

1. VPN：Wireguard、Openvpn。
2. 各种各样的docker项目。
3. 爬虫

总结一下

个人云服务器，别看这小家伙配置寒酸（CPU弱鸡、内存抠门、硬盘比钱包还扁）。

但可是妥妥的网民的冲浪利器：
白天当网盘聚合器
晚上化身远程控制大师，
偶尔兼职图床管家和内网穿透特工（NPS打通你家网络任督二脉）。

虽然跑不了AI炼丹，但胜在年费99元包养成本，完美适配既要马儿跑又要马儿不吃草的打工人哲学——云服务器的真谛，就是让穷鬼也能优雅地薅资本主义算力羊毛！

垃圾佬极低成本打造一台高性能NAS

Mon, 03 Mar 2025 10:19:58 +0800

小米NAS不支持Docker

前段时间看到了关于小米NAS的一些消息，小米NAS以高性价比的双盘位家用存储为核心卖点（ARM架构/999-2000元价位），主打手机互联（照片备份/微信文件/车载Su7兼容）和无感备份功能，但明确不支持Docker，与绿极、群晖等竞品形成差异化策略。

作为一名NAS玩家，看到不支持Docker，感觉小米已经完全脱离的自己的初心，未发烧而生。走华为的路，让自己无路可走。

Docker都不支持，虚拟机也就更不用想了。看起来，小米NAS只是作为米家生态种的一环，目标用户为NAS小白，备份照片就是主要需求了。这样的产品，NAS玩家不需要，网盘用户不需要。

我感觉不如给小米路由器开辟一个新品类，这样简单的功能，完全不需要在单独开一条产品线出来。

一款不支持Docker，不支持虚拟机的NAS，还是ARM架构。卖999~2000。这样的价格真的可以称为高性价比吗？

抱着这样的疑问，我正好来试一试，通过捡垃圾，打造一台全方位碾压的高性能NAS，需要多少米。

捡了什么

先看看最终的配置表

主板 华硕b360m-a

CPU i3 8100 

内存 枭鲸2666 8×2 16g

机箱 傻瓜超人 n8p 带风扇

电源 益衡7025b 改模组

固态 新葵256g

PCIe x1转2sata

主板选择华硕的b360m-a，150米。看中了它丰富的拓展性。NAS中很关键的一点是盘位数量，这块主板自带6个sata插口，开局盘数已起飞。而主板上还有2个PCIE x1，1个PCIE x16，两个m2都可以用来拓展，不管你是拓展万兆网口，额外的sata接口，显卡，都是可以的。

CPU i3-8100,120米。8100的跑分跟N100差不多，但是拓展性强很多。

虽然8100tdp为65瓦，实际使用时并不是一直都在满载运行，我家自己的12100NAS整体运行，一般都在30多瓦。

实际使用多出来比N100那10多瓦的功耗，基本可以忽略了。

而散热器，tdp65瓦，随便找一个就行了。15米。

内存随便捡了2条枭鲸2666 8g两条。 80米。

电源买了益衡7025b，这款很适合NAS，静音，250W。120

固态用的新葵的256g nvme ssd，这个家里原来就剩一个，看小黄鱼70快钱吧。

机箱傻瓜超人n8p air 8盘位。还带4把风扇，210米，很划算。

还有一个pcie x1转2sata，加上这个刚好支持8盘。20米。

组装完成。

NAS系统

安装了飞牛系统，Docker，虚拟机都支持。

飞牛团队系统更新的频率真是快，最近还支持了无线连接，AI相册功能。

‍

核算成

主板华硕b360m-a 15

CPU i3 8100 120 + 1

内存枭鲸2666 8×2 16g 8

机箱傻瓜超人 n8p 带风扇 21

电源益衡7025b 改模组 12

固态新葵256g 7

PCIe x1转2sata 2

总计：78

总

自组DIY NAS的性价比和可玩性都比成品的要高

不过不同的用户需求也都不一样，你可能花了大价钱买了一台NAS，最后发现自己的需求网盘就能满足

所以买NAS之前一定要搞清楚自己的真正需求，不要买了后再后悔

自带的飞牛影音也很好用。

核算成本

主板 华硕b360m-a 150

CPU i3 8100 120 + 15

内存 枭鲸2666 8×2 16g 80

机箱 傻瓜超人 n8p 带风扇 210

电源 益衡7025b 改模组 120

固态 新葵256g 70

PCIe x1转2sata 20

总计：785

总结

自组DIY NAS的性价比和可玩性都比成品的要高。

不过不同的用户需求也都不一样，你可能花了大价钱买了一台NAS，最后发现自己的需求网盘就能满足。

所以买NAS之前一定要搞清楚自己的真正需求，不要买了后再后悔。

手残党福音！群晖部署Screenshot-to-Code：截图秒变代码，外网访问稳如狗！

Sun, 23 Feb 2025 21:26:31 +0800

GPT-4.5已经实现，AI编程年底完胜人类

前段时间，OpenAI的CEO奥特曼（Sam Altman）在全球各地巡回演讲；在东京大学和柏林工业大学，他与各界人士深入探讨了人工智能的未来。在这两场备受瞩目的讨论中，奥特曼分享了关于下一代大模型（如GPT-4.5、GPT-5，甚至GPT-6）的诸多信息，以及OpenAI在开源方面的最新想法。

其中，奥特曼提到GPT o3是我们最新的、最好的模型。我们的第一个推理模型好比是世界上排名第100万名的程序员，当时这是非常令人印象深刻的。然后我们又有了一个模型，排名进入了前10000。我们在12月公开讨论过，o3模型在世界上最好的、最有竞争力的程序员中排名第175。我认为，OpenAI内部目前正在开发的模型，世界排名在第50名左右，到今年年底可能有希望拿下世界第一。

虽然o3还没有发布，但是编程界的AI工具已经杀成了一片红海，而前端开发人员，成了第一批膝盖中间的人。

把截图编程前端代码

最近发现了一个开源的项目，可以把截图转化为前端代码。

也发现了一个现成的网站，可以直接把图片转化代码。

screenshot-to-code介绍

screenshot-to-code 是一个开源项目，旨在通过深度学习模型将用户提供的界面截图（如网页设计稿、移动端 UI 等）自动转换为前端代码（如 HTML/CSS、React、Vue 等）。它的核心目标是简化开发流程，帮助设计师和开发者快速将视觉设计转化为可运行的代码。

项目特点

技术核心

使用计算机视觉（CV）和深度学习模型（如 CNN、Transformer）分析截图中的布局、颜色、文字和组件。

结合 OCR（光学字符识别）技术提取文本内容。

支持生成多种前端框架代码（如 HTML/CSS、React、Tailwind CSS 等）。

应用场景

快速原型开发：将设计稿直接转为代码，减少手动编码时间。

教育与学习：帮助新手理解设计到代码的映射关系。

自动化工具集成：与设计工具（Figma、Sketch）结合，实现设计-开发流水线。

典型工作流程

用户上传界面截图。

模型识别元素（按钮、文本框、布局结构等）。

生成结构化代码（如 HTML 骨架 + CSS 样式）。

用户可进一步调整生成的代码。

screenshot-to-code群晖部署与外部访问

github项目地址：https://github.com/abi/screenshot-to-code

gitee项目地址：https://gitee.com/mirrors/screenshot-to-code-llm （此仓库是为了提升国内下载速度的镜像仓库，每日同步一次。 ）

由于screenshot-to-code没有提供docker hub版本，只能使用docker compose部署。

首先我们通过群晖的控制面板，打开群晖的ssh功能。（用完记得关闭）

然后通过shell工具，连接到群晖上，并切换到root用户。

这里我使用的是finalshell

输入

sudo -i

再输入管理员密码切换到root。

然后回到群晖的套件中心，来安装一下必要的应用Git。

Git套件，官方是不提供的，需要在套件来源中配置一下其他来源

https://spk7.imnks.com

安装好了之后，在回到shell终端工具。

使用git clone把项目下载到本地。这里以gitee地址为例。

git clone https://gitee.com/mirrors/screenshot-to-code-llm.git

下载完成后，进入到screenshot-to-code-llm目录。

这里我们需要新建一个.env文件。

echo "OPENAI_API_KEY=sk-your-key" > .env

sk-your-key换成你的openAI的key。

接下来需要配置外部访问相关的东西。

由于screenshot-to-code实行了前后端分离，前端在向后端发起请求时，使用的是127.0.0.1本地地址，这个地址如果前端页面没有在本地打开，会导致无法访问到后端服务。

这时我们需要进入到/screenshot-to-code-llm/frontend/src目录中，通过vi修改其中的config.ts。

把其中的VITE_WS_BACKEND_URL与VITE_HTTP_BACKEND_URL后面改为你群晖的ip地址。然后保存。

然后再回到screenshot-to-code-llm根目录。

执行docker-compose up -d --build开始安装。

安装完成后，就能在群晖的Container Station中看到多了两个容器。

这个时候我们再访问

http://你的群晖ip:5173

就能打开screenshot-to-code前台页面了。

接下来在配置好端口映射或者内网穿透，就可以愉快的玩耍了。

API消费情况

这玩意调用了openAI的4o模型与Dall-e。整体花费还是挺高的。

我期间进行了3次截图转化。花费了0.17刀。

相比较我自己平时省吃俭用调用4o-mini来说，这个价格已经是天价了。😄

希望能够接入Deepseek把价格打下来。

现成的转换网站

现在也有一个现成的网站，名字叫做copyweb.ai，可以直接实现截图转化为前端代码。

不过此网站是收费的，新用户有体验用的信用点用来生成代码，个人建议体验一下可以，续费没啥必要。

不花一分钱，手把手教你打造终身免费的私人听书库。 2025年群晖搭建AudioBookShelf教程

Sat, 22 Feb 2025 21:00:25 +0800

AudioBookShelf 是一款开源的、自托管的有声书和电子书管理工具，旨在帮助用户搭建个人媒体库，支持跨平台访问和流媒体播放。

有了它，你可以

1.有声书与电子书管理

支持主流格式：有声书（MP3、M4A、AAC等）、电子书（EPUB、PDF、MOBI等）。

自动抓取元数据（封面、作者、简介等），支持手动编辑。

按作者、系列、分类等智能整理内容。

2.流媒体播放

网页端和移动端均可直接播放有声书，支持进度同步、播放速度调整、睡眠定时器等功能。

电子书支持在线阅读，自动记录阅读进度。

3.跨平台支持

网页端：通过浏览器直接访问服务器。

移动端：提供 iOS 和 Android 客户端（需自行下载或通过 TestFlight 安装）。

离线访问：移动端支持下载内容后离线使用。

4.多用户与家庭共享

支持创建多个用户账户，分配不同权限（如管理员、普通用户）。

可设置“家庭库”，共享特定内容给其他用户。

5.开源与隐私友好

代码完全开源（GitHub），用户可自行审查和修改。

数据存储在本地服务器，无需依赖第三方云服务，保障隐私。

群晖上使用Docker搭建自己的AudioBookShelf

1、Docker容器创建

首先，我们在群晖上找到Container Station，在注册表中搜索audiobookkshelf。找到其中收藏的最多的一条。

双击后选择latest版本即可。

下载好映像。

开始创建容器。容器名称：audiobookshelf(这个可以随意)其他无需修改

端口需要映射，把本机的一个端口映射到容器的80端口上。我这里使用的是8080.文件夹也需要映射一个，用来存放有声书与电子书。根据实际情况来就可以。我这里映射了群晖本地的/docker/audiobook文件夹到容器内容的/books中。

接着一路下一步，容器就创建好了。

2、食用

浏览器访问“你的群晖地址:8080”就可以访问到你的audiobookshelf了。第一次访问，会让你初始化服务。需要设置用户名与密码，这个账号就是管理员。

设置完成后，登录进入服务。

在Setting中把语言修改为简体中文。

然后，我们来新建媒体库。

我这里在群晖/docker/audiobook创建了两个目录，同步映射到了容器books目录中。audiobook用来存放有声书。book用来存放电子书。

设置完成之后，扫描一下媒体库。然后就可以愉快的玩耍了。

3、移动端使用AudioBookShelf

Android与IOS都是有AudioBookShelf客户端。Android版本可以直接下载到。iOS版本没有在AppStore上线，只能在加入TestFlight使用。

Flymby近况

Mon, 09 Dec 2024 08:25:23 +0800

APP已上架华为鸿蒙应用市场。

QQ群号：442125481

Flymby是一个可以在鸿蒙NEXT系统上运行第三方Emby播放器。

功能简单，基本可用，持续优化中。

本APP只提供Emby播放功能，不含有资源。

使用此APP需要有自己的Emby服务。

待开发功能

1、收藏页完成 - 1.0.0

2、播放完成自动下一个，手动切换前一个后一个的完成 - 1.0.2

3、播放字幕 1.0.5

4、播放手势研究中

鸿蒙Next开发日记 Day15 - 真机到了，测试下Emby APP。

Mon, 21 Oct 2024 09:20:32 +0800

新买的MatePad pro 11 2024到了，申请鸿蒙Next成功，在pad上跑了一下。

体感明显比模拟器流畅多了。

模拟器上音画不同步的问题也没有了。

不过播放超高清视频还是有些卡。

Unraid6.12.13上体验飞牛私有云 fnOS

Tue, 10 Sep 2024 08:33:47 +0800

折腾背景

最近在好多地方看到了国产NAS之光 - 飞牛私有云 fnOS。

忍不住想体验一下。

家里正好用一个正在使用的DIY NAS，弄过来试试。

先展示下NAS的配置。

处理器：i3-12100
内存：阿斯加特弗雷32G
主板：铭瑄H610itx 2lan
固态：希捷酷玩520 1T
电源：TT350
硬盘风扇：利民TL-C12CW-S
CPU散热：冰蝶1700/115X

如何安装

镜像下载

你需要从飞牛云的官网下载安装镜像。

镜像是一个iso文件。

然后把iso导入到你的unraid里面。

创建一个虚拟机

系统选择Debian。Linux应该也可以。

cpu全部分配。
初始内存与最大内存都分了4G。我这是用来体验飞牛云用的，实际使用场景只有备份照片。如果你的使用场景很多，比如要使用Docker，搭建影视库等等，建议分配8G以上。
操作系统安装 ISO，选择你下载好的飞牛云安装镜像。
第二块硬盘我是直接挂载了一块未分配给unraid的完整硬盘。
显卡使用虚拟-VNC。你需要一个虚拟VNC能看到安装页面。
网卡使用了虚拟网卡和一个千兆USB网卡。其实我这个主板上面是有一个2.5G网口与一个千兆网口，但是其中2.5G是给整个unraid上网使用的，其中的千兆无法独立出来直通给虚拟机使用。
其他配置保持默认。

以下是我的虚拟机配置

创建并启动虚拟机。使用start with console(VNC)

安装过程

因为我这里已经安装好了，就不过多说明，按着步骤傻瓜式操作就行。

贴一下官网的流程

推荐选择 Graphical Install（图形化安装流程），回车进入下一步。

注意：
如果页面提示 “暂不支持在当前模式下安装。请前往BIOS关闭 Secure Boot 后重试”，请参考安装系统异常情况处理中第 1 点
如果在后续图形化安装步骤中遇到错误安装失败，请重启设备、在这一步选择 Rescuing Install（应急模式安装）重试。

选择系统盘

方向键切换选择要用于系统安装的硬盘，回车或 Alt+N 进入下一步。

设置系统分区和 Swap 大小

在系统盘容量充足的情况下，建议系统分区设置为 64 GB。如安装在虚拟机下，可按情况适当减小。Swap 分区大小已按物理内存大小计算推荐值，可按硬件情况自行调整。

注意：在 fnOS 上，系统将只安装在一块硬盘中。系统盘除系统分区以外的空间，可用于创建存储空间安装应用和存储文件。建议根据需要选择合适容量的 SSD 作为系统盘。

确认后，回车或 Alt+N 进入下一步。

确认格式化

所选择的系统盘将被格式化，所有内容将被删除，回车或 Alt+O 确认后开始安装。

7. 设置网络

安装完成后将自动进入网络设置，系统将自动检测已连接的网卡并获取动态 IP。如网卡未开启 DHCP，你需要手动设置 IP。确认后，回车或 Alt+S 保存设置。

8. 重启设备

网络设置保存成功后，你可以将引导盘从主机上拔出。回车或 Alt+O 重启系统。

9. 重启成功进入终端

设备重启成功后将自动进入终端登录页，这意味着系统已成功安装并启动！请记住所设置的 IP 地址，接下来你将通过浏览器访问此地址来设置和使用 fnOS。现在你可以将显示器、键盘、鼠标从主机上拔除了。

展示效果

鸿蒙Next开发日记 Day14 - Navigation组件，根节点如何监听隐藏与展示

Tue, 10 Sep 2024 08:21:35 +0800

各位小伙伴在使用Navigaiton实现页面跳转的时候，

都是使用Navigation与NavDestination进行页面管理的吧。

NavDestination有提供onShown与onHidden监听，来判断当前页面的展示与隐藏。

但是作为导航的第一个入口页面Navigation却没有这两个事件监听。

那我们该如何进行显示与隐藏的监听呢？

在Navigation里面提供了onNavBarStateChange这样一个方法。

使用它可以轻松的监听到首页的显示与隐藏。

使用方法如下

Navigation(this.navPathStack) {
  Stack() {
    
  }.width('100%')
  .layoutWeight(1)
}
.hideTitleBar(true)
.hideBackButton(true)
.mode(NavigationMode.Stack)
.navBarWidth(700)
.onNavBarStateChange(visible => {
  // 用这个方法来监听首页展示与隐藏
  this.onPageDisplay(visible)
})

onPageDisplay(visible: boolean): void {
  if (visible) {
    // 这里处理页面显示时要做的事情
  } else {
    // 这里处理页面隐藏时要做的事情
  }
}

鸿蒙Next开发日记 Day13 - Web组件的使用与避坑

Wed, 04 Sep 2024 18:46:21 +0800

程序中经常会用到使用H5展示内容的情况，更何况Hybrid的情况。

鸿蒙NEXT也提供了方便的网页展示容器--Web组件，是Web，不是WebView，鸿蒙没有WebView。

下面是一个示例代码

import { webview } from '@kit.ArkWeb';
import StringUtil from '../../utils/StringUtil';
import LoadingDialogView from '../../view/Dialog/LoadingDialogView'

@Builder
export function WebViewPageBuilder(name: string, param: Object) {
  WebViewPage({ param: param as Record<string, Object> })
}

@Component
struct WebViewPage {
  @Builder
  WebView() {
    Web({ src: this.url, controller: this.controller })
      .javaScriptAccess(true)
      .geolocationAccess(true)
      .imageAccess(true)
      .onlineImageAccess(true)
      .domStorageAccess(true)
      .fileAccess(true)
      .mediaPlayGestureAccess(true)
      .mixedMode(MixedMode.Compatible)
      .onTitleReceive((event) => {
        if (event) {
          this.title = event.title
        }
      })
      .onProgressChange((event) => {
        if (event) {
          this.progressPercentage = event.newProgress
        }
      })
      .onHttpErrorReceive((event) => {
        if (event) {
          console.log('url:' + event.request.getRequestUrl());
          console.log('isMainFrame:' + event.request.isMainFrame());
          console.log('isRedirect:' + event.request.isRedirect());
          console.log('isRequestGesture:' + event.request.isRequestGesture());
          console.log('getResponseData:' + event.response.getResponseData());
          console.log('getResponseEncoding:' + event.response.getResponseEncoding());
          console.log('getResponseMimeType:' + event.response.getResponseMimeType());
          console.log('getResponseCode:' + event.response.getResponseCode());
          console.log('getReasonMessage:' + event.response.getReasonMessage());
          let result = event.request.getRequestHeader();
          console.log('The request header result size is ' + result.length);
          for (let i of result) {
            console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue);
          }
          let resph = event.response.getResponseHeader();
          console.log('The response header result size is ' + resph.length);
          for (let i of resph) {
            console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue);
          }
        }
      })
      // .onControllerAttached(() => {
      //   this.controller.loadUrl(this.url)
      // })
      .width("100%")
      .flexGrow(1)
      .layoutWeight(1)
  }

  build() {
    NavDestination() {
      Column() {
        if (!StringUtil.isNullStr(this.url)) {
          if (this.progressPercentage > 0 && this.progressPercentage < 100) {
            Progress({ value: this.progressPercentage, total: 100, type: ProgressType.Linear })
              .width("100%").height(2).backgroundColor($r('app.color.background_main'))
              .style({ strokeWidth: 2 })
          }
          this.WebView()
        }
      }
      .backgroundColor("#FFAAFF")
      .width("100%").height("100%")
    }.title(this.title)
    .onWillAppear(() => {
      this.url = this.param.url as string
    })
    .onAppear(() => {

    })
    .onShown(() => {

    })
  }

  param: Record<string, Object> = {}
  @State url: string = ""
  @State title: string = ""
  controller: webview.WebviewController = new webview.WebviewController()
  @State avoidMode: WebKeyboardAvoidMode = WebKeyboardAvoidMode.RESIZE_VISUAL;
  @Consume('navPathStack') navPathStack: NavPathStack;
  @State progressPercentage: number = 0
  loadingController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialogView(),
    autoCancel: true,
    customStyle: true,
  })
}

通过以上代码就可以实现一个带进度条的简易浏览器。

这里有几个坑需要注意一下。

1. 多给Web组件添加一些权限，有些网页使用了本地存储等技术，权限未开的情况下会出现加载不出内容的情况，然后还定位不出原因。具体权限添加如下：

.javaScriptAccess(true)
.geolocationAccess(true)
.imageAccess(true)
.onlineImageAccess(true)
.domStorageAccess(true)
.fileAccess(true)
.mediaPlayGestureAccess(true)

.mixedMode(MixedMode.Compatible)

2. 是我在使用模拟器调试Web组件时出现的问题，模拟器是可以设置http代理的，当你开启模拟器代理时，会出现Web组件在加载域名地址失败情况，DNS解析失败了。现象就是内容是空白。

为了避免不必要的麻烦，调试Web组件时，就把代理关了吧。

鸿蒙Next开发日记 Day12 - Grid组件使用体验

Tue, 03 Sep 2024 12:29:55 +0800

Grid

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。

可以用来密集的展示规律性信息。

本人把它用在了展示影片列表的功能上。

来看看，我这里是如何实现的

Refresh({ refreshing: $$this.refreshing }) {
  Grid(this.scroller) {
    ForEach(this.mItems, (item: Item, index) => {
      GridItem() {
        this.ItemView(item)
      }
    })
  }
  // .columnsTemplate('1fr 1fr 1fr')
  // .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
  .columnsGap(5)
  .rowsGap(5)
  .columnsTemplate('repeat(auto-fit, 90)')
  .width('100%')
  .backgroundColor($r('app.color.background_main'))
  .padding({
    top: 0,
    bottom: 50,
    right: 5,
    left: 5
  })
  .scrollBar(BarState.Off)
  .onScrollStop(() => {
    if (this.scroller?.isAtEnd()) {
      this.loadNextPage()
    }
  })
}
.onRefreshing(() => {
  this.mTotalCount = 9999
  this.mItemStartIndex = 0
  this.init()
})
.refreshOffset(64)
.pullToRefresh(true)

这里的关键点是使用Grid组件与GridItem组件。

Grid是表格的整体组件，GridItem是表格项组件。

首先，在Grid组件上面，数量设置很重要。

可以设置表格展示的行列数量，正常来说为了多终端的适配，不建议这样配置。

.columnsTemplate('1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')

另一种方式可以让系统自动来适配。

这里使用columnsTemplate

看字面意思，就是列模版了。

官方的说明如下

设置当前网格布局列的数量、固定列宽或最小列宽值，不设置时默认1列。
例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
columnsTemplate('repeat(auto-fit, track-size)')是设置最小列宽值为track-size，自动计算列数和实际列宽。
columnsTemplate('repeat(auto-fill, track-size)')是设置固定列宽值为track-size，自动计算列数。
columnsTemplate('repeat(auto-stretch, track-size)')是设置固定列宽值为track-size，使用columnsGap为最小列间距，自动计算列数和实际列间距。
其中repeat、auto-fit、auto-fill、auto-stretch为关键字。track-size为列宽，支持的单位包括px、vp、%或有效数字，默认单位为vp，track-size至少包括一个有效列宽。
auto-stretch模式只支持track-size为一个有效列宽值，并且track-size只支持px、vp和有效数字，不支持%。

代码里面我们使用了repeat(auto-fit, 90)，是每列可以自动计算实际列宽。

设置Grid的其他样式

通过columnsGap(5)与rowsGap(5)设置内部行列的间距。

scrollBar来控制滚动条的显示。

GridItem

先对来说配置项就少了很多了。内部放入自己每一项要是展示的样式即可。

下拉刷新与上划加载

下来刷新这里在外层包裹Refresh来实现。

上划加载，通过监听Grid组件的onScrollStop事件来实现，当触发此事件时，this.scroller?.isAtEnd()已经到底，则进行加载下一页的操作。