---

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

—

---

---

⭐前言⭐

  在这个数字化飞速发展的时代，购物方式也在不断变革与创新。微信小程序商城应运而生，为您打造一个全新的购物体验。
  我们深知，您的时间宝贵，每一分每一秒都应花在有价值的事情上。因此，我们精心构建了这个便捷、高效的微信小程序商城，让您无需繁琐的下载和安装，轻轻一点，即可开启精彩的购物之旅。
  在这里，您将发现丰富多样的商品，从时尚潮流的服饰到精致实用的家居用品，从美味可口的食品到高科技的电子产品，应有尽有，满足您的各种需求。
  我们秉持着品质至上的原则，严格筛选每一款商品，确保您买到的都是优质、可靠的产品。同时，我们还提供贴心的客户服务，随时为您解答疑问，解决问题，让您购物无忧。
  微信小程序商城，不仅是一个购物平台，更是您生活中的贴心伙伴。让我们一起，在这个数字商城中，探索更多美好！

---

一、产品购物车功能的实现

---

  在我们的微信小程序商城百货区，“添加购物车”是您购物之旅中至关重要的一步。它就像一个魔法按钮，轻轻一点，便能将您心仪的商品暂时珍藏。
  当您遇到那件让您心动不已的时尚服饰，或是那款能提升生活品质的精致家居用品，别犹豫，点击添加购物车。这不仅仅是一个操作，更是您对美好生活的点滴积累。
  购物车是您的私人宝藏库，让您可以随心挑选，慢慢规划，确保每一次购物都是满足与欢喜的交织。

（1）cart.wxml

<view class="cart"><view class="list" wx:for="{{ cartData }}" wx:key="index"><van-swipe-cell right-width="{{ 65 }}"><van-card price="{{ item.price }}" title="{{ item.title }}" thumb="{{ item.image }}" /><view data-id="{{ item.id }}" bindtap="delCartHandle" slot="right" class="van-swipe-cell-right">删除</view></van-swipe-cell></view>
</view>

（2）cart.wxss

定义一个for循环访问数组：

.list{margin: 5px;
}
.van-swipe-cell-right{height: 100%;width: 60px;background-color: #f00;text-align: center;color: #fff;font-size: 16px;font-weight: 700;padding-top: 40px;
}

（3）cart.js

const { getCart,delGoodsCart } = require("../../api/index.js")Page({/*** 页面的初始数据*/data: {cartData:[]},/*** 每次打开页面，都会执行*/onShow(){this.http()},// 根源delCartHandle(e){console.log(e.currentTarget.dataset.id);/*** 这里有两个ID*  1. currentID:商品ID（同一个商品，加入购物车多次的时候，会一次性全删除）*  2. id:每条数据的唯一索引(推荐)课程中选择的方式*/delGoodsCart({currentID:e.currentTarget.dataset.id}).then(res =>{if(res.data.status === 200){wx.showToast({title: '删除成功',})this.http()}else{wx.showToast({title: '删除失败',})}})},http(){getCart().then(res =>{console.log(res.data.data);this.setData({cartData:res.data.data})})}
})

（4）cart.json

{"usingComponents": {"van-swipe-cell": "@vant/weapp/swipe-cell/index","van-cell": "@vant/weapp/cell/index","van-card": "@vant/weapp/card/index"}
}

运行结果的显示：

---

二、个人中心的编写

---

  当您踏入微信小程序商城百货的个人中心，就仿佛走进了一个为您量身定制的世界。
  这是一个汇聚您所有购物足迹和需求的地方。您可以在这里一  目了然地查看您的订单详情，追踪商品的送达情况，感受每一次期待变为现实的喜悦。
  个人中心是您与商城深度互动的桥梁，您的积分、优惠券、收藏的宝贝都整齐排列，等待您的再次光顾。同时，您还能在这里修改个人信息，确保我们为您提供更精准、更贴心的服务。
让我们一起在这个个人中心，书写属于您的独特购物篇章。

(1)user.wxml

<view class="user-container"><view class="header"><view wx:if="{{ userInfo.nickName }}"><image mode="widthFix" src="{{ userInfo.avatarUrl }}"></image><text>{{ userInfo.nickName }}</text></view><view wx:else><button type="primary" bindtap="getUserProfile">登录</button></view></view><view class="service"><van-grid column-num="3"><van-grid-item url="/pages/search/search" icon-color="{{ item.color }}" wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}" text="{{ item.text }}" /></van-grid></view>
</view>

(2)user.wxss

.header{padding: 20px;overflow: hidden;clear: both;background-color: #fff;
}.header image{width: 70px;border-radius: 50%;float: left;
}.header text{float: left;font-size: 15px;color: #333;margin-top: 25px;margin-left: 10px;
}.service{margin-top: 10px;
}

(3)user.js

const { getLogin } = require("../../api/index.js")Page({data: {userInfo: {},list:[{text:"前端",icon:"like",color:"#ff0000"},{text:"Python",icon:"star",color:"#2a83fe"},{text:"Java",icon:"fire",color:"#fd6012"},{text:"大数据",icon:"gem",color:"#fd4d72"},{text:"人工智能",icon:"gift",color:"#00b478"},{text:"算法u",icon:"shop",color:"#fe391f"}]},onLoad(options) {// 验证用户登录信息的状态是否处于有效期：增加一个接口，然后测试有效期if(wx.getStorageSync('userInfo')){this.setData({userInfo:wx.getStorageSync('userInfo')})}},getUserProfile() {wx.getUserProfile({desc: "展示用户信息",success: res => {this.setData({userInfo:res.userInfo})this.loginHandle()wx.setStorageSync('userInfo', res.userInfo)},fail(err) {console.log(err);},complete() {console.log("获取完成");}})},loginHandle(){wx.login({success(response){// code:在发送给接口/*** 如果大家使用此登录接口，使用外网服务器的情况下，必须使用我的AppID* 如果大家使用此登录接口，使用自己的服务器的情况下，需要修改服务器*/getLogin({code:response.code}).then(res =>{wx.setStorageSync('loginID', res.data.data)})},fail(err){console.log(err);}})}
})

(4)user.json

{"usingComponents": {"van-grid": "@vant/weapp/grid/index","van-grid-item": "@vant/weapp/grid-item/index"}
}

运行结果的显示：

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖