仿盒马生鲜商城小程序

仿盒马生鲜商城小程序

作品主分类: 微信小程序 > 电商 发布时间: 2019-06-04

Tags: 模板

免费文件(登录下载)

仿造盒马鲜生,实现了部分功能。


盒马鲜生是阿里巴巴对线下超市完全重构的新零售业态,热度十分


#### 项目功能

    * 用户信息注册

    * 首页几个轮播和界面交互

    * 分类商品管理购买

    * 购物车界面交互及其操作

    * 个人信息界面


## 部分功能解析

项目目录

```

    "pages": [

     "pages/index/index",  //主界面

      "pages/person/person", //个人界面

     "pages/classify/classify", //分类商品界面

     "pages/class/myFruits/myFruits", //水果商店

     "pages/class/myMeat/myMeat", //肉类食品商店

     "pages/myCart/myCart"    //购物车

     ],

```

### 1.首页轮播图


轮播有几种形式, 比如常见的横向海报图片展示, 还有横纵向商品列表展示,头条信息框轮换

siwper组件很好的实现了横向海报图片展示,比如

```

        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

            <block wx:for="{{imgUrls}}" wx:key="index">

                <swiper-item>

                    <image src="{{item}}" class="slide-image"  />

                </swiper-item>

            </block>

        </swiper>

```

然而横向滑动需要注意些别的细节  

首先要给swiper组件加上scroll-x-="true"  

然后给轮播的子元素父容器设置display: inline-block; white-space: nowrap; 


头条信息框转换采用上下轮换, 使用scroll-view嵌套swiper完成


```

    <scroll-view scroll-y-="true"  >

                <swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">

                    <block wx:for="{{something}}" wx:key="index">

                         //内容 

                    </block>

                </swiper>

    </scroll-view>

```


### 2.分类商品管理

首先在index界面通过onLoad生命周期函数 ,

通过easy-moc获取后台模拟数据,将必要的信息送给全局的globalData  

 ```    

 wx.request({

       url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',

       complete: res => {

         this.globalData.classifyList = res.data;

       },

     })

```

对于数据处理,需要理清哪些是全局信息, 哪些是局部信息 

比如所有商品的信息,购物车里的商品,就得放到全局中 ,而有些比如当前界面的状态,一般放到当前界面的Data里面保存


而有些个人信息,比如出生年月,账号信息   则可以通过wx.setStorage 和wx.getStorage放入本地存储


### 3.购物车操作

购物车中的操作无非是些加加减减,需要自己不断调试,找出哪里不合常理

通过view,button里的bindtap等操作,实现对商品信息的修改,购物车状态的处理



举个例子  减少购物车中的商品的数量操作

```

reduceItems: function (e) {

    let carts = app.globalData.carts;    //获取购物车的信息

    let classifyList = app.globalData.classifyList;  //获取商品的信息

    for (let key of carts) {                        //遍历购物车数组

      if (key.id === e.target.dataset.id) {         //通过WXML中 view里面的bind-id传过来的参数进行查找

        key.cartSelected = true;

        if (key.num === 1) {                  //如果数量为1还要减

          key.num--;

          key.cartSelected = false;           //购物车不选中

          key.selected = false;               //商品中不选中

          app.globalData.carts = carts.filter((item) => {    //进行购物车中商品剔除

            return item.id != e.target.dataset.id;

          })

        } else {

          key.num--;

        }

      }

    }

    let num = 0;                                 //实时更新购物车小计界面显示

    let totalPrice = 0;

    for (let key of carts) {

      if (key.cartSelected) {

        num += key.num;

        totalPrice += key.num * key.price;

      }

    }

    this.setData({                          //通过setData进行当前页面Data数据管理

      cart: app.globalData.carts,

      cartTotal: num,

      cartTotalPrice: totalPrice,

    })

  },

```

### 4.weui框架引入

**在全局CSS样式中 添加的CSS适配于所有的页面,由此可以引入weui ,做一些界面真的很方便**

```

@import './styles/weui.wxss';

```


## 总结

1. 微信小程序的组件,API很强大,需要不断的探索,不断的学习,多看文档

2. 善于利用有效资源, 比如iconfont  esay-moc weui等

3. 切页面要细心,善于利用弹性布局等布局方法,小程序的rpx确实很好用

4. 不要一股脑的写代码, 当函数具有复用性,应该抽象出来,封装好,这样代码才易于维护,易读


作者尚未创建常见问题解答
尚无购买记录
购买须知

购买流程

A.购买后,下载文件,部分文件会有加密,请联系客服!

B.客服将会拉组联系作者提供问题咨询。

C.72小时(暂定)后,程序如果没有问题,合作完成,款项将会被支付作者。

因为源码、模板是虚拟商品,具有可复制性,可传播性等原因,一旦授予,如非质量问题,不可退款。

请尊重作者劳动成果,谢谢你的支持!

注意事项

1. 购买后,请及时架设测试。如有问题,请及时联系客服。

2. 购买后,您可以将程序、模板上传到您多个网站上,但不可以随意转卖散播,否则作者有权利追究法律责任。

3. 服务器环境配置、程序系统使用不在指导范围内,请自行探索或百度!

4. 免费模板不提供任何技术支持和售后服务,如有模板使用问题和修改请自行百度解决。