用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

1

帖子

13

积分

新手上路

Rank: 1

积分
13
2018-6-12 11:16:26 你也很棒 新手上路 楼主 0897
#说在前面
从接触微信小程序到第一次动手实现一个商城小程序,我发现我们怕的不是不会写,而是不敢动手去写,每个人都是从无到有,所以勇敢踏出我们的第一步吧,看[官方文档](https://developers.weixin.qq.com ... mponent/swiper.html)去吧骚年!
#踏出第一步吧
## 说的简单,那怎么踏出去呢?在这里我来分享下我写商城小程序遇到的一些问题,踩得一些坑。
# 1、商城小程序的轮播实现
小程序的轮播图实现真是太方便了swiper,就是这么简单粗暴。一个滑块视图容器,说的简单,那我们得注意什么呢  **swiper-item**仅可放在</swiper>组件中 **indicatorDots: false**,用来设置有无轮播点,**autoplay: false,**设置自动播放。**wx:for**设置图片的循环。具体的可以[点点这里](https://developers.weixin.qq.com ... mponent/swiper.html)看看。  
```
<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里遍历。
# 2、搜索方法
![图片描述](https://user-gold-cdn.xitu.io/20 ... =416&f=gif&s=662517)  

如何实现小程序的搜索呢,我在这里使用的是正则遍历搜索,在这里就遇到了一个坑  
js 匹配字符串的方法有很多
在开始的时候我直接使用 search()方法
>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.title))
        {
          tem.push(this.data.goods);
        }
      }
      this.setData({
        goods : tem
      })
},
```
这样我们就实现了搜索匹配。
# 3.商品如何加入购物车?
###  既然咱是一个商城类小程序,那怎么加入购物车呢?mvvm模式
在加入之前我们是不是有一个疑问,我在购物车界面怎么能获取你商品的信息啊?好难啊?怎么去做呢?使用[mvvm模式](https://blog.csdn.net/qq_26585943/article/details/54378684)  
他是将逻辑层数据中的name与视图层的name进行了绑定,当逻辑层中name的值发生变化的时候,视图层的值也会随之变化。然后视图层的点击事件changeName也是和逻辑层的changeName绑定的,当点击视图按钮的时候,逻辑层的changeName方法会响应并改变逻辑层的数据,视图层的数据又随之变化。说的好像很叼啊,具体怎么做呢?咱还是不太清楚啊  
     
###来,我们继续聊。  
不能忘了还有个app.js这个全局js在这里发挥了中转站的作用
```
globalData: {
    cartList: [],
  }
```

在app.js里面定义一个全局的空数组,在购物车取值时,我们先把值赋给这个空数组,在取这个值,这样的话我们就可以得到这个值。话不多说,看看效果![图片描述][2]  

那代码是如何实现的呢?
```
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.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.id,把这个i复制给index
        遍历完成后对index判断
        如果index==null,说明第二次添加商品不在购物车,直接push进去
        如果不为空,说明第二次添加的商品在购物车,将cartList[index].num++
        
这样就解决逻辑问题。

# 4、购物车功能的实现
购物车功能有哪些呢?分析下,商品的勾选,价格的计算,总价计算,全选功能。来
让我们一一实现。  
![](https://user-gold-cdn.xitu.io/20 ... 498&f=gif&s=1075188)
再这里封装一个总价,方便调用。
遍历数组,把即选的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.select == "success") {
        allNum += parseInt(newList.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.select == "success") {
        newCount += newList.num * newList.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.select = "success"
      }
      var select = "success"
    } else {
      for (var i = 0; i < newList.length; i++) {
        newList.select = "circle"
      }
      var select = "circle"
    }
    that.setData({
      list: newList,
      allSelect: select
    })
    //调用计算数目方法
    that.countNum()
    //计算金额
    that.count()
  },
```
不管咱ui有多丑,该有的逻辑咱都有。![](https://user-gold-cdn.xitu.io/20 ... h=525&f=jpeg&s=9570)
# 5、商品的分类
商品分类中主要是根据商品id判断选择类别,在这里参考了[林鑫大神](https://www.cnblogs.com/linxin/p/6834206.html)的分类。这里就不多废话,主要是界面的设计  ![](https://user-gold-cdn.xitu.io/20 ... =498&f=gif&s=294132)


# 6、用户我的table功能的实现
  ![](https://user-gold-cdn.xitu.io/20 ... =498&f=gif&s=180010)

在这里我想说的是兄弟,在这里咱可以偷下懒了,为什么这么说呢?咱有微信UI
不bb直接上[地址https://github.com/Tencent/weui-wxss](https://github.com/Tencent/weui-wxss)
![](https://user-gold-cdn.xitu.io/20 ... 9d0b22756?imageslim)
      
同时在这方面有赞也有个,[老规矩https://github.com/youzan/zanui-weapp](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)
  }
})
```
咱具体的可以看看[文档](https://developers.weixin.qq.com ... ml#wxrelaunchobject)

###前端数据怎么得?
有时候我们并不能得到数据,写在代码里有显得太冗余,不怕试试[Easy mock](https://www.easy-mock.com/login)自己写个假数据。

###scoll-view scoll-x scoll-y
scoll-y大家都知道scoll-x其实就是横向划屏,需要注意的是图片问题。

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



  

发新帖
您需要登录后才可以回帖 登录 | 立即注册