垃圾分类小程序，云开发 (附源码)

置顶梦之归途

已于 2023-11-20 14:47:18 修改

阅读量1.2w

点赞数 8

分类专栏：小程序文章标签：小程序

于 2020-03-23 23:27:18 首次发布

本文链接：https://blog.csdn.net/lwzhang1101/article/details/105060990

版权

小程序专栏收录该内容

61 篇文章 9 订阅

订阅专栏

image 速览

部分主要源码

<!--index.wxml-->
<view class="container">

  <!-- 用户 openid -->
  <view class="userinfo">
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{avatarUrl}})"
    ></button>
    <view>
      <button class="userinfo-nickname" bindtap="onGetOpenid">点击获取 openid</button>
    </view>
  </view>


  <!-- 上传图片 -->
  <view class="uploader">
    <view class="uploader-text" bindtap="doUpload">
      <text>上传图片</text>
    </view>
    <view class="uploader-container" wx:if="{{imgUrl}}">
      <image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
    </view>
  </view>


  <!-- 操作数据库 -->
  <view class="uploader">
    <navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text">
      <text>前端操作数据库</text>
    </navigator>
  </view>

  <!-- 新建云函数 -->
  <view class="uploader">
    <navigator url="../addFunction/addFunction" open-type="navigate" class="uploader-text">
      <text>快速新建云函数</text>
    </navigator>
  </view>

  <!-- 云调用 -->
  <view class="uploader">
    <navigator url="../openapi/openapi" open-type="navigate" class="uploader-text">
      <text>云调用</text>
    </navigator>
  </view>


</view>


/**index.wxss**/

page {
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.userinfo, .uploader, .tunnel {
  margin-top: 40rpx;
  height: 140rpx;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: all 300ms ease;
}

.userinfo-avatar {
  width: 100rpx;
  height: 100rpx;
  margin: 20rpx;
  border-radius: 50%;
  background-size: cover;
  background-color: white;
}

.userinfo-avatar:after {
  border: none;
}

.userinfo-nickname {
  font-size: 32rpx;
  color: #007aff;
  background-color: white;
  background-size: cover;
}

.userinfo-nickname::after {
  border: none;
}

.uploader, .tunnel {
  height: auto;
  padding: 0 0 0 40rpx;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.uploader-text, .tunnel-text {
  width: 100%;
  line-height: 52px;
  font-size: 34rpx;
  color: #007aff;
}

.uploader-container {
  width: 100%;
  height: 400rpx;
  padding: 20rpx 20rpx 20rpx 0;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.uploader-image {
  width: 100%;
  height: 360rpx;
}

.tunnel {
  padding: 0 0 0 40rpx;
}

.tunnel-text {
  position: relative;
  color: #222;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: space-between;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tunnel-text:first-child {
  border-top: none;
}

.tunnel-switch {
  position: absolute;
  right: 20rpx;
  top: -2rpx;
}

.disable {
  color: #888;
}

.service {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: linear-gradient(#007aff, #0063ce);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-content: center;
  justify-content: center;
  transition: all 300ms ease;
}

.service-button {
  position: absolute;
  top: 40rpx;
}

.service:active {
  box-shadow: none;
}

.request-text {
  padding: 20rpx 0;
  font-size: 24rpx;
  line-height: 36rpx;
  word-break: break-all;
}


//index.js
const app = getApp()

Page({
  data: {
    avatarUrl: './user-unlogin.png',
    userInfo: {},
    logged: false,
    takeSession: false,
    requestResult: ''
  },

  onLoad: function() {
    if (!wx.cloud) {
      wx.redirectTo({
        url: '../chooseLib/chooseLib',
      })
      return
    }

    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              this.setData({
                avatarUrl: res.userInfo.avatarUrl,
                userInfo: res.userInfo
              })
            }
          })
        }
      }
    })
  },

  onGetUserInfo: function(e) {
    if (!this.logged && e.detail.userInfo) {
      this.setData({
        logged: true,
        avatarUrl: e.detail.userInfo.avatarUrl,
        userInfo: e.detail.userInfo
      })
    }
  },

  onGetOpenid: function() {
    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log('[云函数] [login] user openid: ', JSON.stringify(res))
        app.globalData.openid = res.result.openid
        wx.navigateTo({
          url: '../userConsole/userConsole',
        })
      },
      fail: err => {
        console.error('[云函数] [login] 调用失败', err)
        wx.navigateTo({
          url: '../deployFunctions/deployFunctions',
        })
      }
    })
  },

  // 上传图片
  doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]
        
        // 上传图片
        const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上传文件] 成功：', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            
            wx.navigateTo({
              url: '../storageConsole/storageConsole'
            })
          },
          fail: e => {
            console.error('[上传文件] 失败：', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  },

})

部分主要源码：

<view class='top-view'>
  <text>保护环境，人人有责</text>
</view>
<view class="cu-bar bg-darkGray search"bindtap="goSearch">
  <view class=" search-form  round ">
    <text class="cuIcon-search text-green"></text>
    <input type="text" placeholder="输入垃圾名称" confirm-type="search" bindinput="searchIcon"></input>
  </view>
</view>
<view class="grid col-2 padding-sm">
  <view class="padding-sm " wx:for="{{ColorList}}" bindtap="onClick"  data-index='{{index}}' wx:key>
    <image class="icon" src='{{item}}'></image>
  </view>
</view>
<ad unit-id="adunit-0f31496a9162efb6"></ad>


.icon{
  width: 220rpx;
  height: 220rpx;
  margin: 20rpx 40rpx;
  border-radius: 20rpx;
}
.padding-sm{
  width: 100%;
}
.top-view{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
}

.bg-darkGray {
	background-color:  #f6f6f6;
	color:#ffffff;
}
.cu-bar .search-form {
  background-color:  #ffffff;
}
.cu-bar{
  margin-top: 20rpx;
}


const app = getApp();
Page({
  data: {
    ColorList: [
      "../../images/RecycleableWaste.jpg",
      "../../images/HazardouAwaste.jpg",
      "../../images/HouseholdfoodWaste.jpg",
      "../../images/ResidualWaste.png",
    ]
  },
  goSearch: function () {
    wx.navigateTo({
      url: '/pages/ai/search',
    })
  },
  onClick:function(e){
    console.log(JSON.stringify(e))
    var index = e.currentTarget.dataset.index
    var indexClick=0;
    switch (index){
      case 0:
      indexClick=1
      break;
       case 1:
        indexClick = 2
      break;
      case 2:
        indexClick = 3
        break;
      case 3:
        indexClick = 4
        break;
    }
    wx.navigateTo({
      url: '/pages/ai/filter/filter?type=' + indexClick,
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "智能分类垃圾",
      imageUrl: "https://6465-debug-5c669b-1259717830.tcb.qcloud.la/share.png?sign=2ec95a7fa286225f6df67ad718c214aa&t=1565925671",
      path: "pages/sort/sort"
    }
  },
})

部分主要源码：

<view class="page-wrapper">
  <view class="title">干垃圾</view>
  <view class="desc">干垃圾即其它垃圾，指除可回收物、有害垃圾、厨余垃圾（湿垃圾）以外的其它生活废弃物。干垃圾是对垃圾按照可回收垃圾、厨余垃圾、有害垃圾分类后剩余下来的一种垃圾。生活垃圾的具体分类标准可根据经济社会发展水平、生活垃圾特性和处置利用需要予以调整。</view>
  <view class='imgList-li' wx:for='{{imgArr}}'>
    <image class='paycode' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>
  </view>
  <view class="adContainer">
  <ad unit-id="adunit-2f4b14df029312bf"></ad>
  </view>
</view>



.page-wrapper{
    width: 100%;
    height: -webkit-fill-available;
    background-color: #f8f8f8;
    text-align: center;
}
.page-wrapper .title{
    text-align: left;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    border-bottom: 1px solid #CCEEFF;
    width: 90%;
    margin: 0 auto;
}
.page-wrapper .desc{
    text-align: left;
    border-bottom: 1px solid #CCEEFF;
    width: 90%;
    margin: 0 auto;    
    padding: 10px 1px; 
}
.page-wrapper .imgList-li{
    padding-top: 10px;
}
/* 外层组件的宽度可设置成100%或具体数值 */
.page-wrapper .adContainer {
    margin-top: 5px;
    width: 100%;
  }



Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgArr: [
      "https://6465-debug-5c669b-1259717830.tcb.qcloud.la/icon1.png?sign=668b8a87b48989c203b5aa9a5e35234b&t=1565939748"
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  previewImg:function(e){
    console.log(e.currentTarget.dataset.index);
    var index = e.currentTarget.dataset.index;
    var imgArr = this.data.imgArr;
    wx.previewImage({
      current: imgArr[index],     //当前图片地址
      urls: imgArr,               //所有要预览的图片的地址集合 数组形式
      success: function(res) {
        console.log(res)
      },
      fail: function(res) {
        console.log(res)
      },
      complete: function(res) {
        console.log(res)
      },
    })
  }  
})

准备工作

数据库：存储四种垃圾分类的相关垃圾数据，创建表commit,sort，product。把sort.json 和product.csv 导入云数据库即可
云函数：获取百度识别库的accessToken 百度AI识别库地址 QQ AI地址

注意：

小程序key 在文件project.config.json->appid 记住创建小程序的时候选择云开发
百度key 主要做拍照识别的cloudfunctions->baiduAccessToken->index->apiKey和secretKey 此处替换为：API Key 和 Secret Key

常见错误

没有自己部署云函数
数据库没有给与相应的权限，最好给最大权限
需要的key 配置错误。
没有创建数据库名称

祝：学习愉快、工作顺利！

关注公众号「码农园区」，获取项目源码
在这里插入图片描述

梦之归途

关注

8
点赞
踩
138

收藏

觉得还不错? 一键收藏
打赏
8
评论
垃圾分类小程序，云开发 (附源码)

简介这是一个完整的已经线上运行的垃圾分类小程序，点击可查看源码，可随意 star。也可以扫描下方的小程序码直接体验。image 速览准备工作数据库：存储四种垃圾分类的相关垃圾数据，创建表commit,sort，product。把sort.json 和product.csv 导入云数据库即可云函数：获取百度识别库的accessTo......
复制链接

扫一扫