微信小程序项目-你是什么垃圾？
2019-10-08 本文已影响0人
终身成长人格
又到了每日分享了，这次分享到内容是：微信小程序项目-你是什么垃圾？
垃圾分类特别火也不知道北京什么时候也开始执行，看见之前上海市民被灵魂拷问了以后垃圾真的不知道如何丢了，作为程序员就做一个小程序造福人类吧。
效果图：
image
image
一、全局的app.json和app.wxss加入了一点东西
App.json
{
"pages": [
"pages/index/index",
"pages/details/details",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "white",
"navigationStyle": "custom"
},
"sitemapLocation": "sitemap.json"
}
App.wxss
.bg{
position: absolute;
left:0;
top:0;
width:100%;
height: 100%;
}
二、下面就是首页的index.wxml、index.js、 index.wxss
index.wxml
<image class='bg' src='../img/bg.png'></image>
<view class='container'>
<view class='top'>
<text class='top-title'>你是什么垃圾</text>
<text class='top-more'>一键查询免烦恼，从我做起爱环保</text>
</view>
<view class='search'>
<view class='search-main'>
<icon type='search' size='16'></icon>
<input
placeholder="请输入查询的垃圾名称"
bindinput='iptDetails'
bindconfirm="search"
></input>
</view>
<view class='search-end' wx:if='{{searchResultDatas.length > 0}}'>
<text
wx:for='{{searchResultDatas}}'
wx:key='{{index}}'
bindtap='toDetails'
data-title='{{item.itemName}}'
>{{item.itemName}}</text>
</view>
</view>
<view class='hot'>
<view class='hot-main'>
<view class='hot-title'>热门搜索：</view>
<view class='hot-item'>
<text
wx:for='{{hotSearch}}'
wx:key='{{index}}'
bindtap='toDetails'
data-title='{{item.itemName}}'
>{{item.itemName}}</text>
</view>
</view>
</view>
</view>
index.js
Page({
/**
* 页面的初始数据
*/
data: {
hotSearch:[],
searchResultDatas:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let That = this;
wx.request({
url: 'http://apis.juhe.cn/rubbish/hotSearch',
data:{
key: 'ae200d60495f41dfb86da332dc059214',
},
success(res){
That.setData({
hotSearch: res.data.result
})
}
})
},
toDetails(e){
let title = e.currentTarget.dataset.title;
wx.navigateTo({
url: `../details/details?id=${title}`
})
},
iptDetails(e){
let That = this;
let val = e.detail.value;
if(val.length == 0){
this.setData({
searchResultDatas: []
})
return;
}
wx.request({
url: 'http://apis.juhe.cn/rubbish/search',
data:{
key:"ae200d60495f41dfb86da332dc059214",
q: val
},
success(res){
That.setData({
searchResultDatas: res.data.result
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxss
.container{
position: relative;
left:0;
top:88rpx;
}
.search-end{
display: flex;
overflow-y:auto;
background: #fff;
width:100%;
height: 750rpx;
position: fixed;
left:0rpx;
bottom:0rpx;
z-index:999;
flex-direction: column;
padding:30rpx;
}
.search-end text{
padding:20rpx 0 ;
border-bottom:1px solid #f5f5f5;
font-size:12px;
color:#ccc;
}
.top{
display: flex;
align-items: center;
flex-direction: column;
padding-top:150rpx;
color:#fff;
}
.top-title{
font-size:36px;
font-weight: bold;
}
.top-more{
font-size:12px;
}
.search{
padding-top:40rpx;
display: flex;
justify-content: center;
}
.search-main{
display: flex;
align-items: center;
background: #fff;
height:80rpx;
width:90%;
border-radius: 10rpx;
}
.search-main icon{
width:80rpx;
text-align: center;
}
.search-main input{
flex:1;
font-size:12px;
}
.hot{
padding-top:40rpx;
display: flex;
justify-content: center;
}
.hot-main{
width:90%;
color:#fff;
}
.hot-title{
padding:20rpx 0;
}
.hot-item{
display: flex;
flex-wrap: wrap;
}
.hot text{
border-radius: 30rpx;
border:1px solid #fff;
padding:5rpx 30rpx;
margin: 20rpx 20rpx 20rpx 0;
font-size:12px;
}
三、下面就是详情页details.wxml、details.js、details.wxss
details.wxml
<image class='bg' src='../img/bg.png'></image>
<view class='details'>
<view class="end">
<text class='name'>{{item.itemName}}</text>
<text class='attr'>属性“{{item.itemCategory}}”</text>
</view>
<view class='details-more'>
<view class='more-title'>
{{item.itemCategory}}投放指导
</view>
<view class='more-title'>
<text>·尽量沥干水分</text>
<text>·难以辨别的生活垃圾应投入垃圾容器内</text>
<text>·餐巾纸、纸巾、纸尿裤等其他垃圾</text>
</view>
</view>
<button bindtap='toHome'>关闭</button>
</view>
details.js
// pages/details/details.js
Page({
/**
* 页面的初始数据
*/
data: {
item:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let itemName = options.id;
let That = this;
wx.request({
url: 'http://apis.juhe.cn/rubbish/search',
data:{
key: 'ae200d60495f41dfb86da332dc059214',
q: itemName,
type:2
},
success(res){
That.setData({
item: res.data.result[0]
})
}
})
},
toHome(){
// wx.navigateTo({
// url: '../index/index',
// })
wx.navigateBack()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
index.wxss
.details{
position: relative;
top:44px;
left:0;
}
.end{
padding-top:120rpx;
padding-bottom:100rpx;
color:#fff;
display: flex;
flex-direction: column;
align-items: center;
}
.end text{
padding:5rpx 0;
}
.name{
font-size:21px;
}
.attr{
font-size:36px;
font-weight: bold;
}
.details-more{
width:90%;
margin:0 auto;
background: #fff;
border-radius: 20rpx;
padding:20rpx;
}
.more-title{
padding:10rpx;
font-size:16px;
}
.more-title text{
padding:20rpx;
font-size:12px;
display: block;
}
button{
margin-top:100rpx;
background: #fff;
color:#0190ff;
border:none;
width:300rpx;
height: 80rpx;
border-radius: 50rpx;
font-size:14px;
text-align: center;
line-height: 80rpx;
}
老规矩，附带课程连接：（这次是收费的）：https://www.3mooc.com/front/couinfo/996
