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

效果图

1,图片识别垃圾

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

2,垃圾分类答题

2-1,答题

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

2-2,答题结果

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

3,科普视频

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

4,垃圾分类指南

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

5,自主添加垃圾

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

6,查看垃圾

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

7,搜索垃圾所属分类

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

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

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

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



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

二,下载安装包如下


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

等待安装即可
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第9张图片
安装完成
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第10张图片

三,进入开发者工具

垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第11张图片
第一次进入时,如下
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第12张图片
点击上图的加号,我们来创建一个新项目
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第13张图片
完成上图的配置后,点击新建。即可创建项目。创建好以后的项目如下图所示。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第14张图片
这样我们就完成了小程序开发者工具的安装了,后面我们就可以开始小程序的代码编写了。

第2节~注册小程序

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

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

垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第15张图片
官方注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
进入注册页面时,跟着提示一步步来就可以了
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第16张图片

注意点:

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

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

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

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

一,创建一个云开发项目

垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第17张图片
和创建普通小程序一样,如上图所示,需要注意的就是这里必须要填写自己的appid,不可以用测试号. appid的获取如下图所示.
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第18张图片

二,开通云开发

  • 1,点击下图箭头所示,如果你第一步创建项目时,没有使用自己的appid,这里不会有下图箭头所示的云朵.
    垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第19张图片

  • 2,给云开发环境取名
    垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第20张图片

    等待创建
    垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第21张图片
    创建成功
    垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第22张图片

  • 3,获取云开发环境id
    垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第23张图片

三,初始化云开发环境

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

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

垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第24张图片
用时候云开发创建好以后,初始化可能需要一点时间,所以如果这里初始化有报错,记得关闭开发者工具,等几分钟再重新打开即可.

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

初始化成功后,就可以创建一个数据表,为后面操作云开发数据库做准备了.
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第25张图片
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第26张图片

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

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

一,代码的部署

1,下载源码

如果有买我课,或者办我的年卡,都可以获取到源码。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第27张图片

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

垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第28张图片
源码的导入我在小程序基础课里有讲的。

3,开通云开发

云开发的开通,在我云开发基础入门里也有讲,这里就不在累述。
创建好云开发后,要在app.js里进行云开发环境的初始化。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第29张图片

4,创建数据表(集合)

我们要在云开发数据库里添加 commit,notes, product,questions,sort这五个集合。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第30张图片

product,questions,sort的权限都设置为所有人可读写
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第31张图片

5,导入数据到数据库

把下图所示的三组数据导入到对应的数据库
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第32张图片
如导入sort.json里的数据到sort集合
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第33张图片
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第34张图片
product.csv的导入和这个一样的操作。只不过是导入数据到product表。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第35张图片

6,部署云函数

先选择云开发环境
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第36张图片
如下图所示,部署云函数。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第37张图片
下面4个云函数都要部署,部署成功后文件前面会出现一个云朵的标识。
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第38张图片

二,百度图片识别的配置

如下图所示,我们要配置百度识图的apikey和sectetKey
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第39张图片
下面我们讲下如何去获取百度识图的apikey和sectetKey
我们需要进入百度识图的官网,去注册账号
http://ai.baidu.com/ai-doc/IMAGERECOGNITION/8k3e7f69o
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第40张图片
注册好以后去创建一个应用
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第41张图片
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第42张图片
这里我等下也会视频讲解,如果有买我课,或者办我的年卡,都可以获取讲解视频。
把获取到的apikey和sectetKey替换到下面
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第43张图片
替换好以后不要忘记再次部署下baiduAccessToken云函数
垃圾分类小程序,包含垃圾图片识别,答题,添加垃圾,搜索垃圾,科普视频等功能_第44张图片

三,使用百度识图

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

持续更新中,敬请关注

你可能感兴趣的:(微信小程序,小程序,垃圾分类,垃圾分类小程序,垃圾图片识别,图片识别)