| 博客班级 | https://edu.cnblogs.com/campus/zjcsxy/SE2020 |
| 作业要求 | https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334 |
| 作业目标 | 1.编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到 3.github在博客园班级中写一篇相应的博文 |
| 作业源代码 | https://github.com/zyhJohn/Test |
| 学号 | 31701089 |
| 院系 | 浙大城市学院计算机专业 |
前言
这算是我第二个写的微信小程序。相比起第一个运用了微信云开发的小程序，这一个小程序更加基础，我也在编写过程中对小程序有了一个更深的认识。
界面展示
我的demo中大致分为以下几个文件。images中存放用到的图片，pages存放页面代码等，以app等命名的文件则存放的整个小程序的一些全局变量以及环境变量。
部分代码展示
category.wxml
<view class="cartList"> <view wx:if="{{cart==false}}" class="cart-empty"> <image src="../../images/cart-empty.png" class="cart-empty-image"></image> <view class="cart-empty-title">购物车暂无商品</view> <button class="cart-empty-button">去逛逛</button> </view> <view wx:elif="{{cart}}" class="cart-empty"> <view wx:for="{{cart}}" wx:key="id"> <navigator class="cartItem" url="../goodsDetail/goodsDetail?id={{item.item.id}}" open-type="navigate" hover-class="navigate-hover" bindtap="navigateToDetails"> <image class="itemImage" src="{{item.item.images[0]}}" mode="aspectFit" /> <view class="meta"> <view class="itemName">{{item.item.name}}</view> <view class="itemPrice">价格：{{item.item.price}}</view> </view> </navigator> <text class="itemPrice">数量：</text> <image class="addRemove" src="../../images/remove.png" bindtap="removeItem" data-item="{{item}}"></image> <text class="itemPrice">{{item.count}}</text> <image class="addRemove" src="../../images/add.png" bindtap="addItem" data-item="{{item}}"></image> </view> <view class="buyView"> <view>总价：{{totalPrice}}</view> <button class="buyButton" size="mini" bindtap="pay">结算</button> <button class="clearButton" size="mini" bindtap="clear">清空</button> </view> </view> </view>
在wxml中，我进行了对于当前购物车内是否有物品进行了条件判断。若购物车为空，则显示购物车为空的图片，若购物车内已有货物，则显示货物并可以调整货物数量以及清空购物车。清空购物车后，页面显示则还原为购物车为空的图片。
mycart.js
Page({ data: { cart: [], totalPrice: 0, }, onLoad: function (options) { this.getCartData(); }, onShow: function () { this.getCartData(); }, getCartData: function () { this.setData({ cart: getApp().globalData.cart }) var total = 0; var cart = this.data.cart; cart.forEach(item => { var price = item.item.price; var count = item.count; total = total + price * count; }); this.setData({ totalPrice: total }) }, removeItem: function (e) { this.caculateCount(e, false); }, addItem: function (e) { this.caculateCount(e, true); }, caculateCount: function (e, isAdd) { var selectedItem = e.currentTarget.dataset.item; var cart = getApp().globalData.cart; cart.forEach(item => { if (item.item.id == selectedItem.item.id) { if (isAdd) { item.count++; } else { item.count--; if (item.count == 0) { var index = cart.indexOf(item); cart.splice(index); } } } }) this.getCartData(); }, navigateToDetails: function () { wx.navigateTo({ url: \'../goodsDetail/goodsDetail\', success: function (res) { }, fail: function () { }, complete: function () { } }) }, pay: function () { wx.requestPayment({}) }, clear:function(){ var list = getApp().globalData.cart; this.setData({ cart: [], totalPrice: 0, }) list.forEach(element => { element.count = 0; console.log(list); return; }); }, })
总结及不足
这一个小程序只是大致的demo。唯一值得一看的可能只有页面之间通过全局变量所进行的数据传递，以及购物车页面进行的逻辑判断。但这些恰恰是一个小程序编写最基本的技术。如果我能加入网络api的调用，可以使这一个demo再增色很多。并且若能调用网络api，则可以尝试加入后端，实现云端存储数据。这样会比使用小程序自带的云数据库，在程序运行速度上会更加方便快捷。
请发表评论