基于微信小程序云开发的二手商城设计与开发系列之商城首页

本系列课题转载自云诺说博客。这是基于微信小程序的二手商城设计与开发系列文章，很早之前就在准备微信小程序的二手商城设计与开发系列课题了。可是一直在忙着开发二手商城小程序功能，系列博文一直拖着没写下，正好最近把功能都开发完有空余时间来写一写在设计与开发微信小程序的二手商城中遇到的问题，和开发中的一些经验，算是自己的一点总结。

二手商城系统一直是一个比较适合学习的小程序开发的主题，不算简单但是也没多大难度。该微信小程序的二手商城设计的先对简洁一些，在首页分别有搜索框、轮播图、各类型的二手物品展示，在布局上采用了官方推荐的flex布局方式，简单简洁。

二手商城首页布局代码

<view>
<van-searchvalue="{{ searchKey }}"input-align="center"bind:search="toSearchList"shape="round"placeholder="请输入要搜索的商品"
/><swiperclass="home-swiper"autoplay="true"interval="3000"duration="500"><block wx:for="{{imgUrls}}" wx:key="*this"><swiper-item><image src="{{item}}" class="slide-image"/></swiper-item></block></swiper><view class="main"><van-tabs active="{{ active }}" bind:change="toClassifyList"><block wx:for="{{classify_list}}"> <van-tab title="{{item}}"><!-- 信息列表 --><view class="main-msg"><view class="msg-list"><!-- 二手商品列表 --><view wx:if="{{choose == 1}}" bindtap="tapToDetail" data-id="{{item._id}}" class="msg-item" wx:key="{{item._id}}" wx:for="{{goods_list}}"><image src="{{item.userDetail.avatarUrl}}" class="userinfo-avatar mini-avatar"catchtap="tapToUserInfo"data-userid="{{item.openid}}"/><view class="item_right"><view class="nickName"><text>{{item.userDetail.nickName}}</text></view><view class="item_title"><text>{{item.title}}</text></view><view class="price"><text class="tag">￥</text><text>{{item.price}}</text></view><view class="pic_box"><imagewx:for="{{item.pic_url}}" wx:for-item="img"wx:for-index="idx" wx:key="{{index}}-{{idx}}" src="{{img}}"class="goods_pic"/></view><view class="txt_box"><view class="g_type"><text>#{{item.g_type}}</text><van-tag wx:if="{{item.isNew}}" plain type="success">全新宝贝</van-tag></view><text class="pub_time">{{item.pub_time}} | {{item.likeNum}}人喜欢</text></view></view></view></view></view></van-tab></block></van-tabs></view>
</view>

数据处理逻辑代码

var config = require('../../config.js');
const app = getApp()
Page({/*** 页面的初始数据*/data: {//首页轮播图imgUrls: ["../../images/icons/b1.jpg","../../images/icons/b2.jpg"],choose: 1,goods_list: [],//所有商品列表active: 0,//当前选择的tabclassify_list: config.classify_list,//所有类型searchKey:''//查询词},//获取对应类型的商品initList(type){const that = this;wx.showLoading({title: '加载中'})//请求云函数查询对应类型的商品数据wx.cloud.callFunction({name: 'getGoods_list',data: {type},success: res => {console.log(res);wx.stopPullDownRefresh(); // 停止下拉刷新wx.hideLoading();let reverseList = res.result.list.data.reverse();that.setData({goods_list: reverseList});},fail: err => {wx.hideLoading();console.log(err);}})},/*** 生命周期函数--监听页面显示*/onShow() {let type = this.data.classify_list[this.data.active];//查询当前类型的数据this.initList(type);//清空搜索框内容this.setData({searchKey:''})},tapToDetail(e){const { id } = e.currentTarget.dataset;wx.navigateTo({url: `../goodsDetail/goodsDetail?id=${id}&status=1`});},toClassifyList(e){//选择的类型let type = e.detail.title;this.setData({active: e.detail.index})this.initList(type);},toSearchList(e){var searchKey = e.detail.replace(/\s*/g, '');if(searchKey){wx.navigateTo({url: `../classifyList/classifyList?from=search&txt=${searchKey}`})}},tapToUserInfo(e){const { userid } = e.currentTarget.dataset;wx.navigateTo({url: `../userCenter/userCenter?userId=${userid}`})}
})

代码量不多，逻辑清晰简单，界面不算太漂亮，但是也算不上丑陋。最后看下界面的效果图
如果代码有任何问题，或者有任何疑惑都可联系我一起交流，看到一定会回。之前开发过好几个微信小程序，不过还没来得及写分享博文。以后有时间会慢慢补上。
往期案例视频展示
微信小程序序二手商城演示视频
点餐微信小程序演示视频
校园论坛微信小程序演示视频