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

簡單介紹：

這篇文章是我在寫小程序中對於我初學者而言，讓我以爲代碼是個神奇的東西。實現的功能很少，比較簡單，我以爲初學 小程序的同窗還能看一哈，大佬是能夠一眼瞟全的哦。接下來就來分享分享我在着手這個項目我以爲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連接：點擊詳情