目录
简介
这是我在学习完微信小程序后，写的一个小案例，是一个关于女性商品的，数据也是自己通过数组写的死数据。这是学习完vue之后才学习的，感觉和vue很像，导致我自己的懒癌犯了，学不进去了，就大致了解之后就上手了，因为写的比较简单，部分我感觉重复的功能也没有写。所有整体来说写的还是比较顺利。
作品详情
这个作品我写了四个页面，分别是首页、分类、购物车、个人中心。其中主页和个人中心页面的功能，相对其它两个页面来说更多一点。
在作品中我使用了一个插件库Lin UI，但是我感觉功能一般，所有大家可以使用其他的
作品代码
一、主页界面
1、WXML文件:
<!--pages/home/home.wxml-->
<!--轮播图-->
<view class="swiper-container">
<swiper indicator-dots="{{true}}" autoplay interval="3000" duration="1500" circular class="swiper">
<swiper-item class="lun">
<image mode="scaleToFill" src="/images/carousel/carousel-1 .jpg"></image>
</swiper-item>
<swiper-item class="lun">
<image mode="scaleToFill" src="/images/carousel/carousel-2.jpg"></image>
</swiper-item>
<swiper-item class="lun">
<image mode="scaleToFill" src="/images/carousel/carousel-3.jpg"></image>
</swiper-item>
</swiper>
</view>
<view class="brand-title">
<text>品牌推荐</text>
</view>
<view class="container">
<!--循环遍历数组grids1中的品牌数据展示到界面上-->
<view wx:for="{{grids1}}" wx:key="idx" wx:for-index="idx" wx:for-item="item" class="container-grid">
<view class="sort-grid">
<image mode="widthFix" src="{{item.src}}"></image>
<view class="">{{item.text}}</view>
</view>
</view>
</view>
<!--商品推荐-->
<view class="">
<image src="/images/fashion/fashion.png" mode="scaleToFill" class="fashion" />
<view class="fashion-brand">
<!--循环遍历数组grids2中的商品数据展示到界面上-->
<view wx:for="{{grids2}}" wx:key="idx" wx:for-item="item" class="brand-holder">
<image mode="widthFix" src="{{item.src1}}" class="holder-src1"></image>
<view class="brand-logo-holder">
<image mode="widthFix" src="{{item.src2}}" class="holder-src2"></image>
</view>
<view class="siding">
<text>2023新款优雅打揽千鸟格舒适显瘦百搭女装</text>
<text style="font-size: 30rpx; padding-top: 10rpx; color: rgb(241, 6, 124); font-weight: 700;">{{item.text2}}</text>
</view>
<view class="brand-price">
<l-price unit="￥" value="666" class="price" color="#000"></l-price>
<button plain="{{falsh}}" class="holder-button" style="width: 110rpx;height: 30rpx; line-height: 10rpx;" bindtap="buy" data-id="{{item.idx}}">
<view style="font-size: 10rpx;">加入购物车</view>
</button>
</view>
</view>
</view>
</view>2、WXSS文件:
/* pages/home/home.wxss */
.lun image {
width: 750rpx;
height: 300rpx;
}
.swiper-container {
margin-bottom: 14rpx;
}
.brand-title {
font-size: 40rpx;
font-weight: 600;
margin: 25rpx 20rpx;
}
.brand-title text {
display: block;
text-align: center;
}
.container {
width: 95%;
display: flex;
margin: auto;
flex-wrap: wrap;
justify-content: space-around;
border-left: 1rpx solid #dddddd;
border-top: 1rpx solid #dddddd;
}
.container-grid {
width: 33%;
border-bottom: 1rpx solid #dddddd;
border-right: 1rpx solid #dddddd;
}
.sort-grid {
text-align: center;
margin-top: 25rpx;
margin-bottom: 25rpx;
font-size: 16rpx;
}
.sort-grid image {
width: 50%;
}
.fashion {
width: 760rpx;
height: 100rpx;
}
.fashion-brand {
display: flex;
flex-wrap: wrap;
margin: 40rpx;
justify-content: space-around;
font-size: 10rpx;
text-align: center;
}
.brand-holder {
margin: 20rpx;
position: relative;
width: 230rpx;
height: 420rpx;
border: 1px solid #dddddd;
}
.holder-src1 {
width: 230rpx;
}
.brand-logo-holder {
width: 52rpx;
height: 28rpx;
position: absolute;
background-color: #fff;
border: 1px solid #dddddd;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.holder-src2 {
position: absolute;
width: 60rpx;
/* height: 20rpx; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.siding text {
display: block;
margin: auto;
width: 200rpx;
font-size: 20rpx;
color: #818181;
}
.siding text {
display: block;
margin: auto;
width: 200rpx;
font-size: 20rpx;
color: #818181;
}
.holder-button {
color: #ec0973;
width: 60rpx;
height: 18rpx;
line-height: 2rpx;
padding: 10rpx 10rpx;
border: 1rpx solid #ec0973;
}
.brand-price {
display: flex;
margin-top: 10%;
margin-left: 5%;
line-height: -1rpx;
}
.brand-holder:hover {
border: 1rpx solid #ec0973;
}
.brand-holder:hover .holder-button {
color: #fff;
background-color: #ec0973;
}3、JS文件
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
grids1: [{
src: "/images/sort/sort-1.png",
text: "恩裳",
idx: 0
},
{
src: "/images/sort/sort-2.png",
text: "音儿",
idx: 1
},
{
src: "/images/sort/sort-3.png",
text: "波司登",
idx: 2
}, {
src: "/images/sort/sort-4.png",
text: "诗篇",
idx: 3
}, {
src: "/images/sort/sort-5.png",
text: "哥弟",
idx: 4
}, {
src: "/images/sort/sort-6.png",
text: "富挺",
idx: 5
}, {
src: "/images/sort/sort-7.png",
text: "罗蒙",
idx: 6
}, {
src: "/images/sort/sort-8.png",
text: "米皇",
idx: 7
}, {
src: "/images/sort/sort-9.png",
text: "天美意",
idx: 8
}
],
grids2: [{
src1: "/images/fashion/fashion-1.png",
src2: "/images/fashion/fashion-icon-1.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 0
}, {
src1: "/images/fashion/fashion-2.png",
src2: "/images/fashion/fashion-icon-2.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 1
}, {
src1: "/images/fashion/fashion-3.png",
src2: "/images/fashion/fashion-icon-3.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 2
}, {
src1: "/images/fashion/fashion-4.png",
src2: "/images/fashion/fashion-icon-4.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 3
}, {
src1: "/images/fashion/fashion-5.png",
src2: "/images/fashion/fashion-icon-5.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 4
}, {
src1: "/images/fashion/fashion-6.png",
src2: "/images/fashion/fashion-icon-6.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 5
}, {
src1: "/images/fashion/fashion-7.png",
src2: "/images/fashion/fashion-icon-7.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 6
}, {
src1: "/images/fashion/fashion-8.png",
src2: "/images/fashion/fashion-icon-8.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 7
}, {
src1: "/images/fashion/fashion-9.png",
src2: "/images/fashion/fashion-icon-9.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 8
}, {
src1: "/images/fashion/fashion-10.png",
src2: "/images/fashion/fashion-icon-10.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 9
}, {
src1: "/images/fashion/fashion-11.png",
src2: "/images/fashion/fashion-icon-11.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 10
}, {
src1: "/images/fashion/fashion-12.png",
src2: "/images/fashion/fashion-icon-12.png",
text1: "对白女装疯抢专场",
text2: "三折封顶",
idx: 11
}],
cart: []
},
// 点击事件
buy(event) {
const grids2 = this.data.grids2;
let id = event.currentTarget.dataset.id;
var app = getApp();
const cartData = app.globalData.cartData;
let nums = 0;
for (let i = 0; i < grids2.length; i++) {
// 在循环过程中操作每个数组项
const item = grids2[i];
if (cartData.length != 0 && id == grids2[i].idx) {
for (let i = 0; i < cartData.length; i++) {
console.log("id:" + id, cartData[i].id);
if (id == cartData[i].id) {
//购物车里面有数据，且选中的商品在购物车中，商品数加一
cartData[i].nums += 1;
break;
}
if (id != cartData[i].id && i == cartData.length - 1) {
//购物车里面有数据，且选中的商品不在购物车中，添加商品
cartData.push({
id: id,
isChecked: false,
nums: nums + 1,
item
})
break;
}
}
} else {
if (id == grids2[i].idx) {
cartData.push({
id: id,
isChecked: false,
nums: nums + 1,
item
}); // 向全局数组中添加新的项
}
}
}
console.log(cartData);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})4、JSON文件:
//注册需要用的的组件
{
"usingComponents": {
"l-button": "/miniprogram_npm/lin-ui/button/index",
"l-icon": "/miniprogram_npm/lin-ui/icon/index",
"l-price": "/miniprogram_npm/lin-ui/price/index",
"l-grid": "/miniprogram_npm/lin-ui/grid/index",
"l-grid-item": "/miniprogram_npm/lin-ui/grid-item/index"
}
}5、补充
同时为了和购物车界面发生数据交互，我在app.js中声明了一个数组，用来传递数据
app.js
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
// userInfo: null,
globalData: {
//声明全局数组，传递数据
cartData: []
}
})二、购物车界面
购物车界面的功能相对来说还是比较好一点的，全选、单选，都有逻辑判断，就是那个件数我用的组件，所以功能只是虚假的并没有改变本地数组里面的值。只是界面自身的渲染，
1、WXML文件
<!--pages/cart/cart.wxml-->
<view class="add">
<!--用 wx:if 进行判断，有商品和没有商品展示不同的界面-->
<view wx:if="{{cart}}" class="add-cart">
<!--购物车为空-->
<image src="/images/my/cart-empty.png" mode="widthFix" />
<view class="add-text">
<text>购物车空空如也，去逛逛吧~~</text>
</view>
</view>
<view wx:if="{{!cart}}">
<!--购物车里面有商品-->
<view style="padding-bottom: 12%;">
<l-checkbox-group>
<l-checkbox key="{{item.id}}" checked="{{item.isChecked}}" wx:for="{{cartData}}" wx:key="id" wx:for-item="item" class="product" bindtap="Single" data-id="{{item.id}}" selected-color="blue">
<image src="{{item.item.src1}}" mode="widthFix" />
<l-counter count="{{item.nums}}" min="1" max="10" />
<l-button type="error" shape="semicircle" width="120" height="60" class="sanchu" bindtap="Delete" data-id="{{item.id}}">删除</l-button>
</l-checkbox>
</l-checkbox-group>
</view>
<view class="settle">
<l-checkbox-group bind:linchange="onChangeTap" class="select">
<l-checkbox key="1" selected-color="blue" checked="{{Checked}}">全选</l-checkbox>
</l-checkbox-group>
<view class="total">
合计：<l-price unit="￥" value="0"></l-price>
</view>
<l-button type="error" shape="semicircle" width="120" height="60">结算</l-button>
</view>
</view>
</view>2、WSXX文件
/* pages/cart/cart.wxss */
page {
background-color: #f5f5f5;
}
.add {
width: 100%;
}
.add-cart {
align-items: center;
}
.add-cart image {
width: 400rpx;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);
}
.add-text {
align-items: center;
width: 65%;
}
.add-text text {
display: block;
font-size: 40rpx;
margin-left: 20%;
transform: translate(25%, -100%);
}
.product {
display: flex;
width: 100%;
margin: 15rpx;
border-radius: 20rpx;
background-color: #ffffff;
}
.product image {
width: 200rpx;
margin-left: 5%;
margin-right: 12%;
}
.sanchu {
margin-left: 3%;
}
.settle {
position: fixed;
width: 100%;
padding: 10rpx;
bottom: 0%;
display: flex;
height: 60rpx;
border-top: 1rpx solid #e8e8e8;
background-color: #ffffff;
}
.select {
height: 60rpx;
line-height: 65rpx;
}
.total {
padding: 10rpx;
margin-left: 20rpx;
width: 400rpx;
}3、JS文件
// pages/cart/cart.js
Page({
/**
* 页面的初始数据
*/
/**
* cartData: [], 用来储存商品数据
* cart: true, 修改展示的内容
* Checked: false 判断商品是否选中
*/
data: {
cartData: [],
cart: true,
Checked: false
},
onChangeTap: function (event) {
// 处理 "linchange" 事件的逻辑代码
var app = getApp();
const cartData = app.globalData.cartData;
//获取加入购物车的数据并赋值给cartData
for (let i = 0; i < cartData.length; i++) {
//循环数组，如果按钮选中就改为取消，未选就改为选中
if (this.data.Checked == false) {
cartData[i].isChecked = true;
} else {
cartData[i].isChecked = false;
}
}
//变成响应式数据
this.setData({
Checked: !this.data.Checked,
cartData: cartData
});
},
Single(event) {
//全选按钮
const id = event.currentTarget.dataset.id;
var app = getApp();
const cartData = app.globalData.cartData;
for (let i = 0; i < cartData.length; i++) {
if (id == cartData[i].id) {
cartData[i].isChecked = !cartData[i].isChecked;
}
if (cartData[i].isChecked == false) {
this.data.Checked = false
}
}
// 判断数组中的所有对象的 isChecked 属性是否全部为 true
const allTrue = cartData.every(item => item.isChecked === true);
// 如果所有对象的 isChecked 属性都为false，则将它们的值改为true
if (allTrue) {
cartData.forEach(item => {
this.data.Checked = true;
});
}
this.setData({
Checked: this.data.Checked,
cartData: cartData
});
},
Delete(event) {
const id = event.currentTarget.dataset.id;
var app = getApp();
const cartData = app.globalData.cartData;
for (let i = 0; i < cartData.length; i++) {
if (id == cartData[i].id) {
cartData.splice(i, 1); // 删除索引为i的元素
break; // 停止遍历，因为已经找到并删除了对应的元素
}
}
this.setData({
cartData: cartData
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
//进入界面的时候进行判断，看看满足不满足全选条件
var app = getApp();
const cartData = app.globalData.cartData;
if (cartData.length === 0) {
this.data.cart = true;
} else {
this.data.cart = false;
}
for (let i = 0; i < cartData.length; i++) {
if (cartData[i].isChecked == false) {
this.data.Checked = false
}
}
this.setData({
cartData,
Checked: this.data.Checked,
cart: this.data.cart
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})4、JSON文件
{
"usingComponents": {
"l-search-bar": "/miniprogram_npm/lin-ui/search-bar/index",
"l-icon": "/miniprogram_npm/lin-ui/icon/index",
"l-index-list": "/miniprogram_npm/lin-ui/index-list/index"
}
}三、分类界面和个人中心界面
这两个界面写的比较简单个人中心界面上没有啥功能，分类上面实现一个功能我还是比较满意的，就是分类商品的展示问题，这个我思考了好一会，想找个组件用但是没有找到，然后就想到了一个办法，就是点击分类的名称时在JS中处理数据，将对应的数据放到一个新的空数组里面，然后进行展示。
分类界面：红框包裹起来的部分循环的是两个不同的数组
代码比较简单，就不展示啦
2489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
