O2O – gitweixin

7月 6,2018

仿盒马生鲜的小程序源码

功能介绍

好奇微信小程序是如何制作的，也对盒马app感兴趣，就尝试写了这个盒马小程序。实现了app的部分功能，还有部分功能未实现，和大家一起学习
文章末有GitHub源项目代码地址

已实现的功能

购物车的操作。添加商品、删除商品
新增收货地址
点击二维码图片能扫一扫
图片轮播效果
滚动视图展示商品详情

项目效果图

页面简介

购物车的操作

添加购物车

添加收货地址

部分功能点实现介绍

将商品加入购物车

我使用easymock构建了一些数据，用于商品在列表展示。
这是wxml，用于商品的展示。

<scroll-view scroll-y>
    <block wx:for="{{goods}}" wx:key="index" wx:for-index="index">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__hd">
                    <image src="{{item.image}}" />
                </view>
                <view class="weui-cell__bd">
                    <view class="goodsList__bd__intro">{{item.name}}</view>
                    <view class="view__bd__price">
                        <text class="price left">￥{{item.price}}/{{item.unit}}</text>
                        <text class="add right" bindtap="addInCart" id="{{index}}">+</text>
                    </view>
                </view>
            </view>
        </view>
    </block>
</scroll-view>

在执行for循环遍历数据内容的时候，为每一个商品添加了index，用于确定用户将哪一件商品加入了购物车。给加号添加了一个绑定事件，用户点击加号，能将该商品放入购物车列表。
js部分代码：
这里最重要的是在app.js中添加了一个全局变量cardList，用于存储用户加入购物车的商品。这样，就能实现多个页面都能对购物车列表的数据进行操作了。

globalData: {
  cardList: []
}

商品展示界面：页面开始加载的时候，就请求数据，用于商品列表的显示。

wx.request({
  url: "https://www.easy-mock.com/mock/5a223b51707056548f086d8b/hema/getGoods",
  success: (res) => {
    console.log(res.data.data.goods);
    this.setData({
      goods: res.data.data.goods
    })
  }
})

用户将商品加入购物车执行的操作

addInCart: function(e) {
  const good = this.data.goods[e.currentTarget.id]; // 根据index，判断用户点击了哪个商品加入购物车
  const cart = app.globalData.cardList; // 获取购物车列表
  cart.push(good); // 用户选择商品加入购物车后，将该商品加入购物车列表
},

调整商品的购买数量

将商品加入购物车后，还有可能对添加的商品进行加减，调整购买数量。
购物车wxml界面：

<block wx:for="{{goodsList}}" wx:key="index" data-index="index">
    <view class="weui-cell">
        <view class="weui-cell__hd">
            <icon type="success" color="#23a3ff"></icon>
        </view>
        <view class="weui-cell__bd">
            <image src="{{item.image}}" />
        </view>
        <view class="weui-cell__ft right">
            <text class="proIntr left">{{item.name}}</text>
            <text class="price left">￥{{item.price}}/{{item.unit}}</text>
            <view class="count">
                <text class="reduce left" bindtap="reduceCount" id="{{index}}">-</text>
                <text class="number left">{{item.count}}</text>
                <text class="add left" bindtap="addCount" id="{{index}}">+</text>
            </view>
        </view>
    </view>
</block>

给加号减号分别添加了点击事件，循环时还要用index标出用户对购物车的哪一件商品进行了加减操作。
js部分：

onLoad: function (options) {
  this.setData({
    // 页面加载时就给购物车显示商品数量
    goodsList: app.globalData.cardList
  });
  this.sumMoney();
},
// 增加商品数量
addCount:function (e) {
  var that = this;
  console.log(e);
  const goodId = e.currentTarget.id;
  console.log(that.data.goodsList[goodId]);
  that.data.goodsList[goodId].count++;
  console.log(that.data.goodsList[goodId]);
  this.setData({
    goodsList: that.data.goodsList
  })
  this.sumMoney();
},
// 减少商品数量
reduceCount: function(e) {
  var that = this;
  const goodId = e.currentTarget.id;
  // console.log(that.data.goodsList[goodId]);
  if(that.data.goodsList[goodId].count <= 1) {
    that.data.goodsList[goodId].count = 1;
    wx.showModal({
      title: '数量小于1',
      content: '不允许操作',
      duration: 2000
    })
  } else {
    that.data.goodsList[goodId].count--;
  }
  // console.log(that.data.goodsList[goodId]);
  this.setData({
    goodsList: that.data.goodsList
  })
  this.sumMoney();
},
// 计算所有商品的钱数
sumMoney: function() {
  var count = 0;
  const goods = this.data.goodsList;
  console.log(goods);
  for(let i = 0; i < goods.length; i++) {
    // console.log(goods[i].count);
    // console.log(goods[i].price);
    count += goods[i].count*goods[i].price;
  }
  // console.log(count);
  this.setData({
    sum: count
  })
},

这个界面，我不确定获得的数据是什么，就反复测试了多次。

新增默认收货地址

在输入地址的界面，为每一个输入框都添加了监听输入的事件，用于监听用户输入的内容。
例如：

<view class="weui-cell">
    <view class="weui-cell__hd">
        <text class="weui-label mr60">收货地址</text>
    </view>
    <view class="weui-cell__bd">
        // 绑定的监听输入框事件 bindinput="getAddress"
        <input bindinput="getAddress" class="weui-input" placeholder="请输入收货地址" />
    </view>
</view>

我将获得的用户输入的默认地址存储到了storage中。
【划重点：微信小程序的storage存储大小是由限制的，不能将大量数据放在storage中】
js部分：

// 页面的初始数据，用户输入的收货地址、门牌号、姓名、联系电话
data: {
address: '',
num: '',
name: '',
phone: ''
},
backToChooseAddr: function() {
wx.navigateTo({
  url: "../chooseAddress/chooseAddress"
});
},
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
})
},
// 用户点击保存后，对输入的数据进行存储，并反馈存储状态
saveInfo: function() {
wx.setStorage({
  key: "name",
  data: [{address:this.data.address}, {num: this.data.num}, {name: this.data.name}, {phone: this.data.phone}],
  success: function() {
    wx.showToast({
      title: "地址保存成功",
      icon: 'success',
      duration: 2000
    })
    setTimeout(function(){
      wx.navigateTo({
        url: "../chooseAddress/chooseAddress"
      })
    },1000);

  }
})

用户默认收货地址的显示，就从storage中按照key-value的方式取出用户存在storage中的地址信息。
js部分：

onShow: function () {
  var that = this;
  wx.getStorage({
    key: "name",
    success: function(res) {
      console.log(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
        })
      }
    }
  })

图片轮播和滚动视图部分

图片轮播
给swiper组件添加current=’{{activeIndex}}’就能判断当前展示图片的下标，再根据下标该表小圆点的展示状态（给相应的小圆点一个active类，有不同的样式）。小圆点也绑定了点击事件，能根据用户点击不同的小圆点，动态改变图片的展示状态。

<swiper class="page__bd__scroll" current='{{activeIndex}}' bindchange='swiperTab'>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
  <swiper-item>
    <image class="page__scroll__item" src=""/>
  </swiper-item>
</swiper>

<ul class="page__scroll__btns">
  <li class="page__scroll__btn {{activeIndex==0?'active':''}}" bindtap="changeTag" data-index="0"></li>
  <li class="page__scroll__btn {{activeIndex==1?'active':''}}" bindtap="changeTag" data-index="1"></li>
  <li class="page__scroll__btn {{activeIndex==2?'active':''}}" bindtap="changeTag" data-index="2"></li>
  <li class="page__scroll__btn {{activeIndex==3?'active':''}}" bindtap="changeTag" data-index="3"></li>
  <li class="page__scroll__btn {{activeIndex==4?'active':''}}" bindtap="changeTag" data-index="4"></li>
</ul>

js部分：

// activeIndex 是当前播放图片的下标
data: {
  activeIndex: 0
},
// 点击不同的小圆点切换不同的图片
changeTag:  function(e){
  var type = e.target.dataset.index;
  this.setData({
    activeIndex: type
  });
},
// 滑动切换图片，获取点击的下标，改变相应小圆点的状态
swiperTab: function(e){
  var type = e.detail.current;
  this.setData({
    activeIndex: type
  });
},

遇到的问题

1、在写静态界面的时候，给子元素一个margin值，一直会影响父元素的margin值，纠结了好久才知道这个问题可以用bfc的知识解决。给父元素添加一个overflow: hidden，通过这种方法创建一个bfc，就能避免子元素的margin样式影响到父元素。
2、从后台或者从其他地方获取数据时，很难一眼看出来传值的内容是什么，我就把数据输出到控制台，一点点判断。
3、异步问题。js是异步执行的。比如执行到取数据的时候，程序不会等着取到数据再执行下一步，而是立即执行下一步。这点在输出数据和设置数据时要尤为注意。

收获

写完这些还是收获满满的。
感触最大的就是要善于查文档。微信的weui提供了很多样式，只要引入样式库，照着使用文档写，能少很多事。还有就是微信小程序的api，里面有很多微信小程序自带的api，很方便。
面对bug心理承受也更大了。学会了一些调试技巧。使用easymock构建模拟数据。
对底层的盒子模型、异步等东西有了更深一层的理解。
项目地址：
https://github.com/TeanLee/hema
如果觉得还不错的话，给个小星星start鼓励一下哦
比心

联系方式：

如果有建议，欢迎联系我，一起学习。
wechat: ltt598625763
email: 598625763@qq.com

作者 east

6月 30,2018

仿美团外卖小程序源码

开发工具

微信web开发者工具：官网就可以下载，相信大家早就安装好了吧。
小程序 API：官网提供的文档，不懂得地方多看两遍基本上就可以解决了。
Easy Mock：一个能够提供虚拟数据接口的网站，在前端独自开发的情况下，实在是再好不过的工具了。
功能

已经实现的功能：

主界面
订单界面
用户界面
点菜界面
定位界面
未实现的功能：

外卖红包领取，数都数不清，毕竟大企业的产品，不是说模仿就模仿的，所以只实现了一些主要的功能，和一些能力之内的功能…
项目启动

创建界面

“pages”:[
“pages/home/home”,
“pages/menu/menu”,
“pages/location/location”,
“pages/my/my”,
“pages/order/order”
],

只要编辑app.js中的pages属性，就会在项目目录下的pages文件夹里自动生成一个文件夹，里面包扩了.wxml 、 .wxss 、 .json 、 .js这样四个文件。wxml就是界面结构文件， .wxss就是样式文件, .js是用来存放js代码并实现界面逻辑的地方，至于 .json就是用来配置页面属性的地方，如：修改标题栏的颜色，和文字。

配置标题栏的样式

“window”:{
“navigationBarTitleText”: “美团外卖+”,
“navigationBarTextStyle”: “white”,
“navigationBarBackgroundColor”: “#FFC640”
},

同样是在app.json中配置，其他页面的标题栏都以此为例。

添加底栏

“tabBar”: {
“color”: “#272636”,
“selectedColor”: “#FFD161”,
“backgroundColor”: “#fff”,
“borderStyle”: “#a8a8a8”,
“list”: [
{
“pagePath”: “pages/home/home”,
“iconPath”: “pages/images/home.png”,
“selectedIconPath”: “pages/images/home-selected.png”,
“color”:”white”,
“text”: “首页”
},
{
“pagePath”: “pages/order/order”,
“iconPath”: “pages/images/order.png”,
“selectedIconPath”: “pages/images/order-selected.png”,
“text”: “订单”
},
{
“pagePath”: “pages/my/my”,
“iconPath”: “pages/images/my.png”,
“selectedIconPath”: “pages/images/my-selected.png”,
“text”: “我的”
}
]
}

在app.json中编写以上代码，这是小程序自带的功能，只需要照搬照抄就可以了，极其方便，效果如下：

image
数据请求

/**
* 生命周期函数–监听页面显示
*/
onShow: function () {
var that = this;
wx.request({
url: “https://www.easy-mock.com/mock/596257bc9adc231f357c4664/restaurant/info”,//easy-mock生成的虚拟数据接口链接
method: “GET”,
success: function (res) {//成功得到数据，对数据进行处理
that.setData({//将数据发送到data中
restaurant: res.data.data.restaurant,
location: wx.getStorageSync(‘location’)
})
}
});
},

data是每个页面.js文件中都存在的一个键，用来储存本页面需要用到的数据。具体使用，可在wxml文件中用{{‘data中的键名’}}的形式调用数据。
虚拟数据大致如下：

{
“success”: true,
“data”: {
“restaurant”: [{
“name”: “御膳房”,
“src”: “http://i2.kiimg.com/601998/a955867016875a41.jpg”,
“star”: 4.5,
“sales”: 641,
“initial_price”: 0,
“distribution_price”: 0,
“distance”: “156m”,
“time”: 33
}, {
“name”: “韩式炸鸡啤酒屋”,
“star”: 4.5,
“sales”: 731,
“src”: “http://i4.piimg.com/601998/9ce47f2f19d7717d.jpg”,
“initial_price”: 15,
“distribution_price”: 0,
“distance”: “1.3km”,
“time”: 52
},{
//略去
},{
//略去
},{
//…
}]
}
}

主界面
效果图：

image
swiper控件应用

首先是两页标签的滑动切换,这里使用的是swiper，它是一款小程序自带的滑块组件，使用掌握起来非常简单，具体代码如下：

swiper标签就是滑块组件的主体，表示可以滑动的区域，其中indicator-dots属性是设置设置点是否显示。接下来swiper-item标签在swiper之中表示的是每一个用来作为滑动的页面。这里用包裹着swiper-item表示的是使用categoryList对象数组中数据来循环渲染swiper-item，swiper-item的数量取决于categoryList中有多少组数据。之后在swiper-item中的block标签表示的是在一个页面中用categoryList.item中的数据循环渲染多个类似的标签，这些标签就是效果图中的类别项，总共两页，每页八个。这就是swiper和循环渲染的一些基本用法。

弹出层的实现

<view class=”mask”
hidden=”{{mask2Hidden}}” bindtap=”mask2Cancel”>
<template is=”sort_list” data=”{{selected,sortSelected}}”/>
<scroll-view class=”filterList” scroll-y=”true” >
<view class=”filterList-characteristic-title”>商家特色</view>
<view class=”filterList-characteristic-items”>
<block wx:for=”{{characteristicList}}” wx:key=””>
<view class=”filterList-characteristic-item {{characteristicSelected[index]==true?’characteristic-selected’:”}}”
catchtap=”characteristicSelected” data-index=”{{index}}”>{{item.text}}</view>
</block>
</view>
<view class=”filterList-discount-title”>优惠活动(单选)</view>
<view class=”filterList-discount-items”>
<block wx:for=”{{discountList}}” wx:key=””>
<view class=”filterList-discount-item {{discountSelected==index?’discount-selected’:”}}”
catchtap=”discountSelected” data-index=”{{index}}”>
<text class=”filterList-discount-item-icon”
style=”background:{{item.iconColor}}”>{{item.icon}}</text>
{{item.text}}</view>
</block>
</view>
</scroll-view>
<view class=”filterList-footer”>
<view class=”filterList-footer-delect”
catchtap=”clearSelectedNumb”>清除筛选</view>
<view class=”filterList-footer-finish” bindtap=”finish”>完成
<view class=”filterList-footer-finish-number” hidden=”{{selectedNumb==0}}”>{{selectedNumb}}
</view>
</view>
</view>
</view>

最外层的mask类的view就是一个遮罩层，用来覆盖之前的界面形成遮罩的效果，并在上面显示新的界面也就是弹出层。以上的代码就是效果图中点击筛选按钮所呈现出来的内容了。其中bindtap属性就是点击事件的绑定了，具体的点击事件需要在.js文件中设置。值得一提的是，bindtap事件是会把当前标签受到的点击冒泡给它的父容器，这就相当与同时点击了他的父容器，如果想阻止冒泡的话就需要使用catchtap。

下载地址：美团外卖小程序

作者 east

6月 28,2018

仿轻客洗衣APP源代码

微信小程序仿轻客洗衣APP源代码下载，“轻客洗衣”是由创维集团智慧家庭发展部倾力打造的一款互联网智能洗衣产品，通过手机APP、智能洗衣机、云端平台搭建起的智能解决洗衣方案，为用户带来全新的自助洗衣体验，向广大学生、白领、蓝领等群体提供便捷、健康、实惠的优质自助洗衣服务。

功能包含：

支持线上支付，告别零钱烦恼

一键预约洗衣，无需排队

智能定位，附近洗衣机一目了然

洗衣状态实时反馈，App一手掌握

洗衣完成多路推送通知，不再担心忘记取衣

下载地址：轻客洗衣

作者 east

标签归档O2O