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

效果图

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云函数
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能

三,使用百度识图

这个时候直接使用,通常会报下面的错误。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能
这个错误是因为我们没有配置安全域名所致。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能
把对应的百度识别域名添加进来就可以了。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能
这个时候你需要去你的小程序里配置上图所示的服务器域名。这样我们再次使用时,就可以成功的使用垃圾图片识别功能了。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能
这样我们就可以愉快的使用垃圾分类小程序了。

持续更新中,敬请关注