怎么新建web程序_诗词类微信小程序开发

产品设计

我想做一个诗词类的小程序,核心功能是诗词的展示功能。围绕诗词可以查看诗人信息以及诗词创作年代。

核心功能确定下来后设计数据库,主要包括4张表:author(诗人表)、dynasty(朝代表)、poem(诗词表)、poem_collection(诗集表)。在这里我没有使用关联表,为什么这样设计后面会解释。

准备工作

搭建微信小程序的开发环境还是比较简单的,直接搜索微信小程序或者微信公众平台,然后注册账号并得到小程序的AppID

83ed711e4e43d8bb07068bc8e0e7af6a.png

接下来安装开发者工具,我就是用腾讯自己的开发工具,毕竟腾讯自己的工具集成了很多小程序开发所必须的功能,还是很方便的。

新建项目

首先打开开发者工具,新建项目,填入前面申请的小程序AppID。

247b52fc254b860c83cfd1033aa7757f.png

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

9f2e428c398636e99b7acb84d41091d5.png

由于我的小程序基本不可能为我带来收益,同时访问量以及空间占用都不大,所以我就选择了免费的基础版云环境。如果你的程序流量很大,那么还是考虑一下是不是使用付费版。

到此我的小程序项目“历代诗词赏析”就创建完成了。

工程简介

我的工程目录结构如下:

0ad53c48da707cd9cb95f3de9891920a.png

app.js是小程序的入口,在app.js中调用App方法生成全局唯一的App实例,开发者可以在任意页面调用getApp方法获得这个实例对象。

app.json 文件用来对微信小程序进行全局配置,包括全部页面路径,全局样式设置:

93b0d4da8fa18ae953bbe81a70022464.png

每个页面也可以单独设置json文件,页面的配置会覆盖app.json中的全局属性。

sitemap.json文件用于设置小程序及其页面是否允许被微信索引,默认所有页面都可以被索引。

app.wxss这个文件与传统web开发的css文件相似,用于设置小程序的全局样式。

pages文件夹是小程序的页面。每个页面都包括js、json、wxml、wxss几个文件,例如index页面:

fb4f47e8cb1e884ea18b9e3c45beb168.png

在这里有一个小技巧,如果要新建一个页面不需要自己一个一个的去创建上面这些文件,只要在app.json的pages属性中增加一个页面路径即可,微信开发者工具会自动帮助开发人员把以上页面结构创建出来。

cloudfunctions文件夹是云函数所在的文件夹,每个云函数都会在这里注册。

数据库设计

讲了这么多,现在开始正式开发。首先设计数据库,前面提到我只设计了4张表,没有关系表,在这里解释一下,由于腾讯的云开发数据库是文档数据库,也就是每张表都是json对象的集合,如果我使用关系表的话就会增加很多额外工作量,而如果我直接把每张表的关系都写在json中就会减少这方法的工作量,但是这会额外增加表的存储空间,所以还是要好好设计每张表。以诗词表、朝代表、诗人表为例来看看我是怎么设计的:

诗词表(poem): 包括两个字段author、dynasty,在添加数据时保证诗人和朝代没有重复数据。

d968f105995a3f9a5b1a46eea50db5db.png

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

56d8ccbe633a4769cf845f276dab72e9.png

朝代表(dynasty):

4900c06a0bd80560b963d08baf44fd99.png

开发云函数

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

eeae237bdd143629afe6f2bd065d7e2d.png

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

f520c4ce485f45ecb60e75ba77bb9d14.png

index.js是云函数主体:

764ffb10b6cd0e34b2d386a4380ec293.png

cloud.init()用于初始化云函数。

由于小程序中的所有方法都是异步的,所以exports.main使用了async。

event包含客户端传递的参数。

db.collection('dynasty')用于检索朝代表,where过滤朝代名。同理由于该方法也是异步的,所以使用await。

云函数写完之后可以在“云开发”中进行测试。在使用或测试云函数之前,一定要将云函数提交到服务器。第一次上传建议使用“上传并部署:云端安装依赖”,以后就可以使用“上传并部署:所有文件”了,当然如果只是修改了一个文件,也可以单独上传。

35495171a5c31b42a91df621e8f5e635.png

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

c81f25df4930ed889c9748e6775ea159.png
a9e7f38af65d565e8b06ef10adcd0a4e.png

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

48ee1377d446feb785a350b43ab28bd7.png

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

31a7f4295b49eebceccdc8974aafb98c.png

到此我的小程序服务端就开发完了。

开发页面

以朝代页面为例,页面结构如下:

478027312e9d10f310ae8e2e069bbae8.png

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

db9a6400e392cfe64751a3d21a3ddb28.png

wx:for可以循环生成一组相同的组件。

dynasty.wxss是样式文件,与传统web开发一样。

dynasty.js是页面的后台,主要用来编写小程序生命周期函数。

14792eb70f184c057bdc842ecce37ca8.png

onLoad函数是页面首次加载后的事件,在这里准备需要展示的数据。

一些小技巧:

  1. 使用rich-text组件可以很方便的展示富文本;
  2. 只为需要滑动加载的页面启用enablePullDownRefresh;
  3. 使用wx.showToast改善页面加载的用户提高。

小程序开发完,就可以提交腾讯审核了,我的小程序两天就审核通过了。


版权声明:本文为weixin_42261068原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。