云诺说 - 小程序定制 - 广告营销
当前位置: 商业源码 > 基于微信小程序云开发的智能垃圾分类小程序优秀毕业设计作品

基于微信小程序云开发的智能垃圾分类小程序优秀毕业设计作品

2020-03-20 08:23 分类:商业源码 作者:云诺 阅读(408)

版权声明:本文为博主原创文章,如果转载请给出原文链接:http://doofuu.com/article/4156234.html

去年全国大部分城市都实行了垃圾分类。小程序又那么的火。所以毕业设计就做了这个智能垃圾分类小程序。没想到还是本专业的优秀毕业设计作品哦。当初开始做的时候参考了目前很多垃圾分类小程序,其实大家的功能都大同小异,其中最关键的点无非就是帮助用户快速查找垃圾属于具体的分类,目前实现了如下几个功能:
1.文字搜索:根据文本搜索垃圾分类
2.拍照识别:根据图片识别出文本然后搜索垃圾分类
3.语音识别:根据语音识别出文本然后搜索垃圾分类
4.垃圾分类基础数据:分成四大类,每类数据根据字母表可以索引

智能垃圾分类小程序界面截图如下,看上的可以加我微信细聊(LGY178888),请备注来意!

微信图片_20200320174543.jpg

微信图片_20200320174613.jpg

微信图片_20200320174619.jpg

首页代码逻辑如下

var checkPermissionUtil = require('../../utils/check-permission-util.js');
var baiduTokenUtil = require('../../utils/baidu-token-util.js');

Page({
    data: {
        SHOW_TOP: true,
        canRecordStart: false,
    },
    isSpeaking: false,
    accessToken: "",
    onLoad: function (options) {
        console.log("onLoad!");
        var that=this
        wx.showShareMenu({
            withShareTicket: true //要求小程序返回分享目标信息
        });
        var isShowed = wx.getStorageSync("tip");
        if (isShowed != 1) {
            setTimeout(() => {
                this.setData({
                    SHOW_TOP: false
                })
                wx.setStorageSync("tip", 1)
            }, 3 * 1000)
        } else {
            this.setData({
                SHOW_TOP: false
            })
        };
        try {
            baiduTokenUtil.getBdAiAccessToken().then(
                function (res) {
                    console.log('获取百度ai token:' + JSON.stringify(res));
                    console.log(res.access_token)
                    that.accessToken = res.access_token ;
                }, function (error) {
                    console.error('获取百度ai token:' + error);
                }
            );
        } catch (error) {
            console.error(error);
        }
    },

    goSearch: function () {
        wx.navigateTo({
            url: '/pages/ai/search'
        });
    },

    onBindCamera: function () {
        console.log('onBindCamera!');
        var that = this;
        try {
            checkPermissionUtil.checkPermission('scope.camera').then(function (res) {
                    console.log('检测权限结果:' + res);
                    wx.navigateTo({
                        url: 'camera/camera',
                    });
                }, function (err) {
                    console.error('检测权限结果失败:' + err);
                    wx.showToast({
                        title: '授权失败,无法使用该功能~',
                        icon: 'none'

                    });
                }
            );
        } catch (err) {
            console.error(err);
            wx.showToast({
                title: '授权失败,无法使用该功能~',
                icon: 'none'

            });
            return
        }
    },


    onTouchStart: function () {
        console.log('onTouchStart!' + this.data.canRecordStart);
        speaking.call(this);
        this.setData({
            canRecordStart: true
        });
        this.startRecordHandle();
    },

    onTouchEnd: function () {
        console.log('onTouchEnd!canRecordStart:' + this.data.canRecordStart + '----isSpeaking:' + this.isSpeaking);
        clearInterval(this.timer);
        this.setData({
            canRecordStart: false
        });
        if (this.isSpeaking) {
            wx.getRecorderManager().stop();
        }

    },

    // 2. 录音前检测scope.record授权情况
    async startRecordHandle() {
        var that = this;
        try {
            await checkPermissionUtil.checkPermission('scope.record').then(function (res) {
                    console.log('检测权限结果:' + res);
                    that.record();
                }, function (err) {
                    console.error('检测权限结果失败:' + err);
                    wx.showToast({
                        title: '授权失败,无法使用该功能~',
                        icon: 'none'

                    });
                }
            );
        } catch (err) {
            console.error(err);
            wx.showToast({
                title: '授权失败,无法使用该功能~',
                icon: 'none'

            });
            return
        }
    },

    //开始录音的时候
    record: function () {
        var that = this;
        console.log('startRecord!');
        const recorderManager = wx.getRecorderManager();
        const options = {
            duration: 30000,//指定录音的时长,单位 ms
            sampleRate: 16000,//采样率
            numberOfChannels: 1,//录音通道数
            encodeBitRate: 48000,//编码码率
            format: 'aac',//音频格式,有效值 aac/mp3
        };

        console.log('开始正式录音前,canRecordStart:' + this.data.canRecordStart);
        //开始录音
        if (this.data.canRecordStart) {
            recorderManager.start(options);
            this.isSpeaking = true;
        }
        recorderManager.onStart(() => {
            console.log('recorder start')

        });


        recorderManager.onPause(() => {
            console.log('recorder pause')
        })
        recorderManager.onStop((res) => {
            this.isSpeaking = false;
            console.log('recorder stop', res);
            //wx.hideLoading();
            if (res && res.duration < 1000) {
                wx.showToast({
                    title: '说话时间太短啦!',
                    icon: 'none'

                })
                return;
            }
            if (res && res.duration > 8000) {
                wx.showToast({
                    title: '说的有点长,可以精简点呀~',
                    icon: 'none'
                })
                return;
            }
            const {tempFilePath} = res
            this.speechRecognition(res);
        })


        //错误回调
        recorderManager.onError((res) => {
            // wx.showToast({
            //     title: '录音出错啦,请重试!',
            //
            // });
            console.error('录音错误回调:' + JSON.stringify(res));
        })
    },


    speechRecognition: function (res) {
        wx.showLoading({
            title: '识别中...',
        })
        var that = this;
        var fileSize = res.fileSize;
        var tempFilePath = res.tempFilePath;
        var format = 'pcm';
        if (tempFilePath) {
            format = tempFilePath.substring(tempFilePath.lastIndexOf('.') + 1);
        }
        const fileSystemManager = wx.getFileSystemManager()
        fileSystemManager.readFile({
            filePath: res.tempFilePath,
            encoding: "base64",
            success(res){
                console.log(res);
                var base64 = res.data;
                var data = {
                    "format": format,
                    "rate": 16000,
                    "dev_pid": 80001,
                    "channel": 1,
                    "token": that.accessToken,
                    "cuid": "baidu_workshop",
                    "len": fileSize,
                    "speech": base64
                }

                console.log('语音识别请求参数:' + JSON.stringify(data));
                wx.request({
                    url: 'https://vop.baidu.com/pro_api',
                    method: 'post',
                    data: data,
                    success (res) {
                        wx.hideLoading();
                        console.log(res.data)
                        var result = res.data.result;
                        if (result && result.length > 0) {
                            var location = result[0].lastIndexOf("。");
                            var text = '';
                            console.log(result[0]);
                            console.log('符号位置:' + location);

                            text = result[0].replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\。|\,|\!|\;|\>|\/|\?]/g, "");
                            console.log('text' + text);
                            wx.navigateTo({
                                url: '/pages/ai/search?searchText=' + text
                            })
                        } else {
                            //没有result,认为语音识别失败
                            wx.showModal({
                                title: '提示',
                                content: '不知道你说的啥,可以再试试~',
                                showCancel: false,
                                success (res) {
                                    if (res.confirm) {
                                        console.log('用户点击确定')
                                    } else if (res.cancel) {
                                        console.log('用户点击取消')
                                    }
                                }
                            })

                        }


                    },
                    fail(error){
                        wx.hideLoading();
                        console.log(error);
                        wx.showToast({
                            icon: 'none',
                            title: '请求失败了,请确保网络正常,重新试试~',
                        })
                    }

                })

            },
            fail(res){
                wx.hideLoading();
                console.log(res)
            }
        })

    },


});

//麦克风帧动画
function speaking() {
    var _this = this;
    //话筒帧动画
    var i = 1;
    this.timer = setInterval(function () {
        i++;
        i = i % 5;
        _this.setData({
            j: i
        })
    }, 200);
}
<view class="cu-bar bg-darkGray search">
  <view class=" search-form  round " bindtap="goSearch">
    <text class="cuIcon-search text-green"></text>
    <input type="text" placeholder="输入垃圾名称" confirm-type="search" bindinput="searchIcon"></input>
  </view>
</view>
<view class='ai-view'>
  <image src='/images/paizhao.png' class='ai-paizhao' bindtap='onBindCamera' />
  <text class='txt'>拍照识别</text>
</view>



<view class='ai-view'>
  <image src='/images/speech_icon_128.png' class='ai-paizhao'  bindtouchstart='onTouchStart' bindtouchend='onTouchEnd' />
  <text class='txt'>语音识别</text>
</view>
<view  wx:if="{{canRecordStart}}"  class="speak-style">
    <image wx:if="{{j==1}}" class="sound-style" src="../../images/speech_1.png" ></image>
    <image wx:if="{{j==2}}" class="sound-style" src="../../images/speech_2.png" ></image>
    <image wx:if="{{j==3}}" class="sound-style" src="../../images/speech_3.png" ></image>
    <image wx:if="{{j==4}}" class="sound-style" src="../../images/speech_4.png" ></image>
    <image wx:if="{{j==5}}"class="sound-style" src="../../images/speech_5.png" ></image>
 </view>

<view class="box" wx:if="{{SHOW_TOP}}">
  <view class='arrow'></view>
  <view class='body' bindtap='showModal'>
    <text>点击「添加到我的小程序」</text>
  </view>
</view>

<view class="kefu-box">
<button  open-type="contact" class="kefu-body">
    <image class="img" src="/images/ai-chat.png"></image>
    <text class="q-tx">联系我们</text>
</button>
</view>
.bg-darkGray {
    background-color:  #f6f6f6;
    color:#ffffff;
}
.cu-bar .search-form {
  background-color:  #ffffff;
}
.cu-bar .search-form input{
  height: 100rpx;
}
.cu-bar .search-form{
  height: 90rpx;
}
.cu-bar{
  margin-top: 100rpx;
}
.ai-view{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
}

.ai-view-speech{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}

.txt{
  font-size: 24rpx;
  /*font-weight: bold;*/
  color: #00cc77;
  margin-top: 10rpx;
}
.tip{
  font-size: 22rpx;
  color: #00cc77;
  margin-top: 20rpx;
}
.ai-paizhao{
  width: 150rpx;
  height: 150rpx;
  margin-top: 50rpx;
}
.float-view{
  position:absolute;
  z-index:9;
  width: 100rpx;
  height: 100rpx;
  margin-right: 50rpx;
  margin-bottom: 50rpx;
}



.box {
  position: fixed;
  top: 0;
  /* left: 0; */
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  width: 600rpx;
}
.arrow {
  width: 0;
  height: 0;
  margin-right: 120rpx;
  border-width: 20rpx;
  border-style: solid;
  border-color:  transparent transparent #00cc77 transparent;
}
.body {
  background-color: #00cc77;
  box-shadow: 0 10rpx 20rpx -10rpx #00cc77;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84rpx;
  padding: 0 20rpx;
  margin-right: 40rpx;
}
.body > text {
  color: #FFF;
  font-size: 28rpx;
  font-weight: 400;
}
.kefu-box{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  width: 400rpx;
  height: 400rpx;
}
.kefu-body {
  background-color: white;
  box-shadow: 0 10rpx 20rpx -10rpx #e1e1e1;
  border-radius: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  padding: 10rpx 30rpx;
  margin-right: 40rpx;
  margin-bottom: 40rpx;
}
.img{
  width: 40rpx;
  height: 40rpx;
}
.q-tx{
  margin: 0 0 0 10rpx;
  font-size: 24rpx;
}

.speak-style{
    position: fixed;
    top:250rpx;
    right:20rpx;
    z-index: 999;
    justify-content: flex-end;
     align-items: flex-end;
     flex-direction: column;


}

.sound-style{
  width: 128rpx;
  height:128rpx;

}


 

祝生活愉快!

「创作不易,你的支持是本站持续更新最大的动力!」

赞(0) 打赏

谢谢你请我喝奶茶*^_^*

支付宝
微信
1

谢谢你请我喝奶茶*^_^*

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 基于微信小程序云开发的智能垃圾分类小程序优秀毕业设计作品

博客简介

云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、网络推广引流服务、推荐优质的引流渠道、广告开户、竞价推广等行业的IT技术网站,希望你能在本站得到你所需要的信息。

Q Q :2730094141

微信 :LGY17666

职业 :小程序开发、网络推广

现居 :广东省-广州市-天河区

友情链接

欢迎与本博客交换友情链接,本博客对交换链接的网站没有要求。如果您是本博客的友情链接网站,在遇到网站运行问题时,可以随时联系,我们将免费提供技术类支持! 申请交换友链

站点统计

  • 文章总数:108 篇
  • 草稿数目:0 篇
  • 分类数目:14 个
  • 独立页面:118 个
  • 评论总数:0 条
  • 访问总量: 73866次
  • 最近更新:2020年08月11日