垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能

微信小程序 专栏收录该内容
90 篇文章 18 订阅

效果图

1,图片识别垃圾

2,垃圾分类答题

2-1,答题

2-2,答题结果

3,科普视频

4,垃圾分类指南

5,自主添加垃圾

6,查看垃圾

7,搜索垃圾所属分类

第1节~微信开发者工具的安装与使用

我们在开发小程序之前,首先需要安装小程序开发者工具,今天就来教大家安装小程序开发者工具。

一,其实很简单,只需要进入小程序官网,然后点击工具,如下图所示。



当然了,也可以直接通过下面链接去下载
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

二,下载安装包如下


不管你是window还是mac电脑,只需要双击安装包实现安装即可。

等待安装即可

安装完成

三,进入开发者工具


第一次进入时,如下

点击上图的加号,我们来创建一个新项目

完成上图的配置后,点击新建。即可创建项目。创建好以后的项目如下图所示。

这样我们就完成了小程序开发者工具的安装了,后面我们就可以开始小程序的代码编写了。

第2节~注册小程序

我们前面虽然可以用测试号创建小程序,但是测试号有很多功能会受限,比如我们后面讲的云开发,必须是注册小程序后才可以使用,所以今天我们就来讲讲小程序的注册.

其实官方给的注册步骤很详细了


官方注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
进入注册页面时,跟着提示一步步来就可以了

注意点:

如果只是学习的话,注册个人小程序即可.
如果想商用,想使用微信支付,取用户手机号等复杂功能,可以注册企业小程序,不过企业小程序必须有营业执照才可以注册.

第3节~云开发环境的创建

今天我们就来正式的创建自己的第一个云开发项目,在创建云开发之前,有下面几个注意事项

  • 1,必须注册小程序后才可以开通云开发
  • 2,一个小程序可以创建两个云开发环境,学习的时候最好只创建一个

一,创建一个云开发项目


和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示.

二,开通云开发

  • 1,点击下图箭头所示,如果你第一步创建项目时,没有使用自己的appid,这里不会有下图箭头所示的云朵.

  • 2,给云开发环境取名

    等待创建

    创建成功

  • 3,获取云开发环境id

三,初始化云开发环境

在app.js里写入环境id,注意这里要用你自己的云开发环境id

 wx.cloud.init({
        env: "xiaoshitou-xs7fr"
 })


用时候云开发创建好以后,初始化可能需要一点时间,所以如果这里初始化有报错,记得关闭开发者工具,等几分钟再重新打开即可.

四,学习创建数据表(集合)

初始化成功后,就可以创建一个数据表,为后面操作云开发数据库做准备了.

第4节~垃圾分类小程序的部署

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

一,代码的部署

1,下载源码

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

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


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

3,开通云开发

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

4,创建数据表(集合)

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

product,questions,sort的权限都设置为所有人可读写

5,导入数据到数据库

把下图所示的三组数据导入到对应的数据库

如导入sort.json里的数据到sort集合


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

6,部署云函数

先选择云开发环境

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

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

二,百度图片识别的配置

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

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

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


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

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

三,使用百度识图

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

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

把对应的百度识别域名添加进来就可以了。

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

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

持续更新中,敬请关注

  • 3
    点赞
  • 6
    评论
  • 9
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值