微信小程序实战（一）之仿美丽说

时间 2019-11-30

标签微信程序实战美丽繁體版

原文原文链接

被美丽说少女粉吸引，就想着本身也写一个来练练手，正好最近在学习微信小程序。接下来让咱们分享一下个人学习历程吧！git

选题

其实纠结了很久该仿什么，看到别人都写的差很少了，本身却尚未动手，很着急，那两天一直在思考在查找，弄得本身特别烦躁，后来想明白了，其实写什么都没关系，关键在于这个过程当中学到了什么，以前以为要选一个看起来高大上的小程序，其实否则，只要本身喜欢，愿意认真的去完成它，它就是值得你去作的。好啦，咱们仍是一块儿来看看我项目吧！！！github

已实现功能

图片自动切换
页面跳转
加入购物车
商品数量的增减
商品展现
使用easy-mock获取数据

部分功能展现

tabBar切换

加入购物车

购物车界面

页面跳转

部分功能介绍

图片自动切换

<swiper class="page-header" indicator-dots="true" autoplay="true" interval="2000" duration="1000">  
    <swiper-item>  
      <image src="http://img.weiye.me/zcimgdir/album/file_59c081abe9cff.png"  mode="aspectFill" bindtap="swiperView1"/>
    </swiper-item> 
    <swiper-item>
      <image src="http://img.weiye.me/zcimgdir/album/file_59b102f038b65.png"  mode="aspectFill" bindtap="swiperView2"/>
    </swiper-item>  
</swiper>
复制代码

使用swiper标签实现图片轮播，indicator-dots为小圆点，autoplay为true是图片自动切换。微信小程序的组件真的很强大，之前写图片切换功能都好麻烦，小圆点的切换都要本身写。小程序

加入购物车

wxml微信小程序

<view class="buy-head">
    <image src="{{good.img}}" style="width:375px;height:360px;"></image>
</view>
<view class="buy-body">
    <view class="title"><text>{{good.name}}</text></view>
    <view class="price"><text>￥{{good.price}}</text></view>
    <view class="count"><text>库存：{{good.count}}</text></view>  
    <view class="freight"><text>运费：{{good.freight}}</text></view>
</view>
<view class="buy-evaluate">
    <text class="line"></text>
    <text class="text">评价</text>
    <text class="line"></text>
</view>
<view class="evaluate-content">
    <text class="text">评价（0）</text>
    <text class="line"></text>
</view>
<view class="buy-details">
    <text class="line"></text>
    <text class="text">详情</text>
    <text class="line"></text>
</view>
<view class="details-content">
        
    <text class="text">产品详情</text>
    <text class="line"></text>
    <text class="name">{{good.name}}</text>
</view>
<view class="buy-foot">
    <view class="cart" bindtap="cartView">
        <image src="../../images/cart2.png" style="width:50rpx;height:50rpx;"></image>
        <text>购物车</text>
    </view>
    <view class="shop" bindtap="shopView">
        <image src="../../images/shop.png" style="width:50rpx;height:50rpx;"></image>
        <text class="text">店铺</text>
    </view>
    <view class="addCart" bindtap="addInCart" id="{{index}}">
        <text>加入购物车</text>
    </view>
    <view class="buy" bindtap="buyBtn">
        <text>当即购买</text>
    </view> 
</view>

复制代码

js数组

addInCart: function (e) {
    console.log( app.globalData.id);
    console.log(e);
    const good = this.data.good; // 根据index，判断用户点击了哪一个商品加入购物车
    const cart = app.globalData.cartList; // 获取购物车列表
    cart.push(good); // 用户选择商品加入购物车后，将该商品加入购物车列表
    console.log(cart);
    console.log(app.globalData.cartList);
    wx.showModal({
      title: '是否加入购物车?',
      content:'数量为1',
      duration: 2000
    })
  },
复制代码

app.jsbash

globalData: {
    id:null,
    cartList:[]
  }
复制代码

这个功能其实困扰了我一下，还去求助了同窗（无奈），起初问题就是当点击一件商品时，不知道怎么让另外一个界面获取到这个信息，后来同窗告诉我要设置一个id，而且是在全局上设置id，当点击某件商品时给id赋值，这样显示商品信息的页面就能够经过这个id来展现这件商品。微信

购物车商品数量增减功能

wxml 这里引用了weui框架，使用了mvvm功能app

<view class="weui-cells">
    <block wx:for="{{goodsList}}" wx:key="index" data-index="index">
            <view class="weui-cell weui-cell_assess">
                    <view class="weui-cell__hd">
                        <icon type="success" color="#ff7100"></icon>
                    </view>
                    <view class="weui-cell__bd">
                        <image src="{{item.img}}" />
                    </view>
                    <view class="weui-cell__ft">
                        <text class="name">{{item.name}}</text>
                        <text class="price">价格：￥{{item.price}}</text>
                        <view class="count">
                            <text class="reduce" bindtap="reduceCount" id="{{index}}">-</text>
                            <text class="number">{{item.num}}</text>
                            <text class="add" bindtap="addCount" id="{{index}}">+</text>
                        </view>
                    </view>
                </view>
    </block>
</view>
复制代码

wx:for 在这里是循环数组，key设为index，这样子咱们就不用重复定义那么多的view。虽说初学者本身写原生代码会提高的快点，但是仍是要学会使用框架的，框架会给咱们带来便利，不过这个项目中wxss大部分都仍是本身一点点磨出来的，其实很痛苦，但也从中学到了不少东西。 js框架

addCount:function (e) {
    var that = this;
    console.log(e);
    const goodId = e.currentTarget.id;
    console.log(that.data.goodsList[goodId]);
    that.data.goodsList[goodId].num++;
    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].num <= 1) {
      that.data.goodsList[goodId].num = 1;
      wx.showModal({
        title: '数量小于1',
        content: '不容许操做',
        duration: 2000
      })
    } else {
      that.data.goodsList[goodId].num--;
    }
    // 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++) {
      count += goods[i].num*goods[i].price;
    }
    this.setData({
      sum: count
    })
  }

复制代码

给界面上的加减号添加了点击事件，经过获取id来判断操做的是哪件商品，进而使后台数据同步。有个重点须要说说！！ var that = this; 这就涉及到this的指向问题了，在增减函数中，this的指向会发生改变，因此须要先把它赋值给that。 this真的很重要，须要把它弄得透彻，这样子在敲代码时才不会晕头转向。xss

easy-mock获取数据

// 获取商品信息
  onLoad: function () {
    wx.request({
      url: "https://www.easy-mock.com/mock/5a27c7a27bf3ee170dc24b18/buygoods/buygoods",
      success: (res) => {
        console.log(res.data.data.goods);
        this.setData({
          goods: res.data.data.goods
        })
      }
    })
  }
  
})
复制代码

总结

经过此次的项目，学到了不少，首先就是须要静下心来，遇到不懂学会查文档，自学能力很重要，遇到bug也不要急，慢慢调试，一步一步跟踪，须要耐心和细心。在这个过程当中发现本身还有不少地方不足，查文档的能力，解决问题的能力，代码规范等等，都有待增强。作每件事都须要给本身定个目标和结束时间，否则一拖再拖，人都是有惰性的，须要逼本身一把，才能有提高。这个项目不会停下，还会不断改善，还有不少功能没有写，还有不少的知识没有学习，做为一个初学者还有很长的路要走，坚持吧，总会看到曙光~~~😁

最后附上这个项目的github地址和我的的联系方式，一块儿学习，一块儿交流，一块儿进步项目地址：https://github.com/KingJons/beautiful

微信：lj18720711441 邮箱：1161403069@qq.com

若是以为不错的话，给个小星星鼓励一下吧！😄