背景

當今社會越來越注意環保和資源重復利用的問題，面對日益嚴峻的資源短缺問題，自上海開始實行垃圾分類以來，越來越多城市開始施行垃圾分類管理，面對生活中成千上萬種垃圾，怎么樣才能將他們準確分類成為了一個頭疼的問題，即便是教授、大學生在實際操作中也會遇到諸多不順利，因此，我產生了自己開發一款微信小程序的念頭，當然，在此之前已經有很多前輩做了類似的產品。

思路

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.kindconsole.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;width: 90px;height: 20px;top: 170px;right: -10px;background-color: rgba(252, 93, 81,0.5);display: flex;justify-content: center;border-radius: 20px;color: #fff;font-size: 14px;align-items: center;text-align: center;box-shadow: 0 1px 0 2px #ebebeb;z-index:100; }

• 垃圾種類介紹頁

<!--pages/kinddetal/kinddetail.wxml--> <view> <view wx:if="{{kind=='可回收物'}}"><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-title text-blue"></text>可回收物</view> </view><view class="cu-bar bg-white solid-bottom"><view class='action'>適宜回收和資源利用的物品，包括廢棄的玻璃、金屬、織物、家具、電器電子產品等。</view> </view><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-warnfill text-blue"></text>投放指南</view> </view><view class="cu-bar bg-white solid-bottom"><view class='margin-left margin-top margin-right'><view wx:for="{{khsw}}" class="padding-bottom-xs"><text class='cuIcon-roundcheckfill text-blue'></text>{{item}}</view></view> </view> <!--<view class="cu-bar bg-white solid-bottom"><view class='action'><text class='cuIcon-titles text-blue '></text>{{khsw}}</view> </view>--> <block wx:for="{{khswlist}}"> <view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class='cuIcon-titles text-blue '></text>{{item.title}}</view> </view> <view class="cu-card article no-card"><view class="cu-item shadow"><view class="text margin-left margin-right margin-top"><view class="text">{{item.kind}}</view></view></view> </view> </block> <view class="cu-bar bg-white solid-bottom margin-top"><view class="action"><text class="cuIcon-title text-blue"></text>收運處理流程</view><view class="action"><view class="cu-btn bg-blue shadow" bindtap="khswnumSteps">下一步</view></view> </view><view class="bg-white padding"><view class="cu-steps"><view class="cu-item {{index>num?'':'text-blue'}}" wx:for="{{khswnumList}}" wx:key><text class="num" data-index="{{index + 1}}"></text> {{item.name}}</view></view> </view> </view><view wx:elif="{{kind=='廚余垃圾'}}"><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-title text-green"></text>廚余垃圾</view> </view><view class="cu-bar bg-white solid-bottom"><view class='action'>容易腐爛的食物殘渣、瓜皮果核等含有有機質的垃圾。</view> </view><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-warnfill text-green"></text>投放指南</view> </view> <view class="cu-bar bg-white solid-bottom"><view class='margin-left margin-top margin-right'><view wx:for="{{cylj}}" class="padding-bottom-xs"><text class='cuIcon-roundcheckfill text-green '></text>{{item}}</view></view> </view><!--<view class="cu-bar bg-white solid-bottom"><view class='action'><text class='cuIcon-titles text-green '></text>{{cylj}}</view> </view>--><block wx:for="{{cyljlist}}"><view class="cu-bar bg-white margin-top"><view class='action'><text class='cuIcon-titles text-green'></text>{{item.title}}</view> </view></block><view class="cu-bar bg-white solid-bottom margin-top"><view class="action"><text class="cuIcon-title text-green"></text>收運處理流程</view><view class="action"><view class="cu-btn bg-green shadow" bindtap="cyljnumSteps">下一步</view></view> </view><view class="bg-white padding"><view class="cu-steps"><view class="cu-item {{index>num?'':'text-green'}}" wx:for="{{cyljnumList}}" wx:key><text class="num" data-index="{{index + 1}}"></text> {{item.name}}</view></view> </view> </view><view wx:elif="{{kind=='有害垃圾'}}"><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-title text-red"></text>有害垃圾</view> </view><view class="cu-bar bg-white solid-bottom"><view class='action'>對人體健康或者自然環境造成直接或者潛在危險且應當進行專門處理的垃圾，包括電池、燈管、家用化妝品等。</view> </view><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-warnfill text-red"></text>投放指南</view> </view> <view class="cu-bar bg-white solid-bottom"><view class='margin-left'><view wx:for="{{yhlj}}" class="padding-bottom-xs"><text class='cuIcon-roundcheckfill text-red'></text>{{item}}</view></view> </view><!--<view class="cu-bar bg-white solid-bottom"><view class='action'><text class='cuIcon-titles text-red '></text>{{yhlj}}</view> </view>--><block wx:for="{{yhljlist}}"><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class='cuIcon-titles text-red'></text>{{item.title}}</view> </view> <view class="cu-card article no-card"><view class="cu-item shadow"><view class="title"><view class="text-cut">{{item.kind}}</view></view></view> </view></block><view class="cu-bar bg-white solid-bottom margin-top"><view class="action"><text class="cuIcon-title text-red"></text> 收運處理流程</view><view class="action"><view class="cu-btn bg-red shadow" bindtap="yhljnumSteps">下一步</view></view> </view><view class="bg-white padding"><view class="cu-steps"><view class="cu-item {{index>num?'':'text-red'}}" wx:for="{{yhljnumList}}" wx:key><text class="num" data-index="{{index + 1}}"></text> {{item.name}}</view></view> </view> </view><view wx:else><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-title text-grey"></text>其他垃圾</view> </view><view class="cu-bar bg-white solid-bottom"><view class='action'>除可回收物、廚余垃圾、有害垃圾以外的其他生活垃圾（即不能歸類于以上三類的生活垃圾）。</view> </view><view class="cu-bar bg-white solid-bottom margin-top"><view class='action'><text class="cuIcon-warnfill text-grey"></text>投放要求</view> </view><view class="cu-bar bg-white solid-bottom"><view class='action'><text class='cuIcon-roundcheckfill text-grey '></text>{{other}}</view> </view> <view class="bg-white solid-bottom margin-top padding-top padding-bottom"><view wx:for="{{otherlist}}"><view class="action margin-left margin-right margin-top"><text class='cuIcon-focus text-grey margin-right'></text>{{item.title}}</view></view> </view> <view class="cu-bar bg-white solid-bottom margin-top"><view class="action"><text class="cuIcon-title text-grey"></text> 收運處理流程</view><view class="action"><view class="cu-btn bg-grey shadow" bindtap="othernumSteps">下一步</view></view> </view><view class="bg-white padding"><view class="cu-steps"><view class="cu-item {{index>num?'':'text-grey'}}" wx:for="{{othernumList}}" wx:key><text class="num" data-index="{{index + 1}}"></text> {{item.name}}</view></view> </view> </view> </view> Page({/*** 頁面的初始數據*/data: {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,khsw:["輕投輕放","清潔干燥，避免污染","廢紙盡量平整","有尖銳邊角的應包裹后投放","立體包裝物請清空內容物，清潔后壓扁投放"],khswlist:[{title:"玻璃",kind:"平板玻璃、玻璃牛奶瓶、酒瓶、玻璃調味瓶、玻璃杯"},{title:"金屬",kind:"易拉罐、刀具、剪刀、金屬容器、水龍頭、螺絲、鑰匙、金屬瓶蓋、金屬廚具"},{title:"塑料",kind:"塑料桶、塑料盒、塑料玩具、塑料托盤、沐浴露瓶、塑料飲料瓶"},{title:"紙類",kind:"報紙、雜志、廣告紙、牛奶盒、舊書、紙箱"},{title:"家具",kind:"床墊、衣柜、沙發"},{title:"織物",kind:"衣服、背包、書包、床上用品"},{title:"電器電子產品",kind:"電視機、手機、洗衣機、冰箱"}],cylj:["廚余垃圾應從產生時就與其他品類垃圾分開，投放前瀝干水分","保證廚余垃圾分出質量，做到“無玻璃陶瓷、無金屬、無塑料橡膠”等其他雜物","有包裝物的過期的食品應將包裝物去除后分類投放，包裝物請投放到對應的可回收物或者其他垃圾收集容器"],cyljlist:[{title:"剩菜剩飯",},{title:"蛋殼"},{title:"菜幫菜葉"},{title:"茶渣"},{title:"果皮"}],yhlj:["應保證器物完整，避免二次污染","如有殘留請密閉后投放","投放時請注意輕放","易破損的請連帶包裝或包裹投放","如易揮發，請密閉后投放"],yhljlist:[{title:"電池",kind:"干電池、充電式電池、紐扣電池"},{title:"燈管",kind:"單端緊湊型節能熒光燈、直管、環形熒光燈"},{title:"家用化學品",kind:"化妝品、軟膏、水銀溫度計、油漆桶、藥丸、片劑"}],other:["瀝干水分后投放"],otherlist:[{title:"衛生紙"},{title:"飲料杯"},{title:"塑料袋"},{title:"紙尿褲"},{title:"污染紙張"},{title:"餐盒"},{title:"大棒骨"},{title:"陶瓷碎片"}],basicsList: [{icon: 'usefullfill',name: '開始'}, {icon: 'radioboxfill',name: '等待'}, {icon: 'roundclosefill',name: '錯誤'}, {icon: 'roundcheckfill',name: '完成'}, ],basics: 0,khswnumList: [{name: '可回收物收集容器'}, {name: '社區暫存點'}, {name: '專用車輛運輸'}, {name:'分揀中心'}, {name: '各類再生資源處理設施'}, ],cyljnumList: [{name: '廚余垃圾收集容器'}, {name: '小型垃圾運輸車'}, {name: '垃圾樓或暫存點'}, {name:'專用車輛運輸'}, {name: '生化處理設施'}, ],yhljnumList: [{name: '有害垃圾收集容器'}, {name: '社區暫存點'}, {name: '專用車輛運輸'}, {name: '各類危廢處理設施'}, ],othernumList: [{name: '其他垃圾收集容器'}, {name: '小型垃圾運輸車'}, {name: '垃圾樓'}, {name:'專用車輛運輸'}, {name: '焚燒處理設施、衛生填埋場'}, ],num: 0,scroll: 0},isCard(e) {this.setData({isCard: e.detail.value})},basicsSteps() {this.setData({basics: this.data.basics == this.data.basicsList.length - 1 ? 0 : this.data.basics + 1})},khswnumSteps() {this.setData({num: this.data.num == this.data.khswnumList.length - 1 ? 0 : this.data.num + 1})},cyljnumSteps() {this.setData({num: this.data.num == this.data.cyljnumList.length - 1 ? 0 : this.data.num + 1})},yhljnumSteps() {this.setData({num: this.data.num == this.data.yhljnumList.length - 1 ? 0 : this.data.num + 1})},othernumSteps() {this.setData({num: this.data.num == this.data.othernumList.length - 1 ? 0 : this.data.num + 1})},scrollSteps() {this.setData({scroll: this.data.scroll == 9 ? 0 : this.data.scroll + 1})},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {console.log(options.kind)this.setData({kind:options.kind})},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {wx.setNavigationBarTitle({title: this.data.kind})},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

• 搜索頁面

<!--pages/search/search.wxml--> <view class='cu-load load-modal' wx:if="{{loadModal}}"><image src='/images/search.png' class='png' mode='aspectFit'></image><view class='gray-text'>搜索中...</view> </view> <view class="cu-bar bg-white search fixed"><view class="search-form round"><text class="cuIcon-search"></text><input type="text" placeholder="請輸入垃圾的名稱或種類" value='{{searchvalue}}' bindconfirm="search" bindinput="input" type="text"></input></view><view class="action"><view class="cu-btn bg-gradual-green shadow-blur round" bindtap="search">搜索</view></view> </view> <view class="margin-top" scroll-y="true" style="margin-top:50px"> <view wx:for="{{lists}}" wx:for-item='i' wx:key="lists" class="margin-top" data-name="{{i.name}}" data-kind="{{i.kind}}" data-property="{{i.property}}" bindtap="detail"><view wx:if="{{i.kindnum==1}}" selectable="true" class="margin-top margin-left margin-right bg-blue light shadow-blur grid col-2"><view class="padding-sm text-bold text-black"><text selectable="true" >{{i.name}}</text></view><view class="padding-sm">建議投放：<text class="text-white bg-blue padding-xs">{{i.kind}}</text></view></view><view wx:elif="{{i.kindnum==2}}" selectable="true" class="margin-top margin-left margin-right bg-green shadow-blur light grid col-2"><view class="padding-sm text-bold text-black"><text selectable="true" >{{i.name}}</text></view><view class="padding-sm">建議投放：<text class="text-white bg-green padding-xs">{{i.kind}}</text></view></view><view wx:elif="{{i.kindnum==3}}" selectable="true" class="margin-top margin-left margin-right bg-red shadow-blur light grid col-2"><view class="padding-sm text-bold text-black"><text selectable="true" >{{i.name}}</text></view><view class="padding-sm">建議投放：<text class="text-white bg-red padding-xs">{{i.kind}}</text></view></view><view wx:else="{{i.kindnum==4}}" selectable="true" class="margin-top margin-left margin-right shadow-blur bg-grey light grid col-2"><view class="padding-sm text-bold text-black"><text selectable="true">{{i.name}}</text></view><view class="padding-sm">建議投放：<text class="text-white bg-grey padding-xs">{{i.kind}}</text></view></view></view> </view> <view class="more text-center center margin-top margin-bottom"><view wx:if="{{lists.length===0 || lists.length<20}}"></view><view wx:elif="{{fu===0}}"><view bindtap="more" class="bg-green text-white round margin-left margin-right">加載更多結果…</view></view><view wx:else class="bg-red text-white round margin-left margin-right">親，沒有更多搜索結果了哦！</view> </view> // pages/search/search.js const app = getApp() Page({/*** 頁面的初始數據*/data: {StatusBar: app.globalData.StatusBar,CustomBar: app.globalData.CustomBar,lists: [],lists_nums:0,fu:0,searchvalue:'' ,},searchinput:function(e){this.setData({searchvalue: e.detail.value})},bindchange(e) {this.setData({swiperIdx: e.detail.current})},input(e) {this.setData({searchvalue: e.detail.value})console.log(e.detail.value)},clear: function () {this.setData({searchvalue: ""})},search:function () {console.log("調用ssearch事件")this.setData({lists_nums:0,fu:0,})wx: wx.showLoading({title: '努力查找中...',mask: true,})setTimeout(function(){wx.hideLoading()},500)this.setData({'lists':[]})var that = thislet key = that.data.searchvalue;console.log("查詢的內容", key)const db = wx.cloud.database();const _ = db.commanddb.collection('garbage').where(_.or([{name: db.RegExp({regexp: '.*' + key,options: 'i',})},{kind: db.RegExp({regexp: '.*' + key,options: 'i',})},])).get({success: res => {console.log(res)that.setData({lists: res.data})},fail: err => {console.log(err)}})},more: function () {console.log("調用more事件")var that = thislet key = that.data.searchvalue;const db = wx.cloud.database();const _ = db.commandwx.showLoading({title: '正在刷新中…',duration: 500})let x = this.data.lists_nums + 20console.log(x)let old_data = this.data.listsdb.collection('garbage').skip(x).where(_.or([{name: db.RegExp({regexp: '.*' + key,options: 'i',})},{kind: db.RegExp({regexp: '.*' + key,options: 'i',})},])).orderBy('name', 'asc') // 限制返回數量為 20 條.get().then(res => {if(res.data==null || res.data==0 || res.data==" "){console.log("為空")this.setData({fu:1})}else{this.setData({lists: old_data.concat(res.data),lists_nums: x})console.log(res.data)}}).catch(err => {console.error(err)})console.log('circle 下一頁');},detail:function(e){let name = e.currentTarget.dataset.name;let kind = e.currentTarget.dataset.kind;let property = e.currentTarget.dataset.property;wx.navigateTo({url: "/pages/garbagedetail/garbagedetail?name=" + name + '&kind=' + kind + '&property=' + property})},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {this.setData({loadModal: true})setTimeout(()=> {this.setData({loadModal: false})}, 500)let searchvalue = options.searchvalue;this.sousuo(options)},sousuo:function(options){let searchvalue = options.searchvalue;this.setData({searchvalue:searchvalue})var that = thislet key = that.data.searchvalue;console.log("查詢的內容", key)const db = wx.cloud.database();const _ = db.commanddb.collection('garbage').where(_.or([{name: db.RegExp({regexp: '.*' + key,options: 'i',})},{kind: db.RegExp({regexp: '.*' + key,options: 'i',})},])).get({success: res => {console.log(res)that.setData({lists: res.data})},fail: err => {console.log(err)}})console.log(searchvalue)},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

• 垃圾相信信息頁面

<!--pages/garbagedetail/garbagedetail.wxml--> <view wx:if="{{kind=='可回收物'}}"><view class="animation-fade bg-blue light margin-left margin-right margin-top"><view class="padding text-bold text-center text-black solid-bottom text-xxl text-shadow">{{name}}</view><view class="text-center">建議投放</view><view class="text-bold text-center text-xl text-blue">[{{kind}}]</view><view class="bg-blue text-center text-bold text-white english align-center radius">Recyclable</view><view wx:if="{{property.length===0 || property===defined || property===null || property===''}}"></view><view wx:else class="padding text-center text-bold">屬性：{{property}}</view><view class="kind"><image class="garbageicon image-center align-center" src="/images/garbage/khsw.png"></image></view><view class="margin-left text-bold">投放要求：</view><view class="margin-left margin-right">可回收物要保持干燥、干凈無異味，投放到相對應的收集容器或暫存點。</view></view> </view><view wx:if="{{kind=='廚余垃圾'}}"><view class="animation-fade bg-green light margin-left margin-right margin-top"><view class="padding text-bold text-center text-black solid-bottom text-xxl text-shadow">{{name}}</view><view class="text-center">建議投放</view><view class="text-bold text-center text-xl text-green">[{{kind}}]</view><view class="bg-green text-center text-bold text-white english align-center">Food Waste</view><view class="kind"><image class="garbageicon" src="/images/garbage/cylj.png"></image></view><view class="margin-left text-bold">投放要求：</view><view class="margin-left margin-right">廚余垃圾應當瀝除油水，去除食品包裝、餐具制品、大塊骨頭、貝殼等雜質，在指定時間內投放至專用的收集容器；使用一次性收納袋裝納的，應當將收納袋另行投放至其他垃圾收集容器。</view></view> </view><view wx:if="{{kind=='有害垃圾'}}"><view class="animation-fade bg-red light margin-left margin-right margin-top"><view class="padding text-bold text-center text-black solid-bottom text-xxl text-shadow">{{name}}</view><view class="text-center">建議投放</view><view class="text-bold text-center text-xl text-red">[{{kind}}]</view><view class="bg-red text-center text-bold text-white english align-center">Hazardous Waste</view><view wx:if="{{property.length===0 || property===defined || property===null || property===''}}"></view><view wx:else class="padding text-center text-bold">屬性：{{property}}</view><view class="kind"><image class="garbageicon" src="/images/garbage/yhlj.png"></image></view><view class="margin-left text-bold">投放要求：</view><view class="margin-left margin-right">電池應投放到廢電池收集容器，防止日曬雨淋發生火災等事故；燈管等要小心輕放、防止破碎；投放家用化學品建議對其破壞性進行標記，盡量保持原有的包裝，防止溢（逸）出。</view></view> </view><view wx:if="{{kind=='其他垃圾'}}"><view class="animation-fade bg-grey light margin-left margin-right margin-top"><view class="padding text-bold text-center text-black solid-bottom text-xxl text-shadow">{{name}}</view><view class="text-center">建議投放</view><view class="text-bold text-center text-xl text-grey">[{{kind}}]</view><view class="bg-grey text-center text-bold text-white english align-center">Residual Waste</view><view class="kind"><image class="garbageicon" src="/images/garbage/qtlj.png"></image></view><view class="margin-left text-bold">請注意：</view><view class="margin-left margin-right">受到污染的紙類/塑料袋（膜）/織物，破損的花盆或陶瓷等難以回收利用，屬于其他垃圾。</view></view> </view> const app = getApp() Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {console.log(options)this.setData({name:options.name,kind:options.kind,property:options.property})var that=this;setTimeout(function() {that.setData({animation: ''})}, 1000)},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {wx.setNavigationBarTitle({title: this.data.name})},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

*tips
為了節約訪問云數據庫的次數，減少不必要的次數消耗，搜索頁面跳轉到詳情頁面采用參數傳遞方法，而不是只傳遞數據庫中每條記錄的主鍵到達詳情頁面在onload中在查詢一次該垃圾。

總結

以上是生活随笔為你收集整理的垃圾分类微信小程序源码分享（直接可运行）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。