微信小程序实现购物车结算

最新推荐文章于 2024-04-26 21:59:34 发布

白瑕

最新推荐文章于 2024-04-26 21:59:34 发布

阅读量4.7k

点赞数 10

分类专栏：小程序文章标签：微信小程序前端

本文链接：https://blog.csdn.net/qq_52697994/article/details/125124475

版权

文章目录

前言
一、规划
二、步骤
效果
总结

前言

做个小例子, 看看在微信小程序里如何实现这个功能.
主要是记个思路.

一、规划

要加进购物车的商品数据要从服务器请求, 这里写死了, 但还是假装请求一下.
商品结算页面要允许增减单品数量;
总价要以每种的数量为基础, 配合每种的单价来计算.
价格要实时更新在结算按钮处.

二、步骤

页面就是下图所示这样, WXML里因为也有逻辑, 所以看一下…
样式…样式就不写了吧(doge) …
在这里插入图片描述
wxs是个挺新鲜的名词, 我对它理解不深刻, 微信开放社区里的使用方法我参考了一些, 给我的感觉就是…
有点像vue的computed, 在里面做一些数据处理之类和业务关系不太大的事, 然后看课的时候那意思就是js文件里可以放一些事件处理函数, 数据之类, 但是这种冗杂的计算不建议放在js里, 可能会导致代码的结构比较糟糕.
另外
"每一个 wxs 文件和 <wxs> 标签都是一个单独的模块。` 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

使用方面的话就像原生js里那样, src引入, 或者直接在<wxs>和</wxs>标签之间写.

<!-- 这里因为wxs部分不是很长, 直接放过来了 sum模块, 负责运算总价. -->
<wxs module="sum">
  function sum(checkList) {
    var total = 0;
    for (var i = 0; i < checkList.length; i++) {
      if (checkList[i].isChecked) {
        total += checkList[i].number * checkList[i].price
      }
    }
    return total
  }

  module.exports = sum
</wxs>

<view class="box">
  <view 
    wx:for="{
    {checkList}}" 
    wx:key="index" 
    class="box_item"
  > <!-- 遍历生成单条商品 -->
    <view class="box_item_index"> <!-- 勾选 && 序号 -->
      <checkbox 
        checked="{
    {item.isChecked}}" 
        bindtap="handleTap" 
        data-index="{
    {index}}"
      >
      </checkbox