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

摘要：商城小程序的轮播实现小程序的轮播图实现真是太方便了就是这么简单粗暴。遍历数组，把即选的加起来。商品的分类商品分类中主要是根据商品判断选择类别，在这里参考了林鑫大神的分类。

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

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

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

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

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

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

search: function(){
      // var pattern = /和/;
      // var str = "和";
      // console.log(str.search(pattern));
      var tem=[];
      for(var i=0;i
这样我们就实现了搜索匹配。
3.商品如何加入购物车?
既然咱是一个商城类小程序,那怎么加入购物车呢?mvvm模式
在加入之前我们是不是有一个疑问，我在购物车界面怎么能获取你商品的信息啊?好难啊?怎么去做呢?使用mvvm模式  
他是将逻辑层数据中的name与视图层的name进行了绑定，当逻辑层中name的值发生变化的时候，视图层的值也会随之变化。然后视图层的点击事件changeName也是和逻辑层的changeName绑定的，当点击视图按钮的时候，逻辑层的changeName方法会响应并改变逻辑层的数据，视图层的数据又随之变化。说的好像很叼啊，具体怎么做呢?咱还是不太清楚啊
来，我们继续聊。
不能忘了还有个app.js这个全局js在这里发挥了中转站的作用
 globalData: {
    cartList: [], 
  }
在app.js里面定义一个全局的空数组，在购物车取值时，我们先把值赋给这个空数组，在取这个值，这样的话我们就可以得到这个值。话不多说,看看效果
那代码是如何实现的呢?
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++
    
这样就解决逻辑问题。
4、购物车功能的实现
购物车功能有哪些呢?分析下，商品的勾选，价格的计算，总价计算，全选功能。来
让我们一一实现。  

再这里封装一个总价，方便调用。
遍历数组，把即选的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有多丑，该有的逻辑咱都有。
5、商品的分类
商品分类中主要是根据商品id判断选择类别，在这里参考了林鑫大神的分类。这里就不多废话，主要是界面的设计  

6、用户我的table功能的实现

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

同时在这方面有赞也有个,老规矩https://github.com/youzan/zanui-weapp
7、咱还会遇到哪写问题呢?
页面的跳转问题
你是不是有时候命名绑定了页面却跳转不过去呢?是的,有的，那为什么会出现这种情况呢?
官方文档写的很清楚
跳转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地址

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