你幸福吗？幸福西饼小程序来袭

时间 2019-11-10

原文原文链接

说在前面

从接触微信小程序到第一次动手实现一个商城小程序,我发现咱们怕的不是不会写，而是不敢动手去写，每一个人都是从无到有，因此勇敢踏出咱们的第一步吧，看官方文档去吧骚年！html

踏出第一步吧

说的简单，那怎么踏出去呢？在这里我来分享下我写商城小程序遇到的一些问题,踩得一些坑。

一、商城小程序的轮播实现

小程序的轮播图实现真是太方便了swiper,就是这么简单粗暴。一个滑块视图容器，说的简单，那咱们得注意什么呢 swiper-item仅可放在</swiper>组件中 indicatorDots: false,用来设置有无轮播点，autoplay: false,设置自动播放。wx:for设置图片的循环。具体的能够点点这里看看。前端

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
    <block wx:for="{{movies}}" wx:for-index="index" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

我在这里直接设置了轮播状态,图片放在js里遍历。git

二、搜索方法

如何实现小程序的搜索呢，我在这里使用的是正则遍历搜索，在这里就遇到了一个坑
js 匹配字符串的方法有不少
在开始的时候我直接使用 search()方法github

var n = str.search("Runoob");

使用这个方法我一直匹配不了，上网看文档发现使用这个方法会直接把输入值当作字符串，这样就致使搜索的难以实现，那怎么办？放弃是不可能放弃的，那咱继续干吧，又是一波查资料，最终发现可使用test()函数 RegExpObject.test(string)来实现输入值的遍历匹配小程序

<view class='search'>
  <view class='search-value'>
    <input placeholder='搜索商品' value='{{searchVal}}' bindconfirm="search" bindinput="bindKeyInput"></input>
    <view class='clear' wx:if="{{ searchVal != '' }}" bindtap='clear'>
      <image src='../../images/clear.png'></image>
    </view>
  </view>
  <view class='search-button' bindtap='search'>
   <image src='../../images/search.png'></image>
  </view>
</view>

search: function(){
      // var pattern = /和/;
      // var str = "和";
      // console.log(str.search(pattern));
      var tem=[];
      for(var i=0;i<this.data.goods.length;i++)
      {
        var re = new RegExp(this.data.searchVal);
        if(re.test(this.data.goods[i].title))
        {
          tem.push(this.data.goods[i]);
        }
      }
      this.setData({
        goods : tem 
      }) 
},

这样咱们就实现了搜索匹配。微信小程序

3.商品如何加入购物车?

既然咱是一个商城类小程序,那怎么加入购物车呢?mvvm模式

在加入以前咱们是否是有一个疑问，我在购物车界面怎么能获取你商品的信息啊?好难啊?怎么去作呢?使用mvvm模式
他是将逻辑层数据中的name与视图层的name进行了绑定，当逻辑层中name的值发生变化的时候，视图层的值也会随之变化。而后视图层的点击事件changeName也是和逻辑层的changeName绑定的，当点击视图按钮的时候，逻辑层的changeName方法会响应并改变逻辑层的数据，视图层的数据又随之变化。说的好像很叼啊，具体怎么作呢?咱仍是不太清楚啊api

来，咱们继续聊。

不能忘了还有个app.js这个全局js在这里发挥了中转站的做用数组

globalData: {
    cartList: [], 
  }

在app.js里面定义一个全局的空数组，在购物车取值时，咱们先把值赋给这个空数组，在取这个值，这样的话咱们就能够获得这个值。话很少说,看看效果微信

那代码是如何实现的呢?app

addCart: function () {
    var good = this.data.good_info;
    var cartList = app.globalData.cartList;
    var cartItem = {
      id: good.id,
      name: good.title,
      url: good.image,
      price: good.price,
      num: 1,
      select: 'circle',
    };
    //判断购物车为空
    if (cartList.length > 0) {
      //不为空
      var index = null;//记录id商品在购物车的下标
      for (let i = 0; i < cartList.length; i++) {
        if(good.id == cartList[i].id){
          index = i;
        }
      }
      //若是index等于null,说明第二次添加id商品不在购物车里，直接Push进去
      if(index == null){
        cartList.push(cartItem);
      }else{
        //index不等于Null,那么第二次添加id商品在购物车，num++
        cartList[index].num++;
      }
    } else {
      //购物车为空直接Push进去
      cartList.push(cartItem);
    }

   // console.log(cartList);
    wx.showToast({
      title: '添加成功',
      icon: 'success',
      duration: 2000
    })
  }
})

在这里我想说的是如何实现逻辑呢?开始我遇到一个问题，第二次添加相同商品时不会再数量上加一，而是由添加了一个新的商品，那么如何解决这个问题呢?咱们使用了for循环的嵌套判断
在数据中遍历一次，而后再比较选出商品id作比较再一次遍历，然而又遇到一个问题，第一个商品遍历出来，第二个商品选数量时却致使遍历出错，难受，那么逻辑如何解决呢?
将addCart方法的逻辑重构

第一步仍是判断购物车是否为空，保证第一件添加商品成功
    第二步，不为空的状况，定义一个索引index
    而后，遍历购物车数组，若是good.id==cartList[i].id，把这个i复制给index
    遍历完成后对index判断
    若是index==null,说明第二次添加商品不在购物车，直接push进去
    若是不为空，说明第二次添加的商品在购物车，将cartList[index].num++

这样就解决逻辑问题。

四、购物车功能的实现

购物车功能有哪些呢?分析下，商品的勾选，价格的计算，总价计算，全选功能。来
让咱们一一实现。

再这里封装一个总价，方便调用。
遍历数组，把即选的num 加起来。

countNum: function () {
    var that = this
    //遍历数组，把既选中的num加起来
    var newList = that.data.list
    var allNum = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].select == "success") {
        allNum += parseInt(newList[i].num)
      }
    }
    parseInt
    console.log(allNum)
    that.setData({
      num: allNum
    })
  },
  //计算金额方法
  count: function () {
    var that = this
    //思路和上面一致
    //选中的订单，数量*价格加起来
    var newList = that.data.list
    var newCount = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].select == "success") {
        newCount += newList[i].num * newList[i].price
      }
    }
    that.setData({
      count: newCount
    })
  },

再来断定全选

allSelect: function (e) {
    var that = this
    //先判断如今选中没
    var allSelect = e.currentTarget.dataset.select
    var newList = that.data.list
    if (allSelect == "circle") {
      //先把数组遍历一遍，而后改掉select值
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "success"
      }
      var select = "success"
    } else {
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "circle"
      }
      var select = "circle"
    }
    that.setData({
      list: newList,
      allSelect: select
    })
    //调用计算数目方法
    that.countNum()
    //计算金额
    that.count()
  },

无论咱ui有多丑，该有的逻辑咱都有。

五、商品的分类

商品分类中主要是根据商品id判断选择类别，在这里参考了林鑫大神的分类。这里就很少废话，主要是界面的设计

六、用户个人table功能的实现

在这里我想说的是兄弟，在这里咱能够偷下懒了,为何这么说呢?咱有微信UI
不bb直接上地址https://github.com/Tencent/weui-wxss

同时在这方面有赞也有个,老规矩https://github.com/youzan/zanui-weapp

七、咱还会遇到哪写问题呢?

页面的跳转问题

你是否是有时候命名绑定了页面却跳转不过去呢?是的,有的，那为何会出现这种状况呢?
官方文档写的很清楚

跳转tabBar

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其余"
    }]
  }
}

wx.switchTab({
  url: '/index'
})

跳转应用内界面 wx.navigateTo

wx.navigateTo({
  url: 'test?id=1'
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
  }
})

跳转刷新主页

wx.reLaunch({
  url: 'test?id=1'
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
  }
})

咱具体的能够看看文档

前端数据怎么得?

有时候咱们并不能获得数据，写在代码里有显得太冗余，不怕试试Easy mock本身写个假数据。

scoll-view scoll-x scoll-y

scoll-y你们都知道scoll-x其实就是横向划屏,须要注意的是图片问题。

说再多都是虚的咱贴个gitHub地址

既然都看到这里了，咱点个赞再关注一波吧老铁。代码固然还有不少不足的地方，还有不少功能须要完善，做为一个年轻的程序猿，咱也算走出了第一步，俗话说万事开头，摇摇晃晃的总得有个开始做为前端小白技术固然不是很好，但愿在这里有大家的陪伴，我一点点记录，大家一点点见证。

你幸福吗？ 幸福西饼小程序来袭