又到了每日分享了, 这次分享到内容是: 微信小程序项目 - 你是什么垃圾?
垃圾分类特别火也不知道北京什么时候也开始执行, 看见之前上海市民被灵魂拷问了以后垃圾真的不知道如何丢了, 作为程序员就做一个小程序造福人类吧.
效果图:
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
来源: http://www.jianshu.com/p/f39df5aad52e