前言
JavaScript是小程序编程中的基础语言，JavaScript代码大约占整个小程序项目一半的代码量。全局文件app.js和所有的页面js文件都是由JavaScript来编写的，JavaScript代码主要实现业务逻辑处理和用户交互两方面的作用。
购物车交互场景
说明：
尽管张小龙在2018微信公开课上指出，“小程序不是专门为电商准备的”，但是由于强大的社交属性和微信支付的便捷性，电商成为小程序的重要应用场景。电商小程序中经常要用到购物车是JavaScript在小程序交互场景中的经典应用。
说明2：
由于我们本次案例的重点是逻辑时间的编写，所有页面的样式略有粗糙！
shouye.wxml:
<viewclass="title">案例：</view><viewclass="goods-box"><!-- 商品展示 --><viewclass="q1"><imagesrc="../../images/qqq.jpg"></image></view><viewclass="carts-cion"><viewclass="q2"><!-- 购物车图标 --><van-iconname="shopping-cart-o"size="30px"/><!-- 加入购物车导航 --><viewclass="operation"><textclass="operation-jian"bindtap="jianCount">-</text><textclass="operation-num">数量{{num}}</text><textclass="operation-jia"bindtap="jiaCount">+</text><textbindtap="addCart">加入购物车</text></view></view><!-- 加入购物车 --><textclass="carts-num"wx:if="{{hasCart}}">购物车已有：{{totalNum}}</text></view></view>
shouye.wxss:
.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: 30rpx20%020%; display: flex; flex-direction: row; justify-content: space-around; }
shouye.js:
// pages/shouye/shouye.jsPage({ /** * 页面的初始数据 */data: { num:1, totalNum:0, hasCart:false, }, jiaCount:function(){ varnum=this.data.num; num++; this.setData({ num:num }) }, jianCount:function(){ varnum=this.data.num; num--; this.setData({ num:num }) }, addCart:function(){ constnum=this.data.num; vartotal=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，则在购物车图标下方出现"购物车已有{{数量}}"
