微信小程序开发案例分享-必背诗:从0到1,从前端到数据库

大概在2018年8月份,突发的一个想法就是接触下微信小程序来练练手,虽说这个时间点微信小程序已经很火了,但想想古人说的话:“整就中咧,干就完啦”。所以还是坚持走一遍,建一个自己的处女版微信小程序--------必背诗(孪生篇:我的成语库)。

  • 思路

巧合得是,刚好手头有一部分的古诗资源(前期只是娃娃学校要求背诵的136首古诗,word格式:题目、作者、朝代、诗词内容。Word转到Excel,然后从Excel转到MySQL,最后清洗MySQL数据。诗词注释,是用Python爬虫从百度文库爬取到MySQL中。后来在****上找到了一个诗词库,通过去重,丰富到了422首。免费获取诗词库的可以继续向下走 ),把它做到一个应用中:有搜索、有作者、有朝代、有内容、有收藏、有注解、有发音、有分享、有分类......岂不是将来检查孩子古诗背诵质量的神器(网上已经有不少这样的小工具了,但不是自己写的,感觉不爽)?

想法一定要:简单明了,不扩大,不幻想;先出来点东西,后期再逐步迭代改进,不松劲儿,一松劲儿就会扯淡的。(发音功能、分享功能是在2019年5月份才逐步加进去的)

  • 申请开发者账号(个人账号)

用邮箱申请一个开发这账号:微信公众平台

起一个闪靓的名字:必背诗(可修改,但一年最多修改2次。登录开发者账号:设置->基本设置)

做一个鲜艳的头像:如下图(可修改,但一年最多修改5次。png、jpeg等,上限2M,144px*144px)

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
小程序头像(logo)

 

服务类目一定要选对,否则审核被拒。(注意:有些时候审核可能被拒,但只要自己确定选择的服务类目与实际内容相符,可以进行申诉,并附件截取证图)

  • 功能设计开发及部分代码实现

首页(必背诗):轮播(做过电商App总感觉上面不滚动点东西别扭)、搜索(标题、作者、朝代、内容模糊查询)、分类(粗暴的将<=8句的分为小学,反之为初中,待改进todo...)、分类列表、古诗文详情、赞赏榜(个人账号下无法申请微信支付,印证赞赏码在小程序下是可以实现打赏的。再次感谢朋友们的信任、支持与赞赏,但里面有一部分是假数据哟。注意:网络支付须谨慎)

分类:作者、朝代、收录总数;诗词列表;进入古诗文详情。实现下拉刷新、获取更多分页等功能。

我的:个人头像及昵称、我的收藏、必背诗说明等。

古诗文详情:标题、朝代、作者、内容、注解等文字的展示。

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
首页、分类、诗文详情和图片打卡分享

 

 

语音播放:使用百度开放平台(在线合成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发起在线合成请求。

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
a)微信开发者平台->开发->开发设置->服务器配置:request域名、downloadFIle域名

 

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
b)百度开发者注册免费账号及应用

 

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
c)Java-API Server代码片段:获取百度TTS授权access_token

 

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
d)微信小程序代码片段:通过access_token进行在线合成音频文件并下载播放

 

自动分享朋友圈图片:为丰富效果,预置了15张底图,一定要将图盘的大小压缩到更小,否则整个应用大小超限,会导致无法提交审核。小程序随机抽取图片当作底图,然后按顺序绘制相关信息,如:昵称、标语、标题、作者、朝代、内容、年月日、叠加头像和小程序二维码图片。背景图片是深色的,需要用浅色的文字;反之,用深色的文字。目前的判断是写死的。后期待研究自动识别图片的色值todo...

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序代码片段:绘制底图、昵称、标语等​​​​

动态获取用户微信头像,并进行图片合成时,可能会出现头像尚未下载完成。因此,增加200ms的延迟,尝试后通过。(用户的网络环境、手机处理速度都可能导致头像未下载完成情况,适当增大延迟,根本性解决待研究)

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序代码片段:用户微信头像下载,延迟200ms
 
微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序生成分享朋友圈图片效果
 

在线客服:首先,在微信开发者管理后台绑定客服微信,功能->客服->添加客服人员。然后,在小程序端增加客服入口,其属性open-type="contact",即可。微信客服消息(客服消息 | 微信开放文档)。

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序客服消息入口代码

赞赏、分享、注解按钮动画:在生命周期onShow方法内创建动画、创建定时器。在生命周期onUnload、onHide方法内,分别清除计时器。

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序代码片段:onShow方法内创建动画、启动定时器

 

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序代码片段:js清除定时器

 

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序代码片段:UI关联动画

 
微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
微信小程序:赞赏码展示、在线客服

 

  • 必背诗-流量主

微信小程序累计达到1k UV后,才可以植入广告。广告分为Banner、激励式视频、插屏广告、视频广告等。代码植入很简单:<ad unit-id="adunit-XXXXXXXXXX"></ad>

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
必背诗-累计UV统计图

 

看见这么大的数字收益你笑了,我也笑了~

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
必背诗-收益曲线

 

  • 数据库:MySQL(分享资源)
微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
必背诗-数据库:古诗文数据

 

古诗词的《表结构及数据》可以到****论坛下载地址:古诗词表结构及数据SQL dt_a_table_bbs_2020-05-13.sql 共422首,需要5积分的哟。

若不想用****的积分,可以私信我或在这里留下你的邮箱,我将文件免费发给你,仅做个人爱好或技术研究使用。

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
必背诗-表结构及数据文件

 

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
我的成语库-数据库:成语词典数据

 

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
我的成语库-表结构及数据文件

 

  • 必背诗 & 我的成语库 微信小程序

最后,欢迎大家拿起手机,打开微信:扫描我、分享我、并关注我的小程序;同时,也希望能给大家带来快乐、带来方便。

微信小程序开发案例分享-必背诗:从0到1,从前端到数据库
必背诗小程序二维码 孪生篇我的成语库小程序