目录
前言
购物车交互场景
说明：
浏览效果：
说明2：
shouye.wxml:
shouye.wxss:
shouye.js:
代码讲解：
我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于微信小程序专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~
前言
JavaScript是小程序编程中的基础语言，JavaScript代码大约占整个小程序项目一半的代码量。全局文件app.js和所有的页面js文件都是由JavaScript来编写的，JavaScript代码主要实现业务逻辑处理和用户交互两方面的作用。
购物车交互场景
说明：
尽管张小龙在2018微信公开课上指出，“小程序不是专门为电商准备的”，但是由于强大的社交属性和微信支付的便捷性，电商成为小程序的重要应用场景。电商小程序中经常要用到购物车是JavaScript在小程序交互场景中的经典应用。
浏览效果：
说明2：
由于我们本次案例的重点是逻辑时间的编写，所有页面的样式略有粗糙！
shouye.wxml:
代码语言：javascript复制<view class="title">案例：</view>
<view class="goods-box">
<!-- 商品展示 -->
<view class="q1">
<image src="../../images/qqq.jpg"></image>
</view>
<view class="carts-cion">
<view class="q2">
<!-- 购物车图标 -->
<van-icon name="shopping-cart-o"size="30px" />
<!-- 加入购物车导航 -->
<view class="operation">
<text class="operation-jian" bindtap="jianCount">-</text>
<text class="operation-num">数量{{num}}</text>
<text class="operation-jia" bindtap="jiaCount"> </text>
<text bindtap="addCart">加入购物车</text>
</view>
</view>
<!-- 加入购物车 -->
<text class="carts-num" wx:if="{{hasCart}}">购物车已有：{{totalNum}}</text>
</view>
</view>shouye.wxss:
代码语言：javascript复制.q1{
display: flex;
flex-direction: row;
justify-content: space-around;
}
image{
width: 500rpx;
height: 350rpx;
border-radius: 30rpx;
}
.q2{
border-radius: 30rpx;
height: 100rpx;
background-color: tomato;
margin: 30rpx 20% 0 20%;
display: flex;
flex-direction: row;
justify-content: space-around;
}shouye.js:
代码语言：javascript复制// pages/shouye/shouye.js
Page({
/**
* 页面的初始数据
*/
data: {
num:1,
totalNum:0,
hasCart:false,
},
jiaCount:function(){
var num = this.data.num;
num ;
this.setData({
num:num
})
},
jianCount:function(){
var num = this.data.num;
num--;
this.setData({
num:num
})
},
addCart:function(){
const num = this.data.num;
var total = this.data.totalNum;
this.setData({
hasCart:true,
totalNum:num total
})
wx.showToast({
title:"加入购物车成功！",
duration:3000,
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})代码讲解：
shouye.wxml文件中" "和"-"和"加入购物车"三个按钮绑定了点击事件。在shouye.js文件中为" "按钮定义了事件函数jiaCount（），用于实现当用户点击" "按钮时商品数量加1.为"-"按钮定义了事件函数jianCount（）用于实现当用户点击"-"按钮时商品数量减1.为"加入购物车"按钮定义了事件函数addCart（），用于实现当用户点击"加入购物车"时，一次性向购物车添加num件商品。当用户由加购物车行为，及点击了"加入购物车"按钮时，hasCart被赋值为true，则在购物车图标下方出现"购物车已有{{数量}}"
