垃圾分类微信小程序开发源码,垃圾分类查询工具,垃圾怎么分类拍照识别垃圾分类(一)
前一篇经验写了怎么使用微信小程序进行垃圾分类识别,拍照识别垃圾分
类小程序的使用方法,今天我们来说下这个垃圾分类小程序的开发代码源码的实现。
微信小程序的开发熟悉的朋友都不陌生,开发工具那些这里就不讲了,主要就讲一下垃圾分类小程序的垃圾查询功能代码的实现。
首先我们要做的就是打开微信小程序开发工具,用自己注册小程序的微信管理员账号扫一扫二维码登录开发工具,比如我的这个垃圾分类小程序管理员用的是:wangzai_liu 这个微信号绑定的,我们登录开发工具就必须用这个微信登录,别的没用哈。
打开微信小程序开发工具后,首先我们要做的是先吧小程序的前段页面写好,也就是小程序的wxml文件。
主要的查询代码:
<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>
前台页面写好了,接下来我们就要打开对应的js文件来实现查询功能的这个代码
,可以看到查询按钮绑定了一个:<form bindsubmit="formSubmit" report-submit='true'>
index.js代码实现:
formSubmit:function(e){
wx.showLoading({
title: '识别中...',
})
console.log(e.detail.formId)
var that = this;
wx.request({
url: app.globalData.serverUrl + '/laji/api.php?action=ss_forkey',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
method: 'POST',
dataType: 'json',
data: {
key: this.data.searchValue,
formid: e.detail.formId
},
success: function (res) {
console.log(res.data)
that.setshowitem();
that.setData({ isshowmain:false});
if (res.data.typeid==1) {
that.setData({ ishowtime1: true});
} else if (res.data.typeid == 2) {
that.setData({ ishowtime2: true });
} else if (res.data.typeid == 3) {
that.setData({ ishowtime3: true });
} else if (res.data.typeid == 4) {
that.setData({ ishowtime4: true });
} else {
that.setData({ ishownokey: true });
}
},
fail: function (error) {
wx.hideLoading();
wx.showToast({
title: '请求超时',
icon: 'loading',
duration: 2000
});
console.log(error)
},
complete: function () {
wx.hideLoading();
}
})
}
通过wx.request函数 将用户搜索的垃圾名称提交到小程序的后天处理,后台处理查询完成以后将查询到的结果输出给前台显示,比如我们搜索:“电池”前台将电池传送给后台,查询结果为“有害垃圾” 前台页面我们就展现给用户看:
这样垃圾分类查询小程序的 文字查询功能就完成了,至于后台对垃圾分类的检索处理这个数据是怎么来的,我们有很多方法,我用的后天服务是php的。有需要的伙伴们可以加QQ:1379174464 进行交流。
来源:CSDN
作者:wangzai900
链接:https://blog.csdn.net/wangzai900/article/details/98594820