微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
- 序
大概在2018年8月份,突发的一个想法就是接触下微信小程序来练练手,虽说这个时间点微信小程序已经很火了,但想想古人说的话:“整就中咧,干就完啦”。所以还是坚持走一遍,建一个自己的处女版微信小程序--------必背诗(孪生篇:我的成语库)。
- 思路
巧合得是,刚好手头有一部分的古诗资源(前期只是娃娃学校要求背诵的136首古诗,word格式:题目、作者、朝代、诗词内容。Word转到Excel,然后从Excel转到MySQL,最后清洗MySQL数据。诗词注释,是用Python爬虫从百度文库爬取到MySQL中。后来在****上找到了一个诗词库,通过去重,丰富到了422首。免费获取诗词库的可以继续向下走 ),把它做到一个应用中:有搜索、有作者、有朝代、有内容、有收藏、有注解、有发音、有分享、有分类......岂不是将来检查孩子古诗背诵质量的神器(网上已经有不少这样的小工具了,但不是自己写的,感觉不爽)?
想法一定要:简单明了,不扩大,不幻想;先出来点东西,后期再逐步迭代改进,不松劲儿,一松劲儿就会扯淡的。(发音功能、分享功能是在2019年5月份才逐步加进去的)
- 申请开发者账号(个人账号)
用邮箱申请一个开发这账号:微信公众平台
起一个闪靓的名字:必背诗(可修改,但一年最多修改2次。登录开发者账号:设置->基本设置)
做一个鲜艳的头像:如下图(可修改,但一年最多修改5次。png、jpeg等,上限2M,144px*144px)
服务类目一定要选对,否则审核被拒。(注意:有些时候审核可能被拒,但只要自己确定选择的服务类目与实际内容相符,可以进行申诉,并附件截取证图)
- 功能设计开发及部分代码实现
首页(必背诗):轮播(做过电商App总感觉上面不滚动点东西别扭)、搜索(标题、作者、朝代、内容模糊查询)、分类(粗暴的将<=8句的分为小学,反之为初中,待改进todo...)、分类列表、古诗文详情、赞赏榜(个人账号下无法申请微信支付,印证赞赏码在小程序下是可以实现打赏的。再次感谢朋友们的信任、支持与赞赏,但里面有一部分是假数据哟。注意:网络支付须谨慎)
分类:作者、朝代、收录总数;诗词列表;进入古诗文详情。实现下拉刷新、获取更多分页等功能。
我的:个人头像及昵称、我的收藏、必背诗说明等。
古诗文详情:标题、朝代、作者、内容、注解等文字的展示。
语音播放:使用百度开放平台(在线合成API接口文档:https://ai.baidu.com/ai-doc/SPEECH/0k38y8mfh)提供的免费版的在线语音合成。
a)微信开发者平台维护服务器配置信息(开发->开发设置),request合法域名即指向业务API Server服务器域名,需要通过备案,配置CA证书(阿里云有一款免费的CA证书可以使用),下载小程序校验文件到域名根目录,校验完成后还可以删除。
b)百度开发者平台创建应用,获取API Key和Secret Key。
c)在自己业务API Server上获取TTS-AccessToken。
d)小程序端调用业务API获取AccessToken后,向百度API发起在线合成请求。
自动分享朋友圈图片:为丰富效果,预置了15张底图,一定要将图盘的大小压缩到更小,否则整个应用大小超限,会导致无法提交审核。小程序随机抽取图片当作底图,然后按顺序绘制相关信息,如:昵称、标语、标题、作者、朝代、内容、年月日、叠加头像和小程序二维码图片。背景图片是深色的,需要用浅色的文字;反之,用深色的文字。目前的判断是写死的。后期待研究自动识别图片的色值todo...
动态获取用户微信头像,并进行图片合成时,可能会出现头像尚未下载完成。因此,增加200ms的延迟,尝试后通过。(用户的网络环境、手机处理速度都可能导致头像未下载完成情况,适当增大延迟,根本性解决待研究)
在线客服:首先,在微信开发者管理后台绑定客服微信,功能->客服->添加客服人员。然后,在小程序端增加客服入口,其属性open-type="contact",即可。微信客服消息(客服消息 | 微信开放文档)。
赞赏、分享、注解按钮动画:在生命周期onShow方法内创建动画、创建定时器。在生命周期onUnload、onHide方法内,分别清除计时器。
- 必背诗-流量主
微信小程序累计达到1k UV后,才可以植入广告。广告分为Banner、激励式视频、插屏广告、视频广告等。代码植入很简单:<ad unit-id="adunit-XXXXXXXXXX"></ad>
看见这么大的数字收益,你笑了,我也笑了~
- 数据库:MySQL(分享资源)
古诗词的《表结构及数据》可以到****论坛下载地址:古诗词表结构及数据SQL dt_a_table_bbs_2020-05-13.sql 共422首,需要5积分的哟。
若不想用****的积分,可以私信我或在这里留下你的邮箱,我将文件免费发给你,仅做个人爱好或技术研究使用。
- 必背诗 & 我的成语库 微信小程序
最后,欢迎大家拿起手机,打开微信:扫描我、分享我、并关注我的小程序;同时,也希望能给大家带来快乐、带来方便。