微信小程序作品实例

目录

简介

作品详情

作品代码

一、主页界面

1、WXML文件:

2、WXSS文件:

3、JS文件

4、JSON文件:

5、补充 

二、购物车界面

 1、WXML文件

 3、JS文件

 4、JSON文件

三、分类界面和个人中心界面

简介

        这是我在学习完微信小程序后，写的一个小案例，是一个关于女性商品的，数据也是自己通过数组写的死数据。这是学习完vue之后才学习的，感觉和vue很像，导致我自己的懒癌犯了，学不进去了，就大致了解之后就上手了，因为写的比较简单，部分我感觉重复的功能也没有写。所有整体来说写的还是比较顺利。

作品详情

        这个作品我写了四个页面，分别是首页、分类、购物车、个人中心。其中主页和个人中心页面的功能，相对其它两个页面来说更多一点。

        在作品中我使用了一个插件库Lin UI，但是我感觉功能一般，所有大家可以使用其他的

微信小程序插件库

作品代码

一、主页界面

1、WXML文件:

品牌推荐


{{item.text}}



2023新款优雅打揽千鸟格舒适显瘦百搭女装{{item.text2}}加入购物车

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文件

购物车空空如也，去逛逛吧~~删除全选合计：结算

 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;//获取加入购物车的数据并赋值给cartDatafor (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 属性是否全部为 trueconst allTrue = cartData.every(item => item.isChecked === true);// 如果所有对象的 isChecked 属性都为false，则将它们的值改为trueif (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中处理数据，将对应的数据放到一个新的空数组里面，然后进行展示。

        分类界面：红框包裹起来的部分循环的是两个不同的数组

 代码比较简单，就不展示啦

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！