纵有疾风起
人生不言弃

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

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

老规矩,先看效果图

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

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

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

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

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

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

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

垃圾分类科普视频

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

视频侧滑栏

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

答题测试类效果

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

答题完成评分

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

下面来讲部署

1,下载源码

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

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

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

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

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

3,开通云开发

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

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

4,创建数据表(集合)

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

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

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

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

5,导入数据到数据库

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

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

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

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

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

6,部署云函数

先选择云开发环境

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

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

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

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

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

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

百度图片识别的配置

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

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

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

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

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

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

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

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

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

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

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

使用百度识图

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

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

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

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

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

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

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

新加功能

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

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

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

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

2,导入数据到questions表

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

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

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

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

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

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

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

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

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

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

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

未经允许不得转载:起风网 » 小程序案例源码001~垃圾分类+答题小程序
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录