纵有疾风起
人生不言弃

小程序案例源码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~垃圾分类+答题小程序

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活