Mole 项目已经开源，打算把仓库在 GitHub Release 页面中发布各个平台的安装包/二进制（像 frp 那样），已经完成脚本，可参考.github/workflows/release.yml，这个用来记录实现过程与遇到的坑，便于自己回顾。 大致流程 查阅 GitHub Actions、goreleaser、actions/create-release、actions/upload-release-asset 等资料。 在仓库中写一个 matrix workflow，在 Windows / macOS / Ubuntu runner 上分别构建并打包。 修复构建中出现的依赖与环境差异问题。 将构建产物上传为 Release asset（先查找/创建 release，再上传各平台包）。 调试并保证上传在 Release 页面能看到各平台包。 今天遇到并解决的主要问题（按流程顺序） Ubuntu 图形库版本不一致 问题：教程写的是 libwebkit2gtk 4.0，但在新版 Ubuntu runner 上只能安装 4.1。 处理：在 CI 的 apt 安装里兼容 4.0 和 4.1（尝试 4.1，或用 || 逻辑兼容两种包名）。 wails3 安装地址写错导致安装失败 问题：go install 用错了模块路径，安装一直失败。 处理：修正为官方地址（例如 github.com/wailsapp/wails/v3/cmd/wails3@latest），并确保 GOPATH/bin 在 PATH 中。 wails3 的 -platform / -o 参数在我的环境不可用 问题：官方文档的参数在实际运行时报错或不生效（不能指定输出名）。 处理：不完全依赖 CLI 的跨平台参数，在对应 runner 上运行构建命令并从 bin/ 下输出文件打包；如有必要向 upstream 提交 issue。 macOS 的平台特有代码需要 build tag，而不是运行时判断 ...

如果你要开始项目开发，看看如下 Git 常用命令对你绝对有帮助。 在每次开发新功能时，拉出一个新分支，分支名称为开发的功能名称，格式为 func-xxxx。当开发的功能完成并测试没有问题后，合并到主分支。 当在开发新功能时，如果出现 bug，能够马上解决的，直接在主分支上修改，如果需要时间长，则新创建一个分支，格式为 bug-xxxx。当开发的功能完成并测试没有问题后，合并到主分支。 1，开发分支。 切换到 dev 分支，进行代码开发。开发完毕后，合并到主分支。 git checkout dev 2，合并到主分支。 git checkout master git merge dev git push origin master 3，主分支添加 tag，并发布到线上。 git checkout master git tag -a v1.0.0 -m "V1.0版本" git push origin v1.0.0 git push --tags 4，删除分支 git branch -d 分支名称 5，设置用户名和邮箱 git config --global user.name 你的用户名 git config --global user.email 你的邮箱 打标签 # 列出标签 git tag # 列出特定版本标签 git tag -l "v1.8.5*" # 创建标签 git tag -a v1.4 -m "my version 1.4" # 显示标签 git show v1.4 # 根据提交打标签 git tag -a v1.2 9fceb02 # 推送标签 git push origin v1.5 # 删除标签 git tag -d v1.4 # 检出标签，浏览使用 git checkout v1.4

豆子碎片小程序很早就注册了，刚开始做的功能就是浏览 Go Web 框架 Beego 的教程。当时，正在自学 Beego，而 Beego 的网站时常打不开，就想做一个小程序，可以浏览 Beego 内容。当时看到了 towxml 组件，正好可以实现 Markdown 转 Wxml，于是就将 Beego 的 内容文档写成 Markdown 格式，做成了小程序。小程序的项目名叫 visit，就是浏览的意思。 当时小程序还是使用的云环境，云环境免费，并提供 dev 和 pro 两个环境。将 Beego 的 Markdown 文件存在云存储中。使用云函数调用数据。在小程序端使用 towxml 解析 Markdown 数据。当时发布小程序后，还是很受欢迎的。 中间歇了一段时间，没有更新文章，也没有维护小程序，小程序日浏览人数就下降了。云环境收费后，就彻底不管了。 后来，买了一台云服务器，为了练习自己所学的 Golang 语言，就将小程序重新拾起来。新做的项目内容是浏览唐诗，使用 Gin 框架进行后端开发，小程序端的布局和现在的豆子碎片布局差不多，只有一个首页，首页包含标题、一个搜索框、几个快捷按钮。项目很快完成，将小学和初中的唐诗、宋词、古诗经都录入了数据库，维护了很长一段时间。小程序上线后，每天也有几个人访问。在录入高中的唐诗内容时，就无法坚持下去了，高中的唐诗等内容都比较长，页面排版非常不美，所以高中的内容就没有录入。小程序在展示唐诗内容时，刚开始使用 Markdown 展示。后来想添加拼音，就将 Markdown 去掉，手撸 wxml，最后，拼音也添加了，但是费了很大劲，自己不擅长前端，美工。本还计划添加录音，但实在没有素材，真正做起来，费时费力，没有精力和动力就搁置了。 2024 年微信平台要求小程序都要备案。我有三个小程序，本想都放弃了，但后来，在工作中要用到音频格式转换，在小程序端实现操作起来是真的很方便，省时省力，不需要开电脑，也可以在任何时间操作。所以计划留下一两个吧。在备案的时候，注销了一个，剩下了两个，目前还在使用和维护，一个是豆子工具，用来制作工具，平时我也在用，一个是豆子碎片，记录技术经验和代码片段。在备案豆子碎片小程序时，小程序原名称叫找唐诗，提交备案后，微信备案客服人员说唐诗这两字不让用，让换个名称。在换名称的时候，我就在想这个小程序要不要放弃？不放弃做什么内容？已经有一个豆子工具小程序做工具了，没有必要再做一个工具类小程序吧。一直没有想好，等微信备案人员二次打电话时（真的很负责），才确定下来，做笔记类应用，记录日常开发经验和技巧以及代码片段，本想叫代码碎片，为了和豆子工具保持一致，小程序名称就叫豆子碎片，寓意像玩积木一样，学了本小程序内容，你也可以制作一款你想要的小程序。 豆子碎片项目已经开源，项目地址：https://github.com/littletow/visit 豆子碎片目前没有实名认证，如果你喜欢就收藏一下。豆子碎片面对的人群是有技术门槛的，后续看情况再进行实名认证。 豆子碎片的文章也已经在我公众号发布。有兴趣可以查看一下，一个程序员之小程序的成长与蜕变 想要查看豆子碎片，可以扫下面的小程序码：

前面介绍了如何学习豆子碎片小程序，今天本文将介绍包括核心功能实现、技术方案对比和业务逻辑落地等方面。豆子碎片小程序是一款小程序技术和经验等内容展示类的小程序，主要用于展示 Markdown 文件解析后的内容。 核心功能实现 豆子碎片小程序的核心功能主要包括以下几个方面： 数据下载与本地缓存：每次小程序启动时，从服务器下载最新的 Markdown 文件，并缓存到本地，以便后续使用。 Markdown 解析与渲染：使用 towxml 组件解析下载的 Markdown 文件，并渲染成 wxml 文件，以便在小程序中展示。 首页布局与搜索：首页采用上中下布局，上方介绍小程序的用途，中间是搜索框，下方是快捷按钮。当用户在搜索框输入内容或点击快捷按钮时，查询出相关的文章列表。 文章详情展示：点击文章列表中的文章，跳转到文章详情页，展示文章的详细内容。 技术方案对比 在实现豆子碎片小程序的过程中，我们对多种技术方案进行了对比，最终选择了以下技术方案： 数据下载与本地缓存 方案一：每次启动时都从服务器下载数据：这种方案实现简单，但会增加网络请求次数，影响小程序的启动速度和用户体验。 方案二：使用本地缓存：在小程序启动时，先检查本地缓存是否有最新数据，如果有则直接使用，否则从服务器下载数据并缓存到本地。最终我们选择了这种方案，以提高小程序的启动速度和用户体验。 Markdown 解析与渲染 方案一：自定义解析器：自行开发 Markdown 解析器，解析 Markdown 文件并生成 wxml 文件。这种方案实现复杂，维护成本高。 方案二：使用现有组件：我们对比了 wxParse 组件和 towxml 组件，最终选择使用开源的 towxml 组件进行 Markdown 解析和渲染，它组件成熟，易于集成和使用。最终我们选择了这种方案，以简化开发流程并提高开发效率。 首页布局与搜索 方案一：手动实现布局和搜索功能：自行编写代码实现首页布局和搜索功能，灵活性高，但开发成本较高。 方案二：使用微信小程序提供的组件：使用微信小程序提供的 UI 组件，如<view>、<input>、<button>等，实现首页布局和搜索功能，并使用 weui 样式。最终我们选择了这种方案，以简化开发工作并提高开发效率。 业务逻辑落地 下方只展示了代码片段，详情请查看 visit 项目。 数据下载与本地缓存 在小程序的 app.js 文件中，我们实现了数据下载和本地缓存的逻辑： // 登入 async login() { const that = this; const tzms = utils.getTodayZeroMsTime(); // 获取今日零时毫秒时间戳 // 检查设备信息? that.logDevInfo(); // 检查Git服务是否正常？ const isAlive = await that.chkServerAlive(); console.log('url,', that.globalData.url, isAlive); // 检查版本更新? that.uptVer(tzms); // 加载用户信息 that.onLogin(); }, // 小程序每次启动都会调用 onLaunch: function () { const startTime = Date.now(); this.globalData.startTime = startTime; this.login(); const loginTime = Date.now(); const launchTime = loginTime - startTime; console.log(`app onLaunch: ${launchTime} ms`); }, 首页布局与搜索 在首页的 index.wxml 文件中，我们实现了上中下布局和搜索框： ...

在写笔记列表页面时，发现从服务器获取的笔记列表包含最新更新时间 lastts，当我们想将最新更新的条目展示在最上端时，我们需要排序数组，将数组按照时间重新排序，排序规则为最新的时间条目放在最前面。 这样我们就可以在笔记列表中让用户看到最新更新的内容了。 我们需要将其封装为函数，方便调用。 函数代码如下： // 按照更新时间排序的函数 sortNotesByLastTs: function(notes) { return notes.slice().sort((a, b) => { // 将时间字符串转为时间戳比较 const timeA = new Date(a.lastts).getTime(); const timeB = new Date(b.lastts).getTime(); // 降序排列（最新的在前） return timeB - timeA; }); }, 当运行之后，发现时间戳格式和服务器返回格式不一致，我们需要重新调整函数，服务器返回格式 YYYY-MM-DD HH:mm:ss，本地函数使用的时间格式 ISO 8601 格式。 调整后的代码如下： // 按照更新时间排序的函数（适配"YYYY-MM-DD HH:mm:ss"格式） sortNotesByLastTs: function(notes) { return notes.slice().sort((a, b) => { // 解析自定义时间格式 const parseTime = (timeStr) => { if (!timeStr) return 0; // 替换空格为T，使其符合ISO格式 const isoFormat = timeStr.replace(' ', 'T'); return new Date(isoFormat).getTime() || 0; }; const timeA = parseTime(a.lastts); const timeB = parseTime(b.lastts); // 降序排列（最新的在前） return timeB - timeA; }); }, 推荐还是调整服务器端，让返回的时间格式转为 ISO 8601 格式。

我们知道 Protobuf 文件可以减少体积，方便存储和传输，但在获取文件后，我们还需要将其转换为 JSON 格式，以适配应用进行处理数据。 下面的代码是在微信小程序中使用，将 pb 文件转换为 JSON，然后再使用。 // 小程序根目录执行安装（需开启 npm 支持） // npm install protobufjs // 创建 proto 文件 /proto/item.proto /* syntax = "proto3"; message DataItem { string id = 1; string name = 2; string kw = 3; bool lock = 4; string category = 5; string label = 6; int32 grade = 7; } message DataArray { repeated DataItem items = 1; } */ // 在 app.js 中引入 const protobuf = require('protobufjs'); // 页面 JS 文件 Page({ data: { items: [] }, onLoad() { this.loadProtoData(); }, async loadProtoData() { try { // 1. 下载二进制文件 const { tempFilePath } = await this.downloadFile(); // 2. 读取文件内容 const arrayBuffer = await this.readFile(tempFilePath); // 3. 加载 Proto 定义 const root = await protobuf.load('/proto/item.proto'); const DataArray = root.lookupType('DataArray'); // 4. 解析数据 const decoded = DataArray.decode(new Uint8Array(arrayBuffer)); // 5. 转换格式 const result = decoded.items.map(item => ({ id: item.id || '', name: item.name || '', kw: item.kw || '', lock: typeof item.lock === 'boolean' ? item.lock : false, category: item.category || '', label: item.label || '', grade: item.grade || 1 })); this.setData({ items: result }); } catch (err) { console.error('解析失败:', err); } }, downloadFile() { return new Promise((resolve, reject) => { wx.downloadFile({ url: 'https://your-domain.com/data.bin', success: resolve, fail: reject }); }); }, readFile(tempFilePath) { return new Promise((resolve, reject) => { wx.getFileSystemManager().readFile({ filePath: tempFilePath, encoding: 'binary', success: res => resolve(res.data), fail: reject }); }); } }); 当文件非常大时，解析速度会有点慢啊，为了更进一步的提高速度，我们可以使用 WebAssembly，这里是一个 Wasm 示例： ...

我需要将 JSON 字符串中的一个对象属性删除，如果手动删除，又累又无聊。 一个 Python 脚本搞定。 import json def remove_filename_and_save(input_path, output_path): """ 从JSON数组中移除所有对象的filename属性并保存到新文件 Args: input_path: 输入JSON文件路径 output_path: 输出JSON文件路径 """ try: # 读取输入JSON文件 with open(input_path, 'r', encoding='utf-8') as f: data = json.load(f) # 检查是否是数组 if not isinstance(data, list): print("错误：输入JSON不是数组对象") return False # 处理每个对象 processed_data = [] for item in data: if isinstance(item, dict): # 创建新对象，排除filename属性 new_item = {k: v for k, v in item.items() if k != 'filename'} processed_data.append(new_item) else: processed_data.append(item) # 非字典元素保持不变 # 写入输出文件 with open(output_path, 'w', encoding='utf-8') as f: json.dump(processed_data, f, ensure_ascii=False, indent=2) print(f"成功处理并保存到 {output_path}") return True except FileNotFoundError: print(f"错误：输入文件 {input_path} 未找到") return False except json.JSONDecodeError: print(f"错误：输入文件 {input_path} 不是有效的JSON格式") return False except Exception as e: print(f"处理文件时出错: {e}") return False if __name__ == "__main__": # 文件路径配置 input_json = "/data/data.json" # 输入文件路径 output_json = "/data/data-temp.json" # 输出文件路径 # 执行处理 if remove_filename_and_save(input_json, output_json): print(f"操作成功完成，结果已保存到 {output_json}") else: print("操作失败，请检查错误信息") 可以基于该脚本进行扩展。

今天我们要讲到含金量非常高的技术了，将 Markdown 内容渲染为小程序页面，这是豆子碎片文章页面。 在微信小程序中，渲染 Markdown 内容可以使文章展示更加美观和统一。本文将通过一个完整的示例，演示如何从服务器下载 Markdown 内容，并使用 towxml 组件在小程序端渲染为页面。 目录 需求分析 页面布局 下载 Markdown 内容 使用 towxml 渲染 Markdown 代码与预览效果对比 1. 需求分析 在本次实战中，豆子碎片文章页面需要实现以下功能： 从服务器下载 Markdown 内容 使用 towxml 组件将 Markdown 内容渲染为页面 2. 页面布局 豆子碎片文章页面需要包含以下几个部分： 标题区域，用于展示文章标题 内容区域，用于展示渲染后的 Markdown 内容 示例代码 { "pages": ["pages/index/index", "pages/article/article"], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "豆子碎片文章" } } <view class="container"> <view class="article-title">{{title}}</view> <import src="/towxml/entry.wxml" /> <template is="entry" data="{{...articleContent}}" /> </view> .container { padding: 20px; } .article-title { font-size: 24px; font-weight: bold; margin-bottom: 20px; } 3. 下载 Markdown 内容 通过微信小程序的wx.request方法，从服务器下载 Markdown 内容。 ...

我们已经知道如何上架，但是针对内容类小程序，我们还需要再特别注意一些内容。 引用真实案例！对于内容展示类的小程序，根据微信小程序的审核规则，个人主体的小程序不能涉及“资讯类”内容（如直接展示文章列表、新闻聚合等），否则会被要求以企业主体重新提交。我是技术类文章展示小程序，即使这样，也被拒多次，以下是针对这一问题的优化方案，既能规避审核风险，又能合理引导用户访问技术文章： 核心原则 内容不应牵涉政治、时事热点、色情暴力等信息，这个无需多说。 首页不直接展示文章内容列表，避免被判定为“资讯类”。这是资讯类默认布局，容易违反。 通过功能入口间接引导用户到二级页面（如搜索、分类、专题入口），在二级页面展示文章列表。 突出技术工具属性，而非内容聚合平台。一般指展示的内容没有相关性，不能突出主题。 内容应偏重于教程、经验性质，而非实时信息，不应具有时效性。比如相关技术最新消息很容易判定为资讯类。 在确定核心原则之后，以下几个推荐布局可以避免判定为资讯类布局。 方案 1：搜索 + 分类入口 + 专题推荐 <view class="container"> <!-- 搜索框（保持顶部） --> <view class="search-box"> <input placeholder="搜索技术文章" bindtap="navigateToSearch" /> </view> <!-- 快捷分类入口（工具按钮） --> <view class="category-buttons"> <view class="button" bindtap="navigateToCategory" data-category="前端">前端技术</view> <view class="button" bindtap="navigateToCategory" data-category="后端">后端架构</view> <view class="button" bindtap="navigateToCategory" data-category="数据库">数据库优化</view> </view> <!-- 专题推荐（以“技术专题”形式包装） --> <view class="special-topics"> <text class="section-title">精选技术专题</text> <view class="topic" bindtap="navigateToTopic" data-id="1"> <image src="/images/topic1.png" mode="aspectFill" /> <text class="topic-title">前端性能优化实战</text> </view> <view class="topic" bindtap="navigateToTopic" data-id="2"> <image src="/images/topic2.png" mode="aspectFill" /> <text class="topic-title">高并发系统设计指南</text> </view> </view> </view> 方案 2：搜索 + 问题解答入口 + 技术资源导航 <view class="container"> <!-- 搜索框 --> <view class="search-box"> <input placeholder="输入技术问题关键词" bindtap="navigateToSearch" /> </view> <!-- 技术问题快速入口（做成问答功能） --> <view class="qa-section"> <text class="section-title">常见技术问题</text> <view class="qa-item" bindtap="navigateToArticle" data-id="101"> <text>如何解决 Vue 3 响应式丢失问题？</text> </view> <view class="qa-item" bindtap="navigateToArticle" data-id="102"> <text>MySQL 索引优化最佳实践</text> </view> </view> <!-- 技术资源导航（强调工具属性） --> <view class="resource-nav"> <view class="nav-card" bindtap="navigateToPage" data-page="opensource"> <image src="/images/opensource.png" /> <text>开源项目推荐</text> </view> <view class="nav-card" bindtap="navigateToPage" data-page="tools"> <image src="/images/tools.png" /> <text>在线开发工具</text> </view> </view> </view> 关键审核规避策略 避免“文章列表”字眼： ...

当我们创建笔记索引内容后，如何搜索是个关键的问题，目前的设计就是先搜索 name，看名称中是否包含关键字，然后查找 kws 数组，查看数组中是否有关键字，最后查看 tags 数组中是否有关键字？查到以后取出来，返回数组列表。 数据的结构如下： [{ "id":"id1", "name":"小星星", "kws":["爱","崇拜"], "tags":["想法","感情"], }] 如果使用 JS 来实现，那么代码如下： /** * 搜索笔记 * @param {Array} notes 笔记数组 * @param {String} keyword 搜索关键词 * @returns {Array} 匹配的笔记数组 */ function searchNotes(notes, keyword) { if (!keyword || typeof keyword !== 'string') { return []; // 如果关键词无效，返回空数组 } // 统一转换为小写以便不区分大小写搜索 const lowerKeyword = keyword.toLowerCase(); return notes.filter(note => { // 检查名称是否包含关键词 const nameMatch = note.name && note.name.toLowerCase().includes(lowerKeyword); // 检查kws数组是否包含关键词 const kwsMatch = Array.isArray(note.kws) && note.kws.some(kw => kw && kw.toLowerCase().includes(lowerKeyword)); // 检查tags数组是否包含关键词 const tagsMatch = Array.isArray(note.tags) && note.tags.some(tag => tag && tag.toLowerCase().includes(lowerKeyword)); // 如果任一条件匹配，则包含该笔记 return nameMatch || kwsMatch || tagsMatch; }); } 这里支持多维度搜索，同时搜索名称、关键词和标签三个字段，当搜索时，先将关键字转为小写，这样比较时不区分大小写。为了性能优化，使用 filter 和 some 方法，减少不必须要的循环。