博客开发记录0x03——微信小程序码插件 小程序二维码的算法没有公开，于是只能自己研究解析算法。这也是我目前编写耗时最久的插件了。🤣 方案简述 微信小程序二维码于2017年面世，长得“犹如一朵盛开的菊花”。其具体生成、解析的算法微信官方没有公开，但是可以直接解析记录具体线条的位置、长度，再以此来还原小程序码。 参考资料 菊花绽放：微信是如何识别小程序码的？ 【小程序码-设计篇】菊花绽放 [图片] 解析步骤 寻找定位点 [图片] 将图片二值化，沿X轴统计连续的黑/白像素数量，根据长度比例筛选出合适的像素点。 对筛选出来的像素再沿着Y轴、45度再筛一边。最后得到三个定位点。 确定圆心及起始半径 三个定位点呈等腰直角三角形分布，最长边的中点即为圆心。 自直角顶点向圆心遍历，统计每个半径的关键点总数。100%到0%的突变半径即为小程序码线条的起始半径。 解析线条 在72个方向，从起始半径开始，以一定的步长开始采样。统计各方向上定位点的采样数，并以此为该方向的标准长度。最后根据长度比例计算格子数。 解析结果 [代码]23;1;1519;1;1277;1;1021;1;8165;1;625;1;763;1;1751;1;7069;1;15;1;7551;1;6677;1;7677;1;7021;1;1057;1;6219;1;157;1;9;1;7;1;31;1;3931;1;1691;1;6899;1;7045;1;1739;1;7895;1;7499;1;15;1;7343;1;1175;1;7787;1;6573;1;6851;1;7119;1;655;1;459;1;[代码] [图片] 还原 还原结果 [图片] 因为种种原因，有一些线条的长度偶尔容易出错。不过，小程序码本身有纠错机制，最后的识别效果很好。😁 插件 插件效果 [图片]

身为一只程序员，博客里当然要准备几个GitHub模板啦~😉 开发准备 插件框架还是用在上一篇里写的。 同时，这次要用到一个开源项目 anuraghazra/github-readme-stats。 插件实现 插件主体 [代码]// src/plugins/Git.tsx import { PostPlugin, PostPluginVariable } from '@/plugins/Plugin'; import { PropsWithChildren } from 'react'; export class GithubStatPlugin extends PostPlugin { getNamespace(): String { return 'com.github.stat'; } getVariables(): Array<PostPluginVariable> { return [ { title: '用户名', dataIndex: 'username', required: true }, ]; } getComponent(): Function { return (props:PropsWithChildren<any>)=>{ return ( <div> <img src={`https://github-readme-stats.vercel.app/api?username=${props?.username}&locale=cn`}/> </div> ); }; } } export class GithubRepoPlugin extends PostPlugin { getNamespace(): String { return 'com.github.repo'; } getVariables(): Array<PostPluginVariable> { return [ { title: '用户名', dataIndex: 'username', required: true }, { title: '仓库', dataIndex: 'repo', required: true }, ]; } getComponent(): Function { return (props:PropsWithChildren<any>)=>{ return ( <div> <img src={`https://github-readme-stats.vercel.app/api/pin/?username=${props?.username}&repo=${props?.repo}&locale=cn`}/> </div> ); }; } } export class GithubLangPlugin extends PostPlugin { getNamespace(): String { return 'com.github.lang'; } getVariables(): Array<PostPluginVariable> { return [ { title: '用户名', dataIndex: 'username', required: true }, ]; } getComponent(): Function { return (props:PropsWithChildren<any>)=>{ return ( <div> <img src={`https://github-readme-stats.vercel.app/api/top-langs/?username=${props?.username}&layout=compact&locale=cn`}/> </div> ); }; } } [代码] 注册插件 [代码] Plugins.regPlugin(GithubStatPlugin); Plugins.regPlugin(GithubRepoPlugin); Plugins.regPlugin(GithubLangPlugin); [代码] 插件效果 有插件 [图片] 无插件 [图片]

最近在用Taro框架做小程序。有一个页面要获取页面的路由参数，但是Functional Component拿不到[代码]onLoad(Object query)[代码]的query，Taro也没直接提供onLoad的hook。Taro官网只提到了Class Component下获取路由参数的方式[代码]Taro.getCurrentInstance()[代码] ，查了一些资料后，在Taro的文档的角落里找到了[代码]useRouter()[代码] 。 第一次写技术文章😜 第一种方法 文档给的示例是Class Component，试了一下，Functional Component也能用 [代码]Taro.getCurrentInstance() [代码] [图片] 第二种方法 文档 [代码]useRouter() [代码] [图片]

前几周开始了校园技术运营官的实习，正好重启咕了好久的博客计划😁（一直没正式开启过hhh） 架构 在之前无数次“demo”实验之后，确定使用Ghost博客系统。 目前后端用的是腾讯云的数据库（今年618打折买的）+学生机，学生机上安装Docker跑Ghost镜像。 前端暂时是自己写得（调用Ghost的API）。架构是umi + tailwindcss 后端 安装docker、docker-compose 新建ghost.yml [代码]services: ghost: image: ghost:4-alpine restart: always ports: - 8888:2368 volumes: - ./content:/var/lib/ghost/content environment: # see https://ghost.org/docs/config/#configuration-options database__client: mysql database__connection__host: *数据库地址* database__connection__user: *数据库用户名* database__connection__password: *数据库密码* database__connection__database: *数据库表名* # this url value is just an example, and is likely wrong for your environment! url: https://yoursite.com # contrary to the default mentioned in the linked documentation, this image defaults to NODE_ENV=production (so development mode needs to be explicitly specified if desired) #NODE_ENV: development [代码] 运行 [代码]docker-compose -f ghost.yml up -d [代码] 打开 https://yoursite.com/ghost/ 进行配置 前端 跟着umi官方教程创建一个umi项目，添加umi-plugin-tailwindcss插件。 给Ghost Content API设置一个统一的调用函数 [代码]// utils.jsx import { request as req } from 'umi'; export const request = (url, options) => { return req(`https://yoursite.com/ghost/api/v3/content${url}`, { ...options, params: { key: '*访问秘钥*', ...options?.params, }, }, ); }; [代码] 设置页面路由 [代码]import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, headScripts: [], routes: [ { path: '/', component: '@/pages/layout', routes: [ { path: '/', component: '@/pages/index' }, { path: '/posts/:id', component: '@/pages/posts/index' }, { path: '/:slug', component: '@/pages/posts/index' } ] }, ], fastRefresh: {}, }); [代码] 首页 访问[代码]GET /posts/?include=tags,authors[代码]获取所有文章，并进行解析 [图片] 文章页 访问[代码]GET /posts/:post_id[代码]和[代码]GET /posts/slug/:slug[代码]获取文章，并进行解析 [图片] [图片] 结束&规划 目前PC端显示基本没问题了，但是手机还没适配😂下周优化一下手机版，再给一些国内网站做点适配（例如在文章中插入百度网盘模块、网易云音乐播放器、哔哩哔哩视频播放器） 现在文章中显示代码块的功能是用jQuery🌿进React的🤣，如果有什么更好的方案，欢迎讨论呀~😉 后续可能会开源前端项目吧（跪求各位大佬轻喷Orz😆） 我的Github、微信开放社区、网站