前言

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

一、规划

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

二、步骤

页面就是下图所示这样, 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><view class="pro_index">{{index}}</view></view><view class="box_item_main">  <!-- 商品名 -->{{item.name}}</view><view class="box_item_price"> <!-- 单价 -->{{item.price}}￥</view><view class="box_item_number"> <!-- 购买数量 --><view style="略" type="primary" bindtap="addnum" data-currentnum="{{[item.number, index]}}">+</view><!--由于此处需要传入两个参数, 所以直接传了数组 -->{{item.number}}<view style="略" type="primary" bindtap="cutnum" data-currentnum="{{[item.number, index]}}">-</view></view></view><button class="totalPrice"> <!--总价 -->去结算: {{sum(checkList)}} <!--wxs中的sum方法会返回计算好的总价显示在这里, 有点像组件封装时候computed返回新的样式 --></button>
</view>

然后是js部分, 包含数据和逻辑

// pages/home/home.js
Page({data: {  //商品数据data.checkListcheckList: [{id: 0,name: "商品1",price: 10,number: 0,isChecked: false},{id: 0,name: "商品2",price: 20,number: 0,isChecked: false},{id: 0,name: "商品3",price: 30,number: 0,isChecked: false},{id: 0,name: "商品4",price: 40,number: 0,isChecked: false},]},handleTap(evt) {  //事件处理:勾选var index = evt.target.dataset.index  //获取商品序号this.data.checkList[index].isChecked = !this.data.checkList[index].isChecked;//isChecked已绑定至checked属性, 可切换商品选中状态this.setData({  //更新一下改变后的数据checkList: [...this.data.checkList]})},addnum(evt) {  //事件处理: 增加数量var number = evt.target.dataset.currentnum[0];  //获取当前数量var index = evt.target.dataset.currentnum[1];  //获取商品序号this.data.checkList[index].number = number + 1  //数量+1, 并更新data.checkListthis.setData({  //更新一下改变后的数据checkList: [...this.data.checkList]})},cutnum(evt) {  //事件处理: 减少数量var number = evt.target.dataset.currentnum[0];var index = evt.target.dataset.currentnum[1];if (number != 0) {   //防止改成负数翻车this.data.checkList[index].number = number - 1}this.setData({checkList: [...this.data.checkList]})},
})

效果

总结

可能是还没有掌握到更好的方法吧, 做起来让我感到不好的一点就是…额
有点麻烦的一点就是不能跳过setData()改数据, 因为直接用表达式改完, 页面上的数据并不会变. 但setData本身似乎不支持精确到复杂数据类型内部的修改.
然后做起来的时候就有点难受了, 在外面改完数据, 为了数据能响应式, 还要再用setData假装改一下数据来让它把新数据更新上去(参考本篇).
或许以后会发现更好的解决方法?

微信小程序实现购物车结算相关推荐

微信小程序 - 实现购物车结算
示例源码下载:小程序-实现购物车结算
微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...
[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
微信小程序商城购物车页二维数组怎么做
微信小程序购物车二维数组不同商家不同商品版本需求:电商平台内有众多不同商家,购物车页需要购买的产品以商家的类目作为分类,并满足基本的购物车需求: http://www.kundonghui.co ...
微信小程序之购物车 —— 微信小程序实战商城系列（5）
续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城系列(4) 自从认识某人后,我收获了两个成功.登录成功.付款成功,而且还拥有了自己的一辆车: 购物车也发现了自己的不足之处: 余额不 ...
微信小程序实现购物车功能
在我的GitHub上有校园二手交易微信小程序的源码,这里面包含了购物车的功能,GitHub地址:https://github.com/zhuyuzhu/Secondhand-goods-on-camp ...
微信小程序之购物车功能
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消, ...

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

文章目录

前言

一、规划

二、步骤

效果

总结

微信小程序实现购物车结算相关推荐

最新文章

热门文章

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

文章目录

前言

一、规划

二、步骤

效果

总结

微信小程序 实现购物车结算相关推荐

最新文章

热门文章

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

微信小程序实现购物车结算相关推荐