小程序神奇字体的从零到一

成品是下边的小程序,神奇字体,可以生成不同样式的字体,𝓘 𝓵𝓸𝓿𝓮 𝔂𝓸𝓾 𝓽𝓱𝓻𝓮𝓮 𝓽𝓱𝓸𝓾𝓼𝓪𝓷𝓭. 在各个平台使用。

从 5 月 2 号晚上开始构思执行,到 3 号凌晨上线 web,到 4 号上线小程序「神奇字体」, 到今天 6 号成功开通了流量主,应该能赚点零花钱,哈哈哈哈。复盘一下整个过程,自己遇到的问题,自己使用的工具。

2 号下午

在微信群里看到有人问 𝙄 𝙡𝙤𝙫𝙚 𝙮𝙤𝙪 𝙩𝙝𝙧𝙚𝙚 𝙩𝙝𝙤𝙪𝙨𝙖𝙣𝙙. 是怎么生成的?

晚上碰到电脑,就开始研究,直到凌晨 3 点多完成了 text.windliang.cc 网页的上线和在石墨写了一篇总结的文章 https://shimo.im/docs/onTnczeeCkY607ug/

原文如下:


最后的成果,http://text.windliang.cc/

说一下自己的脑回路。

昨天下午在微信群看到有人问,下图的英文怎么打出来的。

img

作为一个学计算机的,这我就不服了,于是开始了探索之路。

首先想到了 Unicode 字符集,一定是这里作怪,晚上回去后,开始试验。

直接复制这句话,到浏览器控制台。

img

没什么问题,然后去掉所有字母,只保留第一个字母 “𝙄”,并且输出一下它的长度。

img

果然是 2,之所以 2 就是因为 js 内部是用 utf-16 编码,正常情况是 2 个字节代表一个字符。比如正常的 a 字符,它内部字节就是 0x0061。而后来扩充了很多字符,一个字符就需要 4 个字节表示,我们一直用的 emoji 字符就是这样的。

img

这块是很大一块内容,先不说了,接着讲后边的事情。

知道了这个以后,自己当然想着,就做一个转任意字母的网页吧,然后问题又来了?这些字符的码点值都是多少?

img

可以看到 “𝙄” 码点值是 0x1d644。然后就去查 Unicode 所有的码点值了,然后就找到了下边的网站。https://www.unicode.org/charts/

img

这里包含了所有的字符集,那怎么找到我们要的呢?观察到他每一个都是 PDF 链接,而且命名都是以码点范围来命名的。于是

img

直接打开控制台去搜,就找到了我们要找的那个字符。发现他是 Mathematical Alphanumeric Symbols 下的,数学字母数字符号。

img

万事俱备,只欠东风,有了对应关系,只需要做加法就行了,下边几句就是代码的关键了。

img

由于最近看了几天 Vue 的书,想着就当一个练手项目吧,于是就敲着敲着,就好晚了。

至此,http://text.windliang.cc 诞生了。


网站我直接使用的 github 的 pages 服务,简单来说,它可以免费托管任何的静态网站,本意是用来写博客的,但我觉得可能被我玩坏了,写了好多网页都直接部署在上边,方便快捷不要钱。它会提供 github.io 的域名,也可以使用自己的域名。我直接用了自己的 windliang.cc 域名,然后绑了二级域名 text,域名现在很便宜的,一年也就几十块钱,而且买了域名后,二级域名也可以绑理论上无数个域名,例如我的 http://idea.windliang.cchttp://love.windliang.cchttp://leetcode.windliang.cc 都是同一个域名下的,而且都是在 github 上放着。

之前写的网页都没有加网站访问量的,那天晚上突然想到这个程序也许会火呀,就加了一个最简单的流量统计,不蒜子提供的统计服务,简单到什么程度呢,加一句代码,就知道网站访问量,当然也只有访问量。

之后分别在朋友圈和知识星球「帅张和他的朋友们」发了一下就睡了,此时已经是凌晨 3 点了,每次一写程序总是停不下来,哈哈哈哈哈哈哈哈哈。

3 号上午

9 点起来后,网页的浏览量已经过千了,然后分别在微信群「大猫城堡」和「增长黑盒」发了自己的网页,然后就又睡了,再起来就 12 点多了。

然后发现大家在群里都反馈的不错,并且都试用了一下,有很多群友建议可以做一个小程序,认识了 @森淼。 由于之前也没有接触过小程序,然后下午就开始研究了。

期间 @增长黑盒 Alan帮推了朋友圈,下午的时候发现网页浏览量在持续上升,我记得好像有两三千了。晚上的时候,同学又和我说在即刻看见 @刀姐doris 帮推了一下。

3 号晚上

到了 22:20 ,小程序基本功能实现,然后和女朋友要图标,哈哈哈哈。

然后处理了一下细节,23:44 提交了小程序,发了朋友圈,建立了一个群,让大家找找 BUG 提提意见,此时网页浏览量已经达到了 6000。

然后,群里的小伙伴反馈了一下,就去睡了。

4 号中午

11 点起来之后,发现小程序审核失败了,可能是因为自己在文字里加了「如果喜欢,可以分享」类似的话,然后去掉后又提交了一次,审核的很快,好像不到半小时就审核通过了。就是下边的第一版,看起来很粗糙的样子。

接下来,在朋友圈和微信群「大猫城堡」、「增长黑盒」分享了小程序,在知识星球「路人甲乙丙」分享了一下。

然后,在网页里加上了小程序名字,后来又加上了小程序的二维码。

到了晚上,基本的功能完成了,然后在女朋友的指导下把页面美化了一下,很多细节处理一下,之后又提交了。

5 号

小程序开通流量主的条件是 UV 达到 1000,而 4 号一天 UV 是 700 多,所以还未达标。 5 号的时候,认识了 @张佳,是 @森淼 推荐的,然后 @张佳 帮在他的知识星球「数据和黑科技」推了一下小程序和 @wulujia 老板的「产品学徒」星球推了小程序。

还有许多我不知道的人帮我做了分享,在此感谢大家。

然后继续做了细节的优化,提交了一版小程序。

6 号

也就是今天,上午的时候进入小程序主页,发现达到了开通流量主的条件,发现开通的话需要银行卡,身份证的照片,无奈身上没有。等到下午女朋友回到屋里,给我了照片,开始了申请。差不多一个小时,银行卡信息通过了。然后就将广告代码,加入小程序中,提交审核。差不多又是一个小时,审核通过。接下来是,广告组件的审核,差不多快一个小时,收到了一条短信,

上网页看,广告组件也审核通过了,总体上微信的审核速度还是蛮快的,工作时间应该是周一到周五,9点 - 21点;周六周日,9 点 - 19点,晚上发的基本是第二天上午通过审核,至此小程序就基本完成了。

数据分享

分享一下小程序,不到三天的数据。

主要传播渠道就是微信群、知识星球、朋友圈,还有网页留下的小程序码。

总结

主要用到了石墨文档,github pages 服务,不蒜子,知识星球。

像@刘大猫讲的,开始网页没有留任何沉淀流量的东西,二维码,微信类似的,造成了前期的一些流量的浪费。对于流量的沉淀,自己这方面一直没有很深的体会,以后可以多看一些案例学习。还有由于自己的 .cc 域名不能备案,在微信会先跳转到微信 110 ,对用户来说不方便。

有很多人夸自己的执行力,我觉得只是自己很喜欢编程吧,当热爱一件事情的时候,就会很想把它做好,做完,还有就是一种要做就要做完的精神。

以上就是整个过程了,希望对大家有些许帮助。

windliang wechat