微信小程序学习（二）

WXML 与 WXSS 基础https://blog.csdn.net/qq_38060125/article/details/149577716

📝 练习任务

1. 创建一个商品列表页面，使用 wx:for 渲染商品名称与价格
2. 添加一个"加入购物车"按钮，点击后将商品添加到 data 中的购物车数组
3. 实现点击删除商品功能
4. 使用 wx:if 控制当购物车为空时显示"购物车为空"

🔁 拓展建议

• 尝试使用 hidden 属性实现与 wx:if 类似的显示控制，理解两者区别（wx:if 不渲染 DOM，hidden 通过样式控制）
• 使用 setData 修改数据，观察页面是否自动更新
• 尝试使用 wx:for 嵌套结构实现更复杂的页面布局（如分类商品列表）

做法：

1.修改页面：

主要是保留了原本的，只是替换了文字和绑定的函数。然后增加了购物车。暂且不做美化。

<view wx:for="{{cart}}" wx:key="id" wx:for-index="idx">
  <view>
    <text>{{item.name}} - {{item.price}}元</text>
    <button bind:tap="addItem" data-index="{{idx}}">加入购物车</button>
  </view>
</view>

<view>
  <text>购物车</text>
  <!-- 使用 wx:if 判断购物车是否为空 -->
  <view wx:if="{{shoppingcart.length === 0}}">
    <text>购物车为空</text>
  </view>
  <view wx:else>
    <view wx:for="{{shoppingcart}}" wx:key="id" wx:for-index="idx">
      <text>{{item.name}} - {{item.price}}元</text>
      <button bind:tap="removeItem" data-index="{{idx}}">移除购物车</button>
    </view>
  </view>
</view>

效果如图：

2.修改逻辑部分：

Page({
  data: {
    cart: [
      { id: 1, name: '奥特曼', price: 99 },
      { id: 2, name: '铠甲勇士', price: 50 },
      { id: 3, name: '假面骑士', price: 44 }
    ],
    shoppingcart:[]
  },
  removeItem(e) {
    const index = e.currentTarget.dataset.index; // 获取点击商品的索引
    const newShoppingCart = this.data.shoppingcart.filter((_, i) => i !== index); // 根据索引过滤商品
    this.setData({ shoppingcart: newShoppingCart }); // 更新购物车数据
    console.log('移除后的购物车:', newShoppingCart);
  },
  addItem(e)
  {
    const index = e.currentTarget.dataset.index; // 获取当前点击的商品索引
    const selectedItem = this.data.cart[index]; // 根据索引取出商品
    const shoppingcart = this.data.shoppingcart;
    shoppingcart.push(selectedItem); 
    this.setData({
      shoppingcart // 更新购物车数据
    });
    console.log('商品已加入购物车:', selectedItem);
  }
})

效果：

可以正常的增加和删除。

拓展：

使用 hidden 替代 wx:if 控制购物车状态显示

原理对比：

• wx:if ：
  • 元素被销毁和重新渲染。
  • 性能更高，适用于页面内容切换不频繁的场景。
• hidden ：
  • 元素通过样式 display: none 隐藏，但不会被销毁。
  • 性能更差，但适用于页面内容切换频繁的场景。

使用 hidden 替代 wx:if：

<!-- 使用 hidden 属性 -->
<view>
  <text hidden="{{shoppingcart.length > 0}}">购物车为空</text>
  <view hidden="{{shoppingcart.length === 0}}">
    <view wx:for="{{shoppingcart}}" wx:key="id" wx:for-index="idx">
      <text>{{item.name}} - ￥{{item.price}}</text>
      <button bindtap="removeItem" data-index="{{idx}}">移除</button>
    </view>
  </view>
</view>