微信小程序 数量增减 在微信小程序中，做购物车功能的部分的时候，涉及到商品的增加和减少功能，一般来说这部分的功能主要就是事件，当点击“-”时，绑定了一个将数字减少的函数，当减少到1时就不再减少，当点击“+”号时，绑定了将数字增加的功能，我先初步设计一个，首先就是在data中定义一个num变量：data: { num:0 },之后在wxml页面设计一个加减的框，中间的数字绑定了num，并且简单设计了一下这样的界面<!-- wxml --> <view class="myview"> <text>-</text> <text>{{num}}</text> <text>+</text> </view>/* wxss */ .myview{ font-size: 50rpx; display: flex; flex-direction: row; text-align: center; justify-content: space-around; border: 1rpx solid black; border-radius:30rpx }目前来说是没有绑定加减的事件的，接着我们设计一下加减的功能，在“-”号绑定一个decrease的函数，在“+”绑定一个increase的函数，那么wxml中的代码就会是这样了： <!-- wxml --> <view class="myview"> <text bindtap="decrease">-</text> <text>{{num}}</text> <text bindtap="increase">+</text> </view>之后在js文件中添加这两个函数的具体实现，其中减的时候如果当前为1，那么久不能继续减了：decrease:function(e){ if(this.data.num == 1){ wx.showToast({ title: '不能再减了~', icon:'none' }) return ; } var Num = this.data.num - 1; this.setData({ num: Num }) }, increase:function(e){ var Num = this.data.num + 1; this.setData({ num: Num }) }到此，就已经实现了想要的功能，之后就是将一个这样的功能扩展为多个功能了，不做过多介绍，直接给代码，代码如下:js文件：//index.js Page({ data: { num:[ 1, 1, 1, 1, 1 ], total:0 }, onLoad: function (options) { this.getTotal() }, decrease:function(e){ var index = e.currentTarget.dataset.index; console.log(e) if(this.data.num[index] == 1){ wx.showToast({ title: '不能再减了~', icon:'none' }) return ; } var Num = this.data.num; Num[index] --; this.setData({ num: Num }) this.getTotal(); }, increase:function(e){ var index = e.currentTarget.dataset.index; var Num = this.data.num; Num[index]++; this.setData({ num: Num }) this.getTotal(); }, getTotal:function(){ var temp_num = 0; for(var i = 0; i < this.data.num.length; i++){ temp_num += this.data.num[i] } this.setData({ total:temp_num }) } })wxml文件：<!-- wxml --> <view wx:for="{{num}}" wx:key="index"> <view class="myview"> <text bindtap="decrease" data-index="{{index}}">-</text> <text>{{item}}</text> <text bindtap="increase" data-index="{{index}}">+</text> </view> </view> <view style="margin-top:50rpx; text-align:center; font-size:50rpx"> <text>总和：{{total}}</text> </view>wxss文件：/* wxss */ .myview{ margin-top: 20rpx; font-size: 50rpx; display: flex; flex-direction: row; text-align: center; justify-content: space-around; border: 1rpx solid black; border-radius:30rpx }

微信小程序之购物车功能 前言以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。需求先来弄清楚购物车的需求。单选、全选和取消，而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品。当购物车为空时，页面会变为空购物车的布局根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id)然后左下角的全选，需要一个字段(selectAllStatus)表示是否全选了右下角的总价(totalPrice)最后需要知道购物车是否为空(hasList)知道了需要这些数据，在页面初始化的时候我们先定义好这些。代码实现初始化Page({ data: { carts:[], // 购物车列表 hasList:false, // 列表是否有数据 totalPrice:0, // 总价，初始为0 selectAllStatus:true // 全选状态，默认全选 }, onShow() { this.setData({ hasList: true, // 既然有数据了，那设为true吧 carts:[ {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true}, {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true} ] }); }, })购物车列表数据我们一般是通过请求服务器拿到的数据，所以我们放在生命周期函数里给 carts 赋值。想到每次进到购物车都要获取购物车的最新状态，而onLoad和onReady只在初始化的时候执行一次，所以我需要把请求放在 onShow 函数里。(这里先拿点假数据冒充一下吧)布局 wxml修好之前写好的静态页面，绑定数据。 <view class="cart-box"> <!-- wx:for 渲染购物车列表 --> <view wx:for="{{carts}}"> <!-- wx:if 是否选择显示不同图标 --> <icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" /> <icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/> <!-- 点击商品图片可跳转到商品详情 --> <navigator url="../details/details?id={{item.id}}"> <image class="cart-thumb" src="{{item.image}}"></image> </navigator> <text>{{item.title}}</text> <text>￥{{item.price}}</text> <!-- 增加减少数量按钮 --> <view> <text bindtap="minusCount" data-index="{{index}}">-</text> <text>{{item.num}}</text> <text bindtap="addCount" data-index="{{index}}">+</text> </view> <!-- 删除按钮 --> <text bindtap="deleteList" data-index="{{index}}"> × </text> </view> </view> <!-- 底部操作栏 --> <view> <!-- wx:if 是否全选显示不同图标 --> <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" bindtap="selectAll"/> <icon wx:else type="circle" color="#fff" bindtap="selectAll"/> <text>全选</text> <!-- 总价 --> <text>￥{{totalPrice}}</text> </view>计算总价总价 = 选中的商品1的 价格 数量 + 选中的商品2的 价格 数量 + ...根据公式，可以得到getTotalPrice() { let carts = this.data.carts; // 获取购物车列表 let total = 0; for(let i = 0; i<carts.length; i++) { // 循环列表得到每个数据 if(carts[i].selected) { // 判断选中才会计算价格 total += carts[i].num * carts[i].price; // 所有价格加起来 } } this.setData({ // 最后赋值到data中渲染到页面 carts: carts, totalPrice: total.toFixed(2) }); }页面中的其他操作会导致总价格变化的都需要调用该方法。选择事件点击时选中，再点击又变成没选中状态，其实就是改变 selected 字段。通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件。selectList(e) { const index = e.currentTarget.dataset.index; // 获取data- 传进来的index let carts = this.data.carts; // 获取购物车列表 const selected = carts[index].selected; // 获取当前商品的选中状态 carts[index].selected = !selected; // 改变状态 this.setData({ carts: carts }); this.getTotalPrice(); // 重新获取总价 }全选事件全选就是根据全选状态 selectAllStatus 去改变每个商品的 selectedselectAll(e) { let selectAllStatus = this.data.selectAllStatus; // 是否全选状态 selectAllStatus = !selectAllStatus; let carts = this.data.carts; for (let i = 0; i < carts.length; i++) { carts[i].selected = selectAllStatus; // 改变所有商品状态 } this.setData({ selectAllStatus: selectAllStatus, carts: carts }); this.getTotalPrice(); // 重新获取总价 }增减数量点击+号，num加1，点击-号，如果num > 1，则减1// 增加数量 addCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; num = num + 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); }, // 减少数量 minusCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; if(num <= 1){ return false; } num = num - 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); }删除商品点击删除按钮则从购物车列表中删除当前元素，删除之后如果购物车为空，改变购物车为空标识hasList为falsedeleteList(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; carts.splice(index,1); // 删除购物车列表里这个商品 this.setData({ carts: carts }); if(!carts.length){ // 如果购物车为空 this.setData({ hasList: false // 修改标识为false，显示购物车为空页面 }); }else{ // 如果不为空 this.getTotalPrice(); // 重新计算总价格 } }总结虽然一个购物车功能比较简单，但是里面涉及到微信小程序的知识点还是比较多的，适合新手练习掌握。完整的小程序商城demo含购物车，请戳：wxapp-mall

微信小程序过滤器（限制文字字数） utils/filter.wxs//局部组件过滤器 var abbreviationEight = function (value) { //实现文字只显示8个字符 if (value.length > 8) { return value.slice(0, 8) + '...' } else { return value } } module.exports = { abbreviation: abbreviation, }wxml:<!-- 引入过滤器 --> <wxs src="../../utils/filter.wxs" module="filter" /> <!--使用过滤器--> <text>{{filter.abbreviationEight(item.value)}}</text>

小程序一键保存图片 Wxml<view bindtap="saveImage">下载</view>jssaveImage(){ wx.showModal({ title: '提示', content: '确定要保存到相册？', success(res){ if(res.confirm){ wx.downloadFile({ url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2733402052,2443269891&fm=26&gp=0.jpg', success(res) { console.log(res) wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(ress) { wx.showToast({ title: '保存成功', }) } }) },fail(res){ console.log(res) wx.showToast({ title: '保存失败', icon: 'none' }) } }) } } }) },

微信小程序——template详细使用 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用减少冗余代码。1.1定义模板1.1.1、创建模板文件夹1.1.2、使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：<!-- 使用 name 属性，作为模板的名字 --> <template name="personCourseItemTmp"> <!-- 显示 --> <view wx:if="{{mentor_image_uri==null}}"> <!-- 默认图片地址 --> <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image> </view> <view wx:else> <image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image> </view> <view class='info'><span>姓名：</span>{{mentor_name}}</view> <view class='info'><span>职位：</span>{{career}}</view> <view class='info'><span>公司：</span>{{company_name}}</view> <view class='info'><span>地区：</span>{{address}}</view> <view class='info'><span>擅长：</span>{{mentor_skills}}</view> <navigator>详情</navigator> <view class='hr'></view> </template>.name { text-align: center; } .widget_arrow { margin-top: 20px; height: 200px; width: 200px; margin-left: 25%; } .info { font-size: 14px; width: 370rpx; margin: auto; margin-top: 10px; } .info span{ font-weight: 600; } .info_border { height: 200px; width: 200px; border: 8px solid red; } navigator { margin: 0 auto; height: 40px; width: 90%; margin-top: 20px; margin-bottom: 20px; background-color: green; line-height: 40px; text-align: center; } .hr { height: 0; width: 100%; border: 1px solid green; }1.2、使用模板1.2.1、创建index81.2.2、在需要使用的页面使用import导入该wxml页面，注意路径位置<!-- 引入模块 --> <import src="../index7/index.wxml" /> <block wx:for="{{message}}" wx:key="id"> <template is="personCourseItemTmp" data="{{...item}}"></template> </block>1.2.3、在index8的wxss引入index7的样式@import "../index7/index.wxss" 1.2.4、在index8的js动态写入数据data: { message:[ { mentor_image_uri:"../../image/timg3.jpg", mentor_name:"lhs", career: "程序员", company_name:"aft", address:"珠海", "mentor_skills":"微信小程序" }, { mentor_image_uri: "../../image/timg.jpg", mentor_name: "lwx", career: "美工", company_name: "aft", address: "珠海", "mentor_skills": "PS" } ] },运行结果：1.2.5、如果只想显示其中的一条数据，修改代码如下：<!-- 引入模块 --> <import src="../index7/index.wxml" /> <block wx:for="{{message}}" wx:key="id"> <!-- index是下标 --> <template wx:if="{{index==0}}" is="personCourseItemTmp" data="{{...item}}"></template> </block>1.3、is 属性的使用1.3.1、在index7定义两个模板(tem_2和tem_3)；<!-- 动态数据 --> <template name="tem_2"> <!-- 显示 --> <view wx:if="{{mentor_image_uri==null}}"> <!-- 默认图片地址 --> <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image> </view> <view wx:else> <image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image> </view> <view class='info'><span>姓名：</span>{{mentor_name}}</view> <view class='info'><span>职位：</span>{{career}}</view> <view class='info'><span>公司：</span>{{company_name}}</view> <view class='info'><span>地区：</span>{{address}}</view> <view class='info'><span>擅长：</span>{{mentor_skills}}</view> <navigator>详情</navigator> <view class='hr'></view> </template> <!-- 默认，不动态写入数据--> <template name="tem_3"> <!-- 显示 --> <view wx:if="{{mentor_image_uri==null}}"> <!-- 默认图片地址 --> <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image> </view> <view wx:else> <image class="widget_arrow" src="../../image/timg.jpg" mode="aspectFill"></image> </view> <view class='info'><span>姓名：</span>lcy</view> <view class='info'><span>职位：</span>程序员</view> <view class='info'><span>公司：</span>未知</view> <view class='info'><span>地区：</span>珠海</view> <view class='info'><span>擅长：</span>爱笑</view> <navigator>详情</navigator> <view class='hr'></view> </template>1.3.2、在index8使用模板；这里使用is 属性声明需要的使用的模板，另外is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板<!-- 引入模块 --> <import src="../index7/index.wxml" /> <!-- is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板 --> <block wx:for="{{message2}}"> <!-- 1==1是true，所以使用tem_2模板 --> <template is="{{1 == 1 ? 'tem_2' : 'tem_3'}}" data="{{...item}}"/> </block>1.3.3、在index8.js动态写入数据data: { message2:[ { mentor_image_uri: "../../image/timg2.jpg", mentor_name: "ljq", career: "护士", company_name: "中山远大医院", address: "中山市", "mentor_skills": "爱看书" } ] },结果如下：总结在一个项目中需要在多处页面使用类似的模块，就需要创建模板—-减少代码量，同时代码高度复用；在同一个WXML文件中创建多个类似的模板用name属性来区别；模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量；使用 import 引入模板 WXML 和 WXSS ；通过template 标签使用模板，template 标签的 is 属性与模板的 name 属性对应，data 属性代表传入模板的数据。来源：博客园