效果图
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云函数
三，使用百度识图
这个时候直接使用，通常会报下面的错误。
这个错误是因为我们没有配置安全域名所致。
把对应的百度识别域名添加进来就可以了。
这个时候你需要去你的小程序里配置上图所示的服务器域名。这样我们再次使用时，就可以成功的使用垃圾图片识别功能了。
这样我们就可以愉快的使用垃圾分类小程序了。