站点图标 起风网

小程序案例源码001~垃圾分类+答题小程序

小程序案例源码001~垃圾分类+答题小程序缩略图

今天我们来讲下垃圾分类小程序的部署,部署中一些细节的问题也会给大家讲解下。

老规矩,先看效果图

支持搜索查询和垃圾图片识别

搜索到垃圾后,可以显示属于那种垃圾

可以自己添加新的未知垃圾

垃圾分类科普视频

视频侧滑栏

答题测试类效果

答题完成评分

下面来讲部署

1,下载源码

如果有买我课,或者办我的年卡,都可以获取到源码。

2,打开开发者工具导入源码

源码的导入我在小程序基础课里有讲的。

3,开通云开发

云开发的开通,在我云开发基础入门里也有讲,这里就不在累述。
创建好云开发后,要在app.js里进行云开发环境的初始化。

4,创建数据表(集合)

我们要在云开发数据库里添加 sort,product,commit 这三个集合。

权限都设置为所有人可读写

5,导入数据到数据库

把上图所示的两组数据导入到数据库
如导入sort.json里的数据到sort集合

product.csv的导入和这个一样的操作。只不过是导入数据到product表。

6,部署云函数

先选择云开发环境

如下图所示,部署云函数。

下面6个云函数都要部署,部署成功后文件前面会出现一个云朵的标识。

百度图片识别的配置

如下图所示,我们要配置百度识图的apikey和sectetKey

下面我们讲下如何去获取百度识图的apikey和sectetKey
我们需要进入百度识图的官网,去注册账号
http://ai.baidu.com/ai-doc/IMAGERECOGNITION/8k3e7f69o

注册好以后去创建一个应用

这里我等下也会视频讲解,如果有买我课,或者办我的年卡,都可以获取讲解视频。
把获取到的apikey和sectetKey替换到下面

替换好以后不要忘记再次部署下baiduAccessToken云函数

使用百度识图

这个时候直接使用,通常会报下面的错误。

这个错误是因为我们没有配置安全域名所致。

这个时候你需要去你的小程序里配置上图所示的服务器域名。这样我们再次使用时,就可以成功的使用垃圾图片识别功能了。

这样我们就可以愉快的使用垃圾分类小程序了。

新加功能

后面又新加了视频播放和做题类的功能,下面给大家讲下如何把这两个新功能加到垃圾分类小程序里。

1,首先还是要新建两个数据集合(数据表):questions和notes

questions是我们的题库,notes是用户的错题集。记得把权限改成所有人可读写。

2,导入数据到questions表

打开数据可以看到,value等于1的时候是正确答案

你也可以设置单选和多选,或者再往题库里添加数据

3,数据导入成功以后,我们就可以来看我们的题库功能了

题目做完后,可以看到我的得分和错题个数。也可以选择重新做。

文章转载于:https://www.jianshu.com/p/4b5e47942f20

原著是一个有趣的人,若有侵权,请通知删除

退出移动版