产品设计
我想做一个诗词类的小程序,核心功能是诗词的展示功能。围绕诗词可以查看诗人信息以及诗词创作年代。
核心功能确定下来后设计数据库,主要包括4张表:author(诗人表)、dynasty(朝代表)、poem(诗词表)、poem_collection(诗集表)。在这里我没有使用关联表,为什么这样设计后面会解释。
准备工作
搭建微信小程序的开发环境还是比较简单的,直接搜索微信小程序或者微信公众平台,然后注册账号并得到小程序的AppID。

接下来安装开发者工具,我就是用腾讯自己的开发工具,毕竟腾讯自己的工具集成了很多小程序开发所必须的功能,还是很方便的。
新建项目
首先打开开发者工具,新建项目,填入前面申请的小程序AppID。

这里最最关键的一个选项就是“后端服务”。腾讯在这方便做的真是太好了,很多开发人员其实都没有服务器,为此腾讯为这类人员提供了免费的数据库服务器,当然也可以用作文件服务器。这个云开发提供了一个文档类型的数据库,包括各种价格级别,例如:

由于我的小程序基本不可能为我带来收益,同时访问量以及空间占用都不大,所以我就选择了免费的基础版云环境。如果你的程序流量很大,那么还是考虑一下是不是使用付费版。
到此我的小程序项目“历代诗词赏析”就创建完成了。
工程简介
我的工程目录结构如下:

app.js是小程序的入口,在app.js中调用App方法生成全局唯一的App实例,开发者可以在任意页面调用getApp方法获得这个实例对象。
app.json 文件用来对微信小程序进行全局配置,包括全部页面路径,全局样式设置:

每个页面也可以单独设置json文件,页面的配置会覆盖app.json中的全局属性。
sitemap.json文件用于设置小程序及其页面是否允许被微信索引,默认所有页面都可以被索引。
app.wxss这个文件与传统web开发的css文件相似,用于设置小程序的全局样式。
pages文件夹是小程序的页面。每个页面都包括js、json、wxml、wxss几个文件,例如index页面:

在这里有一个小技巧,如果要新建一个页面不需要自己一个一个的去创建上面这些文件,只要在app.json的pages属性中增加一个页面路径即可,微信开发者工具会自动帮助开发人员把以上页面结构创建出来。
cloudfunctions文件夹是云函数所在的文件夹,每个云函数都会在这里注册。
数据库设计
讲了这么多,现在开始正式开发。首先设计数据库,前面提到我只设计了4张表,没有关系表,在这里解释一下,由于腾讯的云开发数据库是文档数据库,也就是每张表都是json对象的集合,如果我使用关系表的话就会增加很多额外工作量,而如果我直接把每张表的关系都写在json中就会减少这方法的工作量,但是这会额外增加表的存储空间,所以还是要好好设计每张表。以诗词表、朝代表、诗人表为例来看看我是怎么设计的:
诗词表(poem): 包括两个字段author、dynasty,在添加数据时保证诗人和朝代没有重复数据。

诗人表(author):包括dynasty字段,这个虽然与诗词表中的字段重复了,但是却能给我节省很多工作量。

朝代表(dynasty):

开发云函数
刚才讲到云函数都存放在cloudfunctions文件夹下,右键单击文件夹,然后选择“新建Node.js云函数”即可:

以getDynasty方法为例,新建的云函数如下:

index.js是云函数主体:

cloud.init()用于初始化云函数。
由于小程序中的所有方法都是异步的,所以exports.main使用了async。
event包含客户端传递的参数。
db.collection('dynasty')用于检索朝代表,where过滤朝代名。同理由于该方法也是异步的,所以使用await。
云函数写完之后可以在“云开发”中进行测试。在使用或测试云函数之前,一定要将云函数提交到服务器。第一次上传建议使用“上传并部署:云端安装依赖”,以后就可以使用“上传并部署:所有文件”了,当然如果只是修改了一个文件,也可以单独上传。

上传后,单击“云开发”打开云开发控制台:


单击云方法后面的“云端测试”,就可以测试你的方法了。

滚动屏幕可以看到返回结果:

到此我的小程序服务端就开发完了。
开发页面
以朝代页面为例,页面结构如下:

dynasty.wxml是页面结构,和传统web页面类似,不过微信提供了一些新组件。

wx:for可以循环生成一组相同的组件。
dynasty.wxss是样式文件,与传统web开发一样。
dynasty.js是页面的后台,主要用来编写小程序生命周期函数。

onLoad函数是页面首次加载后的事件,在这里准备需要展示的数据。
一些小技巧:
- 使用rich-text组件可以很方便的展示富文本;
- 只为需要滑动加载的页面启用enablePullDownRefresh;
- 使用wx.showToast改善页面加载的用户提高。
小程序开发完,就可以提交腾讯审核了,我的小程序两天就审核通过了。