一个小小小程序-仿小米商城

简单介绍：

这篇文章是我在写小程序中对于我初学者而言，让我以为代码是个神奇的东西。实现的功能很少，比较简单，我以为初学 小程序的同窗还能看一哈，大佬是能够一眼瞟全的哦。接下来就来分享分享我在着手这个项目我以为Nice的点...

项目截图

前言

所需工具

• 微信开发者工具
• Vscode
• 微信小程序官方文档
• Easy Mock 很是很差意思，我在项目中全部的数据都写在Js中，建议你们用Easy Mock创建项目中所需数据
• 官方小米商城移动端

功能实现分享

分享一 ： 轮播图的实现

功能描述 ：swiper组件里面只能放置于swiper-item,敲黑板此处，在Swiper中滑动的图片有多张，因此{{imgUrls}}在数据源中应是数组类型，用for循环出来数组里的每一项(item)，也就是里面的每一张图片。 在商品详情页面渲染页面的时候，我就写蒙了，忘记这个数组，图片没有出来，也没注意到还觉得是图片错了。特此给提个心眼 。关于设置轮播图的属性(指示点，间隔时间...)官网文档很是详细了解更多

代码详情：

<!-- swiper -->
  <view class="header">
    <swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
      <block wx:for="{{imgUrls}}" wx:key="{{index}}" style="heigh:{{heigh}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" mode="aspectFill" style='width:100%' />
        </swiper-item>
      </block>
    </swiper>
  </view>
复制代码

分享二：跳转到相应页面的渲染

功能描述：点击商品跳转到其对应的商品详情页面，这个你须要一个标识去匹配商品和其对应的商品详情，而id正是扮演着这个角色。经过匹配到了id以后，一部分同窗都会想到的是"我点击不一样的商品会跳转到其对应的商品详情页面，我只要用一个页面 而后用wx:for渲染出来". 注意的是： 在这里你是经过抛出商品的id，而商品详情页面接收这个id，只要获取这个匹配的id值对应的数据，跟简单的写页面同样去数据源获取。 这时，若是用wx:for去渲染，则就把你定的那个数组里的每一条数据都会渲染在页面上

代码详情：

//  商品页面传出的id
 toShop:function(e){
  let that = this 
   console.log(e)
   const index = e.currentTarget.dataset.index
  //  const id = e.currentTarget.dataset.id
   wx.navigateTo({
     url:'../goodsDetails/goodsDetails?id='+ that.data.recommand[index].id
   })
 } 
复制代码

// 接收商品页面的id 
  onLoad: function (options) {
    const id = options.id;
      let that  = this;
      console.log(options)
      that.setData({
        id:options.id
      })   
      that.found(id)
  },
  found(id){
    let found = goodsDataList.filter (item => {
      return item.id == id
    })
    console.log(found)
    this.setData({
      imgUrls:found[0].imgUrls,
      brief:found[0].brief,
      name:found[0].name,
      now_price:found[0].now_price,
      old_price:found[0].old_price,
      details_img:found[0].details_param,
      param_img:found[0].param_img,
      txt_content:found[0].txt_content
    })
  },
复制代码

分享三：加入购物车

功能描述: 加入购物车我用的是本地缓存数据，购物车所有功能没有写的完整。wx.setStorageSync是微信小程序官方文档自带的数据存储方法 了解更多

代码详情：

certain () {
    wx.navigateBack({
      delta: 1
    });
    wx.showToast({
      title: '加入成功',
      icon: 'success',
      duration: 2000
    })
    let goods=wx.getStorageSync(
      '商品')||[]
    let obj = {
       selectPic:this.data.selectPic,
       color:this.data.color,
       num:this.data.num,
       txt_content:this.data.txt_content,
       now_price:this.data.now_price
    }
    // 本地缓存数据
      goods.push(obj)
      wx.setStorage({
        key:"商品",
        data:goods
      })
      // 清除本地数据
      // wx.clearStorageSync('商品');
  },
复制代码

分享四： 组件的简单使用

功能详情： 在这个页面的中间部分(个人订单、会员中心..)使用的组件，在组件wxss中不该使用ID选择器、属性选择器和标签名选择器，组件就比如你本身造出一块板砖，而后放置于你须要搭建的建筑里面。自定义组件要在自定义的目录json里定义:{ "component": true}。自定义组件就和写Page页面是同样的，只是做为一个组件能够单独放于页面中实现

<!-- 自定义组件 -->
      <view class="list_orders">
        <image class="img" src="{{img}}" />
        <text class="text">{{order}}</text>
      </view>
  
复制代码

<!-在页面中引入组件--->
  <view class="content-list">
      <usercomp img="../../images/order.png" order='个人订单' setting-img="../../images/set.png" setting-text='设置' ></usercomp>
      <usercomp img="../../images/vip.png" order='会员中心'></usercomp>
      <usercomp img="../../images/discount.png"order='个人优惠券'></usercomp>
      <usercomp img="../../images/F.png"order='个人F码'></usercomp>
  </view>

复制代码

总结：

在写这个小程序过程当中，刚开始我一个个切页面时候头皮发麻，css实现是真的厉害，我是真的深深的以为这个世界都要是代码组成的，这里声明一下，我是初次写一个小小小项目，不完善还请你们一块儿分享，里面的数据是我写在Js里面的，找的是一些我在小米商城喜欢的图片。而后比较不严谨的地方，在css实现就是看着差很少，但仔细对比仍是有出入的。就在写的时候你才会发现有很东西你哪里不知道的，跟你看文档不同，写着写着你就会去查各类东西，包括问边上大神，这就是一个会让你在学习的路上逐渐给本身信心的东西，这是我以为我一个前端初学者真的去各类看文档，各类看人家写的大的小的项目。一点一点捋羊毛同样

查看源代码贴上github连接：点击详情