微信小程序开发实战：立即购买页面

微信小程序开发实战：立即购买页面

5.6 立即购买页面开发

学习目标

1. 掌握购物车到订单页面的跳转流程
2. 学会复杂页面布局的实现方法
3. 理解本地缓存数据的读取与应用
4. 掌握动态数据绑定技术

实现效果

页面结构设计（WXML）

在本节中，我们将学习如何使用WXML构建复杂的订单页面结构。重点是掌握模块化布局方法和数据绑定语法。

<view class="container">
  <!-- 地址模块 -->
  <view class="address-block">
    <view class="contact">
      {{user.name}} {{user.phone}}
      <text class="tag">[默认]</text>
    </view>
    <view class="address-detail">
      {{user.address}}
    </view>
  </view>

  <!-- 商品信息模块 -->
  <view class="goods-block">
    <image class="goods-img" src="{{goods.imageUrl}}"></image>
    <view class="goods-info">
      <text class="title">{{goods.name}}</text>
      <text class="spec">数量：{{goods.quantity}}件</text>
    </view>
  </view>

  <!-- 支付信息模块 -->
  <view class="payment-block">
    <view class="item">
      <text>商品总额</text>
      <text>¥{{goods.price}}</text>
    </view>
    <!-- 其他支付项... -->
  </view>
</view>

关键知识点总结：

1. 使用<view>组件构建模块化布局
2. {{}}语法实现数据动态绑定
3. 通过class命名实现样式隔离
4. 嵌套结构保持代码可维护性

样式设计规范（WXSS）

接下来，我们将学习如何使用WXSS为页面添加样式。重点是掌握rpx单位的使用、flex布局的实现以及样式隔离的方法。

/* 地址模块样式 */
.address-block {
  padding: 20rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.contact {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 15rpx;
}

/* 商品图片尺寸控制 */
.goods-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
}

/* 支付信息对齐方式 */
.payment-block .item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

样式设计原则：

1. 采用rpx单位保持多端适配
2. 使用flex布局实现复杂排列
3. 通过margin/padding控制间距节奏
4. 重要数据使用强调色（如红色系）

业务逻辑实现（JS）

在本节中，我们将学习如何使用JavaScript实现页面的业务逻辑。重点是掌握页面生命周期函数的使用、本地缓存数据的读取以及数据驱动视图更新的原理。

Page({
  data: {
    goods: {},   // 商品数据容器
    user: {}     // 用户信息容器
  },

  onLoad(options) {
    // 从路由参数获取商品ID
    const goodsId = options.id
    
    // 从缓存读取商品数据
    const localData = wx.getStorageSync('goods') || []
    
    // 数据匹配与过滤
    const targetGoods = localData.find(item => item.id === goodsId)
    
    // 更新页面数据
    if(targetGoods) {
      this.setData({
        goods: targetGoods,
        user: getApp().globalData.userInfo
      })
    }
  }
})

逻辑重点说明：

1. 页面生命周期函数onLoad的使用
2. 本地缓存读取的同步方法
3. 数据查找的数组方法应用
4. 数据驱动视图更新的原理

数据绑定实践

在本节中，我们将学习如何在微信小程序中实现数据绑定。重点是掌握表达式计算、条件渲染等高级用法。

<!-- 动态数据绑定示例 -->
<view class="price-display">
  实付金额：<text class="highlight">¥{{goods.price * goods.quantity}}</text>
</view>

<!-- 条件渲染示例 -->
<view wx:if="{{goods.isSelfSupport}}">
  <image src="/images/self-support.png"></image>
</view>

进阶技巧：

1. 表达式计算：直接在绑定语法中进行数学运算
2. 条件渲染：wx:if控制元素显示状态
3. 列表渲染：wx:for实现多商品展示
4. 事件绑定：@tap处理用户交互

常见问题排查

1. 数据未更新检查点：

   • 是否正确调用setData方法
   • 数据路径是否正确
   • 控制台是否有报错信息

2. 样式异常处理：

   • 检查选择器命名冲突
   • 确认单位使用一致性
   • 审查元素盒模型

3. 缓存读取失败处理：

   • 检查Storage键名是否一致
   • 确认数据序列化方式
   • 处理空数据兜底方案

本章小结

动手练习

1. 尝试在订单页面添加优惠券选择功能
2. 实现地址信息的编辑跳转功能
3. 扩展支付方式选择模块（增加支付宝支付）
4. 添加网络异常时的数据重试机制