背景

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

思路

1.主要分為以下幾個頁面：首頁、垃圾種類介紹頁、搜索頁（查詢頁）、垃圾詳細信息頁面。
2.本人UI不是很好，引用了COLOR UI。
3.查詢頁面采用云開發(fā)（當然因為本小程序的代碼不多，也可將數據庫存儲為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">衛(wèi)生紙、飲料杯、塑料袋、紙尿褲、污染紙張、餐盒、大棒骨、陶瓷碎片等。</view> </view><view class="text-center">-本小程序基于Color UI 開發(fā)-</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',})},/*** 生命周期函數--監(jiān)聽頁面加載*/onLoad: function (options) {wx.showShareMenu({menus: ['shareAppMessagewx', 'shareTimeline'],withShareTicket:true});},onShareTimeline: function () {return {title: '趕緊來體驗“北京垃圾分類指南”小程序吧！',imageUrl:'',query: '',}},/*** 生命周期函數--監(jiān)聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監(jiān)聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監(jiān)聽用戶下拉動作*/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'>對人體健康或者自然環(huán)境造成直接或者潛在危險且應當進行專門處理的垃圾，包括電池、燈管、家用化妝品等。</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:"床墊、衣柜、沙發(fā)"},{title:"織物",kind:"衣服、背包、書包、床上用品"},{title:"電器電子產品",kind:"電視機、手機、洗衣機、冰箱"}],cylj:["廚余垃圾應從產生時就與其他品類垃圾分開，投放前瀝干水分","保證廚余垃圾分出質量，做到“無玻璃陶瓷、無金屬、無塑料橡膠”等其他雜物","有包裝物的過期的食品應將包裝物去除后分類投放，包裝物請投放到對應的可回收物或者其他垃圾收集容器"],cyljlist:[{title:"剩菜剩飯",},{title:"蛋殼"},{title:"菜幫菜葉"},{title:"茶渣"},{title:"果皮"}],yhlj:["應保證器物完整，避免二次污染","如有殘留請密閉后投放","投放時請注意輕放","易破損的請連帶包裝或包裹投放","如易揮發(fā)，請密閉后投放"],yhljlist:[{title:"電池",kind:"干電池、充電式電池、紐扣電池"},{title:"燈管",kind:"單端緊湊型節(jié)能熒光燈、直管、環(huán)形熒光燈"},{title:"家用化學品",kind:"化妝品、軟膏、水銀溫度計、油漆桶、藥丸、片劑"}],other:["瀝干水分后投放"],otherlist:[{title:"衛(wèi)生紙"},{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: '社區(qū)暫存點'}, {name: '專用車輛運輸'}, {name:'分揀中心'}, {name: '各類再生資源處理設施'}, ],cyljnumList: [{name: '廚余垃圾收集容器'}, {name: '小型垃圾運輸車'}, {name: '垃圾樓或暫存點'}, {name:'專用車輛運輸'}, {name: '生化處理設施'}, ],yhljnumList: [{name: '有害垃圾收集容器'}, {name: '社區(qū)暫存點'}, {name: '專用車輛運輸'}, {name: '各類危廢處理設施'}, ],othernumList: [{name: '其他垃圾收集容器'}, {name: '小型垃圾運輸車'}, {name: '垃圾樓'}, {name:'專用車輛運輸'}, {name: '焚燒處理設施、衛(wèi)生填埋場'}, ],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})},/*** 生命周期函數--監(jiān)聽頁面加載*/onLoad: function (options) {console.log(options.kind)this.setData({kind:options.kind})},/*** 生命周期函數--監(jiān)聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監(jiān)聽頁面顯示*/onShow: function () {wx.setNavigationBarTitle({title: this.data.kind})},/*** 生命周期函數--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監(jiān)聽用戶下拉動作*/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})},/*** 生命周期函數--監(jiān)聽頁面加載*/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)},/*** 生命周期函數--監(jiān)聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監(jiān)聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監(jiān)聽用戶下拉動作*/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">電池應投放到廢電池收集容器，防止日曬雨淋發(fā)生火災等事故；燈管等要小心輕放、防止破碎；投放家用化學品建議對其破壞性進行標記，盡量保持原有的包裝，防止溢（逸）出。</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: {},/*** 生命周期函數--監(jiān)聽頁面加載*/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)},/*** 生命周期函數--監(jiān)聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監(jiān)聽頁面顯示*/onShow: function () {wx.setNavigationBarTitle({title: this.data.name})},/*** 生命周期函數--監(jiān)聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監(jiān)聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監(jiān)聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

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

總結

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

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