概述

你是不是也想像上图那样，坐在家里悠哉悠哉，美衣靓装买不停，我就是一枚这样的宅女。这不，学了微信小程序也快两个月了，正发愁做个什么项目练练手，日常逛淘宝京东了解下，这时候就想着要不就做个电商平台吧。解释一下，这个项目专为美铝量身定做的哦，至于帅锅嘛，emmmm...，还是可以进来的啦啦啦哈哈哈哈

细节介绍

1.首页

首页由swiper和图片分类以及详细信息组成，首页整体采用的是弹性布局这样的布局方式，弹性布局能更好的兼容各种移动设备，在这里也推荐各位新手使用哦

2.分类

这里我写了两个分类页面，它们的功能是一样的

分类页导航栏

wxml

<scroll-view class="container" scroll-x="true"><view class="box" wx:for="{{bodyList}}" wx:key="{{index}}"><view id="{{index}}" class="weui_hd {{activeIndex == index ? 'on' :''}}"bindtap="tabClick">{{item.title}}</view></view><view class="detail {{current == 0 ? '' : 'hide'}}">我是1</view><view class="detail {{current == 1 ? '' : 'hide'}}">我是2</view><view class="detail {{current == 2 ? '' : 'hide'}}">我是3</view>
</scroll-view>
复制代码

wxss

.container {white-space: nowrap;
}
.box {display: inline-block;
}
.weui_hd {padding: 0 10rpx;
}
.on {border-bottom: 4rpx solid red;color: red;
}
.hide {display: none;
}
复制代码

js

data: {current:0,bodyList:[{id:'1',title:'女装'},{id:'2',title:'时尚套装'},{id:'3',title:'T恤'},{id:'4',title:'连衣裙'},{id:'5',title:'短裙'},{id:'6',title:'雪纺衫'},{id:'7',title:'休闲裤'},{id:'8',title:'半身裙'},{id:'9',title:'牛仔裤'},{id:'10',title:'衬衫'},{id:'11',title:'背带裤'}],activeIndex: 0,},tabClick: function(e) {var id = e.currentTarget.id;this.setData({activeIndex:id,current: id}) }
复制代码

3.商品详情页

4.购物车

底部tabBar

wxml

<view class="detail-nav"><view class="nav"><image src="/image/shouye.png" /><p>首页</p></view><view class="nav"><image src="/image/kefu1.png"/><p>客服</p></view><view class="nav"><image src="/image/shoucang.png"/><p>收藏</p></view><button class="button-green" bindtap="addCart" formType="submit">加入购物车</button><button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
</view>
复制代码

wxss

.detail-nav {display: flex;flex-direction: row;align-items: center;float: left;background-color: #fff;position: fixed;bottom: 0;right: 0;z-index: 1;width: 100%;height: 100rpx;border: 1px solid #afa9a9;
}
.button-green {background-color: #4caf50; /* Green */
}
.button-red {background-color: #f44336; /* 红色 */
}
.detail-nav image {width: 60rpx;height: 60rpx;padding: 0 20rpx;
}
.nav {display: flex;flex-direction: column;justify-content: center;border-right: 1px solid #e9e9e9;
}
.nav p {font-size: 22rpx;text-align: center;
}
复制代码

底部弹框

js

addCart() {var that = this;var animation = wx.createAnimation({duration:500,timingFunction:'linear'})that.animation = animation;animation.translateY(200).step();that.setData({animationData:animation.export(),chooseSize:true})setTimeout(function(){animation.translateY(0).step()that.setData({animationData:animation.export()})},200)},hideModal() {var that = this;var animation = wx.createAnimation({duration:1000,timingFunction:'linear'})that.animation = animation;animation.translateY(200).step();that.setData({animationData:animation.export()})setTimeout(function(){animation.translateY(0).step()that.setData({animationData:animation.export(),chooseSize:false})},200)}
复制代码

购物车中页面的数据交互

js(通过setStorage将数据存至storage)

addToCart() {var color='';this.data.activeIndex == '' ? (wx.showModal({content: '请选择颜色',  success: function(res) {}  }) ): color = this.data.colorList[this.data.activeIndex].title;// console.log(color);var size='';this.data.currentIndex == '' ? (wx.showModal({content: '请选择尺码',  success: function(res) {}  }) ): size = this.data.bodyList[this.data.currentIndex].title;// console.log(size)var num = this.data.num;var text = `已选择：  ${color}  ${size}`var mode = {num: num,text:text,price:this.data.price,title:this.data.title,src:this.data.src,selected:false}this.setData({mode:mode})// console.log(mode)color == '' || size == ''?'':wx.setStorage({key: 'goods',data: this.data.mode,success: function(res){wx.showToast({  title: '加入购物车成功',  icon: 'success',  duration: 2000  }),wx.navigateTo({url: '/pages/cart/cart'})}});// console.log(this.data.mode)this.hideModal()}
复制代码

js(通过getStorage获取数据)

var that = this;var carts = [];wx.getStorage({key: 'goods',success: function(res){// console.log(res.data)carts.push(res.data)that.setData({hasList:true,cart:carts})console.log(this.data.cart)// console.log(that.data.goods)}});
复制代码

5.搜索框

搜索框原始状态

搜索：

也附上代码扒

wxml

<view class="container"><input type="text" bindinput="search" value="{{input}}" placeholder="搜索"/><p bindtap="inputSearch">{{search}}</p>
</view>
<view class="row" ><navigator class="row-col" url="{{item.url}}" wx:for="{{searchList}}" wx:key="index"><image src="{{item.src}}"/><text>{{item.name}}</text><p>￥{{item.price}}元</p></navigator>
</view>
复制代码

js

if(value != '') {let array = [];this.data.clothes.forEach(item => {// console.log(item.name.indexOf(value)==-1)item.name.indexOf(value)==-1?'':array.push(item)});this.setData({searchList: array})}
复制代码

6.个人信息栏

授权登录

确认是否登录 登录成功

emmm......

这里附上代码了

wxml

<view class="weui-cells"><view class="weui-cell weui-cell_access head" wx:if="{{canIUser}}" bindtap="getUserInfo" hover-class="weui-cell_active"><view class="weui-cell__hd"><!-- <view class="images"><open-data type="userAvatarUrl"></open-data></view> --><image src="{{userInfo.avatarUrl}}"/></view><view class="weui-cell__bd"><!-- <open-data type="userNickName"></open-data> --><view class="name">{{userInfo.nickName}}</view><view class="stu_id">{{stu_id}}</view></view><view class="weui-cell__ft  weui-cell__ft_in-access"></view></view><view><button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button></view>
</view>
复制代码

js

getUserInfo: function() {wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdapp.globalData.userInfo = res.userInfo;app.globalData.iv = res.iv;app.globalData.encryptedData = res.encryptedData;this.setData({userInfo:app.globalData.userInfo})}})}
复制代码

好了，就这样吧，后续持续更新中，欢迎关注。如果您还满意的话，就请给个赞咯，谢谢！github上也可以给个小星星！

附上我的github地址：失忆三叶草