垃圾分类微信小程序源码分享（直接可运行）
2024-05-12 13:23:31
背景
当今社会越来越注意环保和资源重复利用的问题，面对日益严峻的资源短缺问题，自上海开始实行垃圾分类以来，越来越多城市开始施行垃圾分类管理，面对生活中成千上万种垃圾，怎么样才能将他们准确分类成为了一个头疼的问题，即便是教授、大学生在实际操作中也会遇到诸多不顺利，因此，我产生了自己开发一款微信小程序的念头，当然，在此之前已经有很多前辈做了类似的产品。
思路
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中在查询一次该垃圾。
垃圾分类微信小程序源码分享（直接可运行）相关推荐
- 【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用 在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...
- 130个免费 微信小程序源码分享
130个免费 微信小程序源码分享 - AppleMusic - B站首页界面设计:附详细教程 - FlexLayout布局 - HIapp - IT-EBOOK - LOL战绩查询 - Railay: ...
- 【小程序源码】王者战力查询改名工具箱微信小程序源码分享下载，战力查询小程序
介绍 今天分享一款战力查询小程序源码, 微端Q苹卓四端战力查询 带改名工具,空白名.重复名.符号名改名小程序源码 界面精美,无需服务器后台. 至于更多,就大家自行研究咯! 小编测试演示图 小程序源码下 ...
- 微信小程序源码分享合集-4
微信小程序源码 源码下载 微信小程序源码,包含:3C手机商城.kindle图书商城.大宅小屋拼团.球鞋商城.扫码购物.一元夺宝.喜茶店铺.京东首页.京东白条.小米商城等35个商城类源码. 关注 微信公 ...
- 最新上班摸鱼打卡模拟器微信小程序源码分享
正文: 俗话说,摸鱼摸的好,上班没烦恼,毕竟谁能拒绝带薪拉屎呢(手动狗头),这是一个云开发职场打工人专属上班摸鱼划水微信小程序源码,没有后台,直接导入微信开发者工具即可运行,UI简约大气漂亮,只需登录 ...
- 微信小程序源码分享合集-5
微信小程序源码 微信小程序源码,包含:豆瓣.微信.论坛.停车.房贷计算.股票.蜗牛生活.物品回收.学车预约.住房装修.斗鱼直播.水利.快拍.同城等源码. CSDN 免积分下载 下载地 关注 微信公众号 ...
- 微信小程序源码分享合集-3
微信小程序源码 门店店铺 汤总便利小程序 门店展示 茶铺门店小程序 拼车源码 滴滴拼车 同城拼车(完整带PHP后台) 企业应用 企业应用 兵马俑小程序 企业展示 房地产公司展示 华云智慧园区 信息科技 ...
- 十款入门级微信小程序源码分享之三
刷小程序是快乐的,能够撸小程序是幸福的.以下分享10个经典的小程序源码,后面几期也会相继推出其余小程序源码. 只愿你能够点个关注点个赞,后期的小程序源码会第一时间推送给你. 目录 一.地图定位之滴滴作 ...
- 十款经典微信小程序源码分享之二（可作为计算机设计参考）
如今小程序上线已满3周年了,日活用户已达数亿级别,提到小程序大家已不再陌生,作为资深web开发的我也迫不及待的利用下班的时间撸起了小程序代码,以下分享10个经典的小程序源码,后面几期也会相继推出其余小 ...
最新文章
- C++第10周项目4参考——完数
- poj 3461 Oulipo（kmp统计子串出现次数）
- 用固定收敛标准网络的迭代次数比较两张图片的相似度
- 数组中没有给初始值_Array中的reduce()、filter()、map()几张图搞懂
- K8S原来如此简单（一）K8S核心组件与基本原理
- 2000坐标系高程与85高程转换_【科普】测量人必须知道的几大坐标系
- Android应用开发系列课程------ViewPager与ViewFlipper较量
- 初者Python笔记(案例：用字典无限添加节点)
- 调试内存_如何调试Python 程序的内存泄露问题
- 计算机毕业设计之会议预约系统设计与实现
- 软件架构入门及分类——微服务架构
- 访问阿里云服务器配置的ftp后，报错227 entering passive mode
- 数学中的圆周率符号怎么输入
- JAVA提取纯文本_从常见文档中提取纯文本内容 | IT人生录
- 后台Base64解码图片变小的坑
- 两个求和符号如何用计算机,计算：两个求和符号∑∑怎么办
- 在Linux上搭建nim服务器安装AIX
- Linux 系统进程、线程之间的爱恨纠葛
- 论文阅读: Spatial Dual-Modality Graph Reasoning for Key Information Extraction (关键信息提取算法)
- Matlab设置双y轴特性
热门文章
- Android5.1永久隐藏工具栏定制
- 会声会影2020秘钥视频编辑制作使用教程
- Android FrameWork 系统源码调试
- Mysql数据库报错：Row size too large (＞ 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DY
- 一起谈.NET技术，.NET十年（下）
- Centos 7 安装 OpenResty api 网关 Orange
- r语言 读服务器数据,R语言数据实战 | 安装R语言
- qda二次判别_判别分析-GDA、QDA、KNN
- Un-Routed Net ConStraint报错的原因
- 【绝地求生：刺激战场】雪地新地图抢先了解