微信小程序：仿盒马app（盒马有微信小程序吗）

微信小程序：仿盒马app（盒马有微信小程序吗）

前段时间，随着马化腾现身全国多地用微信小程序乘坐公交的新闻出现，微信小程序的热度可谓是更上了一层。微信小程序现身至今，因其不用-就可使用的方便等优点，发展趋势一直良好。

盒马鲜生的问世也是充满了热度，实现了快速配送，可谓是阿里巴巴对线下超市完全重构的新零售业态。

两个都这么方便的东西碰撞到一起，会发生什么呢？

最近正好在学习微信小程序，于是照着盒马鲜生APP改编了一个微信小程序。

文末有GitHub源码地址，之后我也会不断更新完善这个小程序。如果你也对这个微信小程序感兴趣，欢迎交流，共同学习。

功能简介

本着便利的理念，实现了商城类APP的主要功能。

页面简介

这里主要介绍了该小程序的主要界面信息、展示了几个页面跳转及商品列表信息。请关注首页上方的图片轮播及底部的横向滚动视图。

关于购物车的操作

将商品加入购物车。

对购物车中商品的数量进行增加或者减少。

对购物车的商品进行全选或反选。

删除购物车内商品。

增加默认收货地址、二维码扫一扫

新增收货地址。

二维码扫一扫（这里是模拟机测试的，只能添加本地图片进行扫描，真机可以打开相机扫一扫）

接下来就是实现方式的介绍。

功能实现详解

首页图片轮播和底部的滚动视图

微信小程序自带组件 滑块视图容器swiper，能够实现滑块视图，每一个视图都放在一个swiper-item中。设置参数auto:play就可以自动播放导致swiper变化。

// interval是自动切换时间间隔，duration是滑动动画时长 // 每一个swiper-item就是一个视图

横向滚动视图的实现：

微信自带组件 可滚动视图区域scroll-view，通过设置属性名scroll-x或者scroll-y可以实现视图的横向滚动或者纵向滚动。

// 属性名scroll-x定义了该视图允许横向滚动 // 利用循环从后台获取数据，在视图中有多个view，也就是在页面中能看到的多个商品展示。 {{item.name}} {{item.secName}} {{item.leftTitle}} {{item.leftSecTitle}} {{item.rightTitle}} {{item.rightSecTitle}} ￥{{item.price}}/{{item.unit}}+

关于购物车的操作

将商品加入购物车

在不同的页面根据分类信息能够跳转到不同的页面进入商品列表，比如能在首页和分类页，可以根据分类信息进入不同的商品列表，将商品加入购物车。要想在首页、商品分类界面、购物车多个界面都获取到购物车列表信息，单个页面的数据作用域只在本文件夹，要想多个页面共同操作同一个数据应该怎么做呢？

对于在多个页面进行传值的数据，我们可以在app.js中设置一个全局变量，再在每个页面都引入这个全局数据，就可以实现多个页面共用一个数据了。

{{item.name}} ￥{{item.price}}/{{item.unit}} +

js部分就是实现将商品加入购物车的方法addInCart。这里将商品加入购物车前要先遍历已有的购物车数组进行判断，如果商品已经在购物车中，就直接将购物车中的该商品数量加一，否则才直接将商品添加至全局的购物车数组。

wx.showToast是微信自带的API，能够在页面中出现一个弹窗。

增加或减少购物车中商品的购买数量

{{item.name}} ￥{{item.price}}/{{item.unit}} - {{item.count}} +

js部分：

购物车商品总价的计算

对于选中的商品，调用sumMoney()计算总价。该方法是遍历购物车中的商品，获得每件商品的单价和件数，进行相乘后相加。

// 计算所有商品的钱数sumMoney: function() { // count用于记录每件商品的购买数量 var count = 0; // goods是购物车中的商品，对其进行遍历，计算价格 const goods = this.data.goodsList; for(let i = 0; i < goods.length; i++) { count += goods[i].count*goods[i].price; } this.setData({ sum: count })},

商品的全选和反选

选中的商品和未选中的商品，在列表中展示时，最重要的一个差别是商品列前是蓝色的小勾还是空心的圆点。

因此要先为购物车的商品设置一个状态，对界面的样式进行改变。对于这个状态值，是在加载购物车界面前就要有该状态，因此最先我想在后台数据中为每个商品添加一个状态值。但是这样做有很大的不足之处，对于这个状态值，只有购物车界面需要，对于其他界面来说是多余的，给后台多添加一个数据就意味着要更改所有后台商品数据，增大了实现的复杂度。后面我又想到了一个方法。在购物车界面加载前，先遍历一遍购物车，为每一件购物车添加一个属性type="success"（type参数设置的妙处：success 和 circle类名是微信组件icon的一个状态值，能显示小勾或空心圆点）。 购物车onload方法，遍历购物车中的商品，添加状态type：

onLoad: function (options) { const cardList = app.globalData.cardList; cardList.map(item => { item.type = "success"; });},

前台界面展示部分:

通过这种方式，就实现了动态改变商品状态的方法。 我们可以创建一个方法，遍历购物车中的商品，如果全选了，就吧全选的选项勾上。

// 用来判断是否全选allSelected: function() { const goods = this.data.goodsList; // some是es6新增的方法，如果数组中至少有一个符合条件的，就会返回true var symbol = goods.some(good => { return good.type === "circle" }) // 经过symbol标记，如果购物车中有未选中的商品，全选状态就是空心圆 if(symbol) { this.data.allStatus = "circle" } else { // 如果购物车中所有商品都被选中了，全选状态就是一个勾 this.data.allStatus = "success" } this.setData({ allStatus: this.data.allStatus })},

js实现：

删除购物车中的商品

购物车 删除

js实现 delGoods 方法,用一个数组存放已经选中的要删除的商品，再遍历要删除的商品数组，用 splice 方法逐个删除。

添加默认收货地址

添加默认收货地址也需要在多个页面进行传值，因为显示默认地址和设置默认地址不在同一个界面。考虑到默认收货地址需要长期存储在用户的个人信息中，这次我们用到了 storage 进行数据的存储。

话不多说，要实现功能，绑定一个事件 chooseAddr 先。

将页面跳转到默认收货地址展示界面，这里能显示输入的收货地址

chooseAddr: function() { wx.navigateTo({ url: "../chooseAddress/chooseAddress" })},

在显示默认收货地址的界面，右上角还有一个按钮，可以新增收货地址，那我们再跳转一遍页面到设置默认收货地址界面吧。

选择收货地址 新增地址

// 我要跳转到设置默认收货地址界面啦addNewAddr: function() { wx.navigateTo({ url: "../newAddr/newAddr" })},

在设置默认收货地址界面，给每个输入框分别设置输入改变事件bindinput，用于获得输入框的内容。

收货地址 门牌号 联系人 手机号

输入改变事件获得输入框的内容：

data: { address: '', num: '', name: '', phone: ''},getAddress: function(e) { this.setData({ address: e.detail.value })},getNum: function(e) { this.setData({ num: e.detail.value })},getName: function(e) { this.setData({ name: e.detail.value })},getPhone: function(e) { this.setData({ phone: e.detail.value })},

当当当！说了这么多，storage 存储数据的重点来啦！

返回 选择收货地址 保存

微信提供了一个API：wx.setStorage 能按照键（key）值（data）对的方式在缓存中存数据。

key 是 本地缓存中的指定的 key，data 是需要存储的内容，success 是接口调用成功的回调函数。

数据设置成功后，跳回展示默认地址的界面。在这里，我们要获取缓存中的数据。

微信提供了一个API：wx.getStorage 能从本地缓存中异步获取指定 key 对应的内容。key 是本地缓存中的指定的 key，success 是接口调用的回调函数。

onShow: function () { var that = this; wx.getStorage({ key: "name", success: function(res) { if(res.data.length > 0) { that.setData({ address: res.data[0].address, num: res.data[1].num, name: res.data[2].name, phone: res.data[3].phone }) } } })},

扫描二维码

调用微信自带的 API：wx.scanCode 就能扫描二维码啦。

scan: function() { wx.scanCode({ success: (res) => { console.log(res) } })},

后台数据

关于后台数据的来源，我使用的是用 easymock 构建模拟数据。easymock 对于暂时只关注前台界面的程序员来说是真的超级好用。之前写过一篇文章使用Easy Mock构建模拟数据欢迎移步查看。

写在最后

写微信小程序最重要的可能就是查看文档了。微信给开发人员提供了很详细的各种组件和API的介绍和使用方法。

附上微信小程序开发文档

最后奉上GitHub源码地址：https://github.com/TeanLee/hema

如果觉得还不错的话，请给个start鼓励一下哟~

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。