北京に実行し始めたとき、私は上海の人々が本当に人類の利益のためにそれを小さなプログラムを行うには、プログラマとして、失うする方法がわからないゴミの後に魂を拷問されていました前にゴミ特別火災は、知りません。
レンダリング：
まず、グローバルapp.jsonとapp.wxssは少し何かを追加しました
App.json
{
"ページ"：
"ページ/インデックス/インデックス"、
"ページ/詳細/詳細"、
"ページ/ログ/ログ"
]、
"ウィンドウ"：{
"backgroundTextStyle"： "光"、
"navigationBarBackgroundColor"：「＃ FFF」、
"navigationBarTitleText"： "微信"、
"navigationBarTextStyle"： "白"、
"navigationStyle"： "カスタム"
}、
"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;
}