垃圾分类微信小程序源码分享（直接可运行）

最新推荐文章于 2025-02-24 11:55:38 发布

前端偏执狂

最新推荐文章于 2025-02-24 11:55:38 发布

阅读量9.8k

点赞数 16

分类专栏：小程序文章标签： html5 javascript css 前端小程序

本文链接：https://blog.youkuaiyun.com/psjc2018/article/details/110938806

版权

针对垃圾分类的挑战，本文作者分享了一款直接可运行的微信小程序源码，包括首页、垃圾种类介绍、搜索和详细信息页面。UI使用了COLOR UI框架，并通过云开发处理数据。在搜索页跳转详情页时，通过参数传递减少数据库查询次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

当今社会越来越注意环保和资源重复利用的问题，面对日益严峻的资源短缺问题，自上海开始实行垃圾分类以来，越来越多城市开始施行垃圾分类管理，面对生活中成千上万种垃圾，怎么样才能将他们准确分类成为了一个头疼的问题，即便是教授、大学生在实际操作中也会遇到诸多不顺利，因此，我产生了自己开发一款微信小程序的念头，当然，在此之前已经有很多前辈做了类似的产品。

思路

1.主要分为以下几个页面：首页、垃圾种类介绍页、搜索页（查询页）、垃圾详细信息页面。
2.本人UI不是很好，引用了COLOR UI。
3.查询页面采用云开发（当然因为本小程序的代码不多，也可将数据库存储为json文件和小程序一起打包）

成品效果

小程序首页
垃圾类型的介绍
搜索页面
垃圾详细信息页面

源码部分

首页代码

<!--pages/index/index.wxml-->
<view class="cu-bar bg-white search">
  <view class="search-form round">
    <text class="cuIcon-search"></text>
    <input type="text" placeholder="请输入垃圾的名称或种类" confirm-type="search" bindinput="bindchange" bindconfirm="search"></input>
  </view>
  <view class="action">
    <view class="cu-btn bg-gradual-green shadow-blur round" bindtap="search">搜索</view>
  </view>
</view>
<!--<view class="cu-bar bg-white solid-bottom margin-top">
  <view class="action">
    <text class="cuIcon-title text-blue"></text>生活垃圾分为4大类
  </view>
</view>-->
<view class="grid col-2 padding-sm">
  <view class="padding-sm" data-kind="厨余垃圾" bindtap="kindsearch">
    <view class="bg-gradual-green padding radius text-center shadow-blur">
      <view class="text-lg text-bold">厨余垃圾</view>
      <view class="margin-top-sm text-Abc">垃圾收集设施一般为绿色</view>
    </view>
  </view>
  <view class="padding-sm" data-kind="可回收物" bindtap="kindsearch">
    <view class="bg-gradual-blue padding radius text-center shadow-blur">
      <view class="text-lg text-bold">可回收物</view>
      <view class="margin-top-sm text-Abc">垃圾收集设施一般为蓝色</view>
    </view>
  </view>
  <view class="padding-sm" data-kind="有害垃圾" bindtap="kindsearch">
    <view class="bg-gradual-red padding radius text-center shadow-blur">
      <view class="text-lg text-bold">有害垃圾</view>
      <view class="margin-top-sm text-Abc">垃圾收集设施一般为红色</view>
    </view>
  </view>
  <view class="padding-sm" data-kind="其他垃圾" bindtap="kindsearch">
    <view class="bg-black padding radius text-center shadow-blur">
      <view class="text-lg text-bold">其他垃圾</view>
      <view class="margin-top-sm text-Abc">垃圾收集设施一般为灰色、泥色、黑色</view>
    </view>
  </view>
</view>
<view class="cu-bar bg-white margin-top" data-kind="厨余垃圾" bindtap="detail">
  <view class="action text-green">
    <text class="cuIcon-title text-green"></text>厨余垃圾（Food Waste）
  </view>
</view>
<view class="bg-white" data-kind="厨余垃圾" bindtap="detail">
  <view class="margin-left margin-right margin-bottom">菜帮菜叶、瓜果皮壳、鱼骨鱼刺、剩菜剩饭、茶叶渣、残枝落叶、调料、过期食品等。</view>
</view>
<view class="cu-bar bg-white margin-top" data-kind="可回收物" bindtap="detail">
  <view class="action text-blue">
    <text class="cuIcon-title text-blue"></text>可回收物（Recyclable）
  </view>
</view>
<view class="bg-white" data-kind="可回收物" bindtap="detail">
  <view class="margin-left margin-right margin-bottom">废玻璃、废金属、废塑料、废旧织物、废纸张、废书籍、废纸板箱、废弃电器电子产品等。</view>
</view>
<official-account class="margin-top"></official-account>
<view class="cu-bar bg-white margin-top" data-kind="有害垃圾" bindtap="detail">
  <view class="action text-red">
    <text class="cuIcon-title text-red"></text>有害垃圾（Hazardous Waste）
  </view>
</view>
<view class="bg-white" data-kind="有害垃圾" bindtap="detail">
  <view class="margin-left margin-right margin-bottom">充电电池温度计、血压计、消毒液、废含汞荧光灯管、杀虫剂及其包装物、过期药品及其包装物、废油漆和溶剂及其包装物等。</view>
</view>
<view class="cu-bar bg-white margin-top" data-kind="其他垃圾" bindtap="detail">
  <view class="action text-grey">
    <text class="cuIcon-title text-grey"></text>其他垃圾（Residual Waste）
  </view>
</view>
<view class="bg-white" data-kind="其他垃圾" bindtap="detail">
<view class="margin-left margin-right margin-bottom">卫生纸、饮料杯、塑料袋、纸尿裤、污染纸张、餐盒、大棒骨、陶瓷碎片等。</view>
</view>

<view class="text-center">-本小程序基于Color UI 开发-</view>
<view class="margin-left margin-right text-red">温馨提示：本小程序所列出的垃圾分类的信息仅供参考，请以权威信息为准。</view>

<!--<view bindtap='resume'>
  <text class="add_icon">个人中心➤</text>
</view>-->

// pages/index/index.js
const app = getApp();
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    ColorList: app.globalData.ColorList,
    garbagelist:[
      {
   title:"厨余垃圾", name: 'green',color: '#39b54a'},
      {
   title:"可回收物", name: 'blue',color: '#0081ff'},
      {
   title:"有害垃圾",name: 'red',color: '#e54d42'},
      {
   title:"其他垃圾",name: 'grey',color: '#8799a3'}
    ],
    searchvalue:'' ,
  },

  input(e) {
   
    this.setData({
   
      searchvalue: e.detail.value
    })
    console.log(e.detail.value)
  },

  bindchange: function(e) {
   
    console.log(e.detail.value);
    this.setData({
   
      searchvalue: e.detail.value
    })
  },
  
  search:function(){
   
    wx.navigateTo({
   
      url: '../search/search?searchvalue=' +this.data.searchvalue,
    })
  },

  kindsearch:function(e){
   
    let searchvalue=e.currentTarget.dataset.kind;
    //console.log(searchvalue)
    wx.navigateTo({
   
      url: '../search/search?searchvalue=' +searchvalue,
    })
  },

  detail:function(e){
   
    let kind=e.currentTarget.dataset.kind
    console.log(kind)
    wx.navigateTo({
   
      url: "/pages/kinddetail/kinddetail?kind=" + kind
    })
  },

  resume:function(){
   
    wx.navigateTo({
   
      url: '/pages/resume/resume',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    wx.showShareMenu({
   
      menus: ['shareAppMessagewx', 'shareTimeline'],
      withShareTicket:true
    });
  },

  onShareTimeline: function () {
   
    return {
   
        title: '赶紧来体验“北京垃圾分类指南”小程序吧！',
        imageUrl:'',
        query: '',
    }
  },

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

  },

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

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

  },

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

  },

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

  },

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

  },

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

  }
})

.sfl{
   
  display: flex;
  justify-content: center;
}
.zsj{
   
  margin-left: 20rpx;
}
.add_icon{
   
  position: fixed;
  wid

最低0.47元/天解锁文章