无需开发/体验权限,获取任意微信小程序卡片页面路径

背景

工作上正在开发的一款小程序,需要链接到京东购物的一个活动页面。经过搜索发现,除了在小程序内嵌 Webview,小程序内不能直接跳转一个网页,但是京东也是有自己的小程序的,我们可以跳转到京东的小程序吗?查找文档发现可以用 wx.navigateToMiniProgram 打开另一个小程序。

1
2
3
4
wx.navigateToMiniProgram({
appId: '', // 要打开的小程序 appId
path: '' // 打开的页面路径,如果为空则打开首页
})

现在需要的就是京东小程序的 appId 和活动页面的 path 了!

一番操作后,我发现微信 APP 上既不能获取到小程序的 appId 也不能获取到活动页面的 path,若要获得这两样东西,得开启调试才行,想开启调试,至少要成为小程序开发者……

京东小程序的开发者,我怎么可能拿得到嘛,我连他们的开发者都接触不到!

阅读更多

VuePress 自定义默认主题页眉页脚

方式

添加 2 个文件

.vuepress/theme/index.js
1
2
3
module.exports = {
extend: '@vuepress/theme-default'
}
.vuepress/theme/layouts/Layout.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<ParentLayout>
<template #sidebar-top>
<div>My custom sidebar-top</div>
</template>
<template #sidebar-bottom>
<div>My custom sidebar-bottom</div>
</template>
<template #page-top>
<div>My custom page-top</div>
</template>
<template #page-bottom>
<div>My custom page-bottom</div>
</template>
</ParentLayout>
</template>

<script>
import ParentLayout from '@parent-theme/layouts/Layout.vue'

export default {
name: 'Layout',
components: {
ParentLayout
}
}
</script>
阅读更多

博客已启用 Twikoo 评论系统

评论系统一直是静态网站的痛点。

  • Valine:安全性不高
  • Gitalk:需要评论者注册Github
  • Disqus:需要注册,国内访问不畅
  • 畅言:广告多,需要验证手机号

难道就没有一个完美的方案?

咕咕咕了近三个月后,我自己搞出了一套评论系统,并命名为 Twikoo。

  • 成本上,腾讯云云开发环境可以免费搭建
  • 安全性上,使用腾讯云云函数开发接口,不开放一丁点数据库权限,未来更新将接入 Akismet 反垃圾检查
  • 易用性上,支持点赞、邮件通知、微信通知(限博主),未来会增加更多玩法

欢迎访问 twikoo.js.org 了解更多。

阅读更多

Valine 1.4 如何保护评论者的邮箱和 IP

前言

AyagawaSeirin 提出了一个 Valine 隐私安全漏洞,发送请求中响应内容明文暴露评论者IP、邮箱等隐私内容,所以我就去查了一下 LeanCloud 文档,发现可以手动更改字段权限,但是,如果设置 mail 客户端不可见,将不会显示评论者的 Gravatar,转为显示默认头像,因为原版是取到明文邮箱后再转 MD5 取头像的。想到的解决办法是新增一个可见字段存储 mail 的 MD5,需要改 Valine 源码,还需要处理现有数据。

以下是我实现的魔改版本,基于 Valine.min.js 版本 1.4.14 修改。该魔改版新增一个可见字段(mailMd5)存储 mail 的 MD5,并提供了脚本处理现有评论数据。

阅读更多

神奇的 @media (prefers-color-scheme: dark)

夜间模式已经实现很久了,当初有人跟我讲,可以增加一个按时间切换的功能。

直到我在无意间查看 Reabble 阅读器的 CSS 样式时,发现了 @media (prefers-color-scheme: dark) 选择器。

来自prefers-color-scheme - CSS(层叠样式表) | MDN
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

简而言之,就是可以实现随系统(或浏览器)的深、浅色模式设置,改变网页配色。

我觉得这是比按时间切换更好的一个实现,跟随系统设置比跟随时间更加人性化一些,毕竟还有我这种,白天开深色,晚上开浅色的异类(逃)

阅读更多

VuePress 密码加密文章

前言

事情的起因是,我需要一个存放未分类整理知识点,以及收藏转载文章的私人知识库,和 iMaeGoo’s Blog 区别开来。

我尝试过简书、语雀、Evernote、OneNote、有道云笔记,对它们的 markdown 支持、导出能力、搜索能力、容量、安全性都有体会。

频繁的整顿让我对其安全性产生担忧

最后我决定建一个私人 Git 仓库,用 markdown 来记笔记。然后通过 CI/CD 自动构建到一个叫 iMaeGoo’s Diary 的 VuePress 网站。写笔记 Notepad + Git 就能搞定,还能自由选择多种多样的 markdown 编辑器,手机端也可以通过在线 IDE 更新内容,VuePress 的搜索非常好用,安全性也完全在自己的掌控范围之内。

反正是知识库嘛,我配置了完全公开,方便自己随时随地查看,但由于是未经整理的知识库,也不建议访客去看啦。

问题就来了,有些笔记包含了敏感信息,怎么在公开的知识库中保护这类信息?

在寻找 VuePress 加密时,我发现了 vuepress-plugin-encrypt 这个好用的插件,使用了 aes-128-ctr 来加密内容,你可以直接查看它的英文官方文档

阅读更多

PC 浏览器平滑惯性滚动(smooth scroll)一套简单实现

前言

主要是 Bing 找了许多 libraries。效果在 Chrome for Windows 上都不理想,要么滚动很生硬,要么就是太复杂,就自己实现了。

本来是 PC only 的,写好后测试了一下移动端,是兼容的,效果也还不错……

不过反正移动端都自带惯性滑动了

效果

无惯性滚动

有惯性滚动

阅读更多

解决 Edge 浏览器 SCRIPT5022: Exception thrown and not caught

JS 代码在 Safari, Chrome, Firefox 都是好的,就只有 Edge 莫名其妙地报错。

1
SCRIPT5022: Exception thrown and not caught

未捕获的异常?EXM?你倒是说是什么异常啊?行号还是错的?点过去无法定位错误位置?hash-navigation.js?我的项目里根本都没有这个 js 啊喂!

阅读更多

纯 CSS 实现椭圆轨迹旋转小球

话不多说看效果

阅读更多
网页中文字体压缩(woff2)、拆分、去繁体字库,提高加载速度

网页中文字体压缩(woff2)、拆分、去繁体字库,提高加载速度

从客户得到的网页字体足足有 10MB 大小,会严重拖慢网页加载,如何处理?

阅读下面的解决方法前,建议先阅读网页字体优化,了解一些基本知识,以及,为什么。

字体去繁体

GBK 结尾的字体偏大的原因是包含庞大的繁体字库,大多数网页并不需要,可以使用 fontTools 得到字体的简体中文子集。

阅读更多