说在前面

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

踏出第一步吧

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

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

小程序的轮播图实现真是太方便了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里遍历。

2、搜索方法

如何实现小程序的搜索呢，我在这里使用的是正则遍历搜索，在这里就遇到了一个坑
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[i].title)){tem.push(this.data.goods[i]);}}this.setData({goods : tem })
},

这样我们就实现了搜索匹配。

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.listvar allNum = 0for (var i = 0; i < newList.length; i++) {if (newList[i].select == "success") {allNum += parseInt(newList[i].num)}}parseIntconsole.log(allNum)that.setData({num: allNum})},//计算金额方法count: function () {var that = this//思路和上面一致//选中的订单，数量*价格加起来var newList = that.data.listvar newCount = 0for (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.selectvar newList = that.data.listif (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地址

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