垃圾分類小程序源碼，拍照識別垃圾分類的微信小程序開發源代碼

垃圾分類小程序源碼，拍照識別垃圾分類的微信小程序開發源代碼

垃圾分類工做逐步趨於常態化，但公衆中仍不乏不理解、不會分、懶得分之人，且不在少數。究其緣由，在於分類宣傳立意不夠深、貼民不夠近、落地不夠實。垃圾分類任重而道遠，宣傳工做需持續發力。破題關鍵在於講清理論淵源、強調實踐意義、落實體制機制

最近本身研究開發了一個垃圾分類的微信小程序  技術交流QQ：1379174464

首先新建一個小程序的首頁

<!--pages/index/index.wxml-->
<view class='mainpage'>
<image src='../images/indextop.jpg' style='width:100%;z-index:1000;' mode="widthFix"></image>
<view class='topimgbox'>
<image src='../images/top.jpg' mode="widthFix"></image>
</view>

<view class="formcss">
<form bindsubmit="formSubmit" report-submit='true'>
<view class='page_row' bindtap="suo">
      <view class="df search_arr">
        <icon class="searchcion" color='#00a7f4' size='20' type='search'></icon>
        <input class="" placeholder="請輸入關鍵字" value="{{searchValue}}" bindinput="searchValueInput"/>
      </view>
    <button class='sousuo' formType="submit">查詢</button>
</view>
</form>
</view>

</view>
<!--分類-->
<view class='mainbox' wx:if="{{isshowmain}}">
<view class='mainbox-one'>
<view class='box-img'  data-id='1' bindtap='typeation'><image src='../images/type/ico-1.jpg' mode="widthFix"></image></view>
<view class='box-img'  data-id='2' bindtap='typeation'><image src='../images/type/ico-2.jpg' mode="widthFix"></image></view>
<view class='box-img'  data-id='3' bindtap='typeation'><image src='../images/type/ico-3.jpg' mode="widthFix"></image></view>
<view class='box-img'  data-id='4' bindtap='typeation'><image src='../images/type/ico-4.jpg' mode="widthFix"></image></view>
<!--<block wx:for="{{strarr}}" wx:key="typeid" wx:for-index="idx" wx:for-item="item">
<view class='box-img'  data-id='{{item.typeid}}' bindtap='typeation'><image src='{{webserverUrl}}{{item.imgsrc}}' mode="widthFix"></image></view>
</block>-->

</view>

<view class='text-box'>
鼓勵將<text style='color:#104883;font-weight: bold;font-size:18px;margin: 0.3rem;'>可回收物</text>賣入廢品回收系統，或交投至兩網融合服務點，或投放至可回收物收集容器；嚴禁將<text style='color:#f35334;font-weight: bold;font-size:18px;margin: 0.3rem;'>有害垃圾</text>投放到其餘的生活垃圾收集容器；平常家庭生活垃圾要作到<text style='color:#303030;font-weight: bold;font-size:18px;margin: 0.3rem;'>幹</text>、<text style='color:#664035;font-weight: bold;font-size:18px;margin: 0.3rem;'>溼</text>垃圾兩分開。
</view>

</view>
<!--end-->

<!--typeitem-->
<view class='mainpage'>
<!--itembox-->
<view class='typeitembasecss1' wx:if="{{ishowtime1}}">
<view class='typenamebox'>可回收物</view>
<view class='typeitem1'>

<view class='mbox-1'>
<view class='typeicon'><image src='{{webserverUrl}}/laji/images/type/ico-1.jpg' mode="widthFix"></image></view>
<view class='typeinfo'>
<text class='typetitle'>可回收物是指：</text>
<text>適宜回收利用和資源化利 用的，如：玻、金、塑、 紙、衣</text>
</view>
</view>
<view class='mbox-2'>可回收物主要包括</view>
<view class='mbox-3'>
醬油瓶、玻璃杯、平板玻璃、易拉罐、飲料瓶、 洗髮水瓶、塑料玩具、書本、報紙、廣告單、 紙板箱、衣服、牀上用品等
</view>
<view class='mbox-2'>可回收物投放要求</view>
<view class='mbox-3'>
<text>輕投輕放</text>
<text>清潔乾燥，避免污染</text>
<text>廢紙儘可能平整</text>
<text>立體包裝物請清空內容物，清潔後壓扁投放</text>
<text>有尖銳邊角的，應包裹後投放</text>
</view>

</view>

</view>
<!----itembox-end-->

<!--itembox-->
<view class='typeitembasecss2' wx:if="{{ishowtime2}}">
<view class='typenamebox'>有害垃圾</view>
<view class='typeitem1'>

<view class='mbox-1'>
<view class='typeicon'><image src='{{webserverUrl}}/laji/images/type/ico-2.jpg' mode="widthFix"></image></view>
<view class='typeinfo'>
<text class='typetitle'>有害垃圾是指：</text>
<text>對人體健康或者天然環境形成直接或潛在危害的廢棄物</text>
</view>
</view>
<view class='mbox-2'>有害垃圾主要包括</view>
<view class='mbox-3'>
廢電池、油漆桶、熒光燈管、廢藥品及其包裝物等
</view>
<view class='mbox-2'>有害垃圾投放要求</view>
<view class='mbox-3'>
<text>投放時請注意輕放</text>
<text>易破損的請連帶包裝或包裹後輕放</text>
<text>如易揮發，請密封后投放</text>
</view>

</view>

</view>
<!----itembox-end-->

<!--itembox-->
<view class='typeitembasecss3' wx:if="{{ishowtime3}}">
<view class='typenamebox'>溼垃圾</view>
<view class='typeitem1'>

<view class='mbox-1'>
<view class='typeicon'><image src='{{webserverUrl}}/laji/images/type/ico-3.jpg' mode="widthFix"></image></view>
<view class='typeinfo'>
<text class='typetitle'>溼垃圾是指：</text>
<text>又稱"廚餘垃圾"平常生活垃圾產生的容易腐爛的生物質廢棄物</text>
</view>
</view>
<view class='mbox-2'>溼垃圾主要包括</view>
<view class='mbox-3'>
剩菜剩飯、瓜皮果核、花卉綠植、過時食品等
</view>
<view class='mbox-2'>溼垃圾投放要求</view>
<view class='mbox-3'>
<text>純流質的食物垃圾，如牛奶等，應直接倒進下水口</text>
<text>有包裝物的溼垃圾應將包裝物去除後分類投放，包裝物請投放到對應的可回收物或幹垃圾容器</text>
</view>

</view>

</view>
<!----itembox-end-->

<!--itembox4-->
<view class='typeitembasecss4' wx:if="{{ishowtime4}}">
<view class='typenamebox'>幹垃圾</view>
<view class='typeitem1'>

<view class='mbox-1'>
<view class='typeicon'><image src='{{webserverUrl}}/laji/images/type/ico-4.jpg' mode="widthFix"></image></view>
<view class='typeinfo'>
<text class='typetitle'>幹垃圾是指：</text>
<text>又稱"其餘垃圾"除有害垃圾、可回收物、 溼垃圾之外的其餘生活廢棄物</text>
</view>
</view>
<view class='mbox-2'>幹垃圾主要包括</view>
<view class='mbox-3'>
餐盒、餐巾紙、溼紙巾、衛生間用紙、塑料袋、 食品包裝袋、污染嚴重的紙、菸蒂、紙尿褲、 一次性杯子、大骨頭、貝殼、花盆、陶瓷等
</view>
<view class='mbox-2'>幹垃圾投放要求</view>
<view class='mbox-3'>
<text>儘可能瀝乾水分</text>
<text>難以辨識類別的生活垃圾投入幹垃圾容器內</text>
</view>

</view>

</view>
<!----itembox-end-->

<!--nokey-->
<view class='nokey' wx:if="{{ishownokey}}"><image src='{{webserverUrl}}/laji/images/type/ico-0.png' mode="widthFix"></image></view>
<!--nokeyend-->
</view>
<!--end-->

<import src="../../template/nav" />
<view class="foot">
      <template is="nav" data="{{...iocarr}}"/>
</view> 

<!--分享-->
<button open-type='share' class='sharecss'hover-class='other-button-hover'>
<image src='../images/fx.png'></image>
</button>
<!---->

第二個頁面拍照識別垃圾分類

<!--pages/laji/laji.wxml-->

<!--遮罩層-->
<view class='show-box'>
<view wx:if="{{!src}}" class='show-img-box'>
<view class='camera-box'><camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 100%;"></camera></view>
</view>

<view wx:if="{{src}}" class='show-img-box'>
<image src="{{src}}"></image>
<!--show-items-list-->
<view class='show-items-list'>

<block wx:for="{{itemdata}}" wx:for-index="idx" wx:for-item="item">
<view class='itemcss  itemcss{{item.typeid}}'>
<view class='itemcss-title'>{{item.typename}}</view>
<view class='itemcss-name'>{{item.keyword}}</view>
</view>
</block>

</view>
<!--end show-items-list-->
</view>
<!---->
<view class='show-items-box'>
<!--相機按鈕-->
<!--<image src='../images/playbut.png'  class='playbutcss' bindtap="subut"></image>-->
<cover-view class="playbutcss" bindtap="subut">
      <cover-image class="img" src="../images/playbut.png" />
</cover-view>
<!--end相機按鈕-->


</view>
<!---->
</view>
<!--end-->

 

 垃圾分類小程序運行效果