为了让群友们 7 月份能愉快地决定喝什么奶茶，我花了 3 个晚上，从设计到开发，上线了一个叫「今天喝点什么呢」的小程序，功能非常简单，就是随机 roll 今天喝什么而已。

这篇东西就是简单说说我具体干了些什么和遇到什么问题。

核心以 Github上一个小程序项目的随机功能作为轮子，最重要的部分有了的话，剩下的就比较好处理了。

Day 1

我需要一张包含页面背景颜色，按钮样式，文字样式等的简单设计图，这个很快就做完了。

大致翻看了一下已有代码并开始按设计图重写，主要（在搜索引擎协助下）写了基础配置、文本与按钮的各种属性、固定底部和数据这几项，都很简单。

其中遇到一个问题，文字的 text-decoration-line: underline 效果并不好看，且显示中文时下划线会紧贴文字底部，也不能单独修改颜色，所以果断舍弃了这个写法，改成由行高结合 boxshadow 来做出下划线的效果。

其实还有一个问题，在 app.json 里写的背景颜色不生效，但是没关系，至此基本设计和流程都没问题了。

Day 2

首先解决了 background 属性不生效的问题，通过搜索引擎帮助把背景颜色改写在了页面的wxss里，解决了。

接下来我需要在首页加载一张插图，但我不想打包在程序里，我想尽量减少包的大小加快加载速度，毕竞我们要专注于究竟点什么奶茶，所以选了一个在线图床来储存图片。

用钢笔工具随意画了张草图，代码中加了一个 image 控件，填上图片地址，成功把图加载了出来，第二个问题解决了。

下一个问题是，我需要点击按钮后插图隐藏的效果，但我不会写js。幸运的是翻看原有的代码文件和官方文档，发现了可以用已有的 wx.if 条件来处理。对 image 加了一个 wx:else 条件，问题算是成功并生硬地解决了。奶茶生涯差点止步在了这个地方，有惊无险。

下一个需求是：选好了喝什么，当然需要分享出去！又又又又在搜索引擎的帮助下，添加上了分享功能，分享效果如下图，还不错。到了这个地步，除了首页的插图以外，基本上算是完成了。

下一步是继续看官网文档学习审核和上线流程，注册了一个小程序开发者账号，在申请名字时，发现「今天喝什么」已经被申请过了。

幸好任务栏中（首页下拉后）显示的小程序名称和小程序本名是可以相对不一致的，而且也有修改名称和图标的机会，大概起了个名做了个图标就提交申请了。

Day 3

收到了申请通过的通知，拿到了 appid，今天剩下的主要任务是完成插图。

首页出现的文字选用了「喜鹊造字」的一款字体，很喜欢这个团队的字体，趁这个机会买了其中一款的版权，也不贵，以后也能用，挺好。

插图来自于一个自定义表情，尝试使用Ai的铅笔+平滑的方法来处理，有限的时间内自我感觉整体完成度也算还不错。

插图完成后更新了图片地址，代码中微调了一下大小，填上appid，提交了体验版本和审核版本，结束了。

Day 4

就等审核通过和发布了：D

不过就算是这么简单的一个小程序，还是有些 bug 的，有空的时候也许会修一修。希望大家都能愉快喝上想喝的奶茶，就这样吧，晚安。