小程序之仿小米商城Lite

時間 2019-11-10

標籤程序小米商城 lite 简体版

原文原文鏈接

前言

關於小程序，在這裏有一句話送給正準備閱讀的你-世界上本沒有坑，路走的多了就有了；世界上本沒有路，坑填的多了就有了。嗯~~~這句話就是做爲第一次作仿小程序項目的我，歷經‘磨難’得出來的肺腑之言。好了，很少說，進入正題。。git

寫什麼

這一次分享，對象是商城類小程序-仿小米商城Lite
那商城類小程序主要的功能又是什麼呢？其實也就這幾個點程序員

即點即看（實時查看詳情）
即看即買（加入購物車或者當即夠買）
即搜即看即買（精準搜索）

詳解：

一：實時查看詳情

商城類的小程序，由於其性質爲網上購物平臺，必然羅列大量且繁雜的商品，就造成了多種分類，層層嵌套的結構。如何即點即看?這是我開始想要仿寫這個小程序遇到的第一個大問題，難道每個商品一個一個給它寫一個相應的詳情頁面嗎？
來看一下頁面

首先，一個一個給它寫一個相應的詳情頁面十分耗時耗力，簡潔的代碼是每個程序員追求有的品質；其次，小程序代碼包大小限制了你不能過多地重複代碼。github

解決方案：

設計一個詳情頁模板（如效果過圖）具體的頁面wxml代碼就不寫了，（後面會給出源碼連接）咱們主要分析js內的數據傳輸：web

回到商品頁：

toDetail:function(e){
    var index=e.currentTarget.dataset.index;
    // console.log(index) 
    var detail=this.data.goodsList[index];
    // console.log(detail)
    app.globalData.detail=detail;
    //console.log(app.globalData.detail)
    this.setData({
      detail:detail
    })
    wx.navigateTo({
      url: '../../buy/buy',
    })
  }

globalData: {
    userInfo:null,
    detail:[],
    tocartMsg:[]
  }

每次點擊，獲取相應的數據值，將獲取的值放入app.globalData裏的事先設置好的空數組內（detail），注意，這裏是直接將獲取的值賦給detail，這樣就能夠保證每一次點擊的商品將信息放入detail，而detail內的數據不會保存上一次獲取的商品詳情信息，這樣就作到了數據的實時更新，這一點很重！！由於在詳情頁獲取detail內數據時保證了獲取的時最新的數據，從而實現了即點即看的效果。小程序

接下來詳情頁模板獲取數據

onLoad: function (options) {
    // let id=options.currentTarget.dataset.id;
  
   this.setData({
     goodds:app.globalData.detail
   })
  //  console.log(this.data.goodds)

這樣就完成了數據的傳遞數組

二：加入購物車

效果圖：微信

一樣的，在詳情頁實時獲取用戶點擊查看的信息以後固然就要實現購物的功能，否則整個小程序就沒有任何意義。網絡

tocart:function(){
    this.setData({
      toCartMsg:this.data.goodds
    })
    app.globalData.tocartMsg.push(this.data.toCartMsg);
    wx.showToast({
      title: '已加入購物車',
      icon: 'success',
      duration: 2000
    })
  }

一樣的，咱們在 app.globalData內設置一個空數組tocartMsg，這裏解釋一下爲何要放到globalData裏面，緣由就是app.js文件的做用是監聽並處理小程序的生命週期函數、聲明全局變量，這樣咱們就能夠極爲方便地去引用這個小社區同志們事先無私分享的數據。app

/**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    this.setData({
      carMsg:[...app.globalData.tocartMsg]
      
    })
    console.log(this.data.carMsg)
  }

最後，在每一次頁面顯示的時候，都將新添加購物車的商品信息獲取到，由於不能只獲取一次，你購買了商品發現還有一隻手指沒剁掉，想再來一次，那麼你就會回到頁面上繼續購買，因此放在onShow裏面是極爲合適的。函數

三：精準搜索

先看效果

<view class="weui-search-bar" id="searchBar">
    <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
            <input type="text" bindinput="input" class="weui-search-bar__input" placeholder="搜索商品" />
        </view>
    </view>
    <view class="text" bindtap="search" disbaled>搜索</view>
</view>
<view class="result">
    <view class="" bindtap="toDetail" wx:for="{{newList}}" wx:key="{{id}}" data-index="{{index}}">
        <view class="list">
            <image src="{{item.image}}" />
            <text class="title">{{item.title}}</text>
            <text class="desc">{{item.desc}}</text>
            <text class="price">{{item.price}}元</text>
        </view>
    </view>
</view>

input:function(e){
      var inputValue=e.detail.value;
      // console.log(inputValue)
      this.setData({
        inputValue
      })
  },
  search:function(e){
    var inputValue=this.data.inputValue;
    //  console.log(inputValue);
    var goods=this.data.goodsList;
    //  console.log(goods);
    // var inputValue1=this.data.inputValue;
    var re=new RegExp(inputValue);
    var temp = [];
    if(inputValue==''){
      return false
    }else{
      for(let i=0;i<goods.length;i++){
        console.log(re.test(goods[i].title))
        if(re.test(goods[i].title)){
          temp.push(goods[i]);
        }
      }
    }
    // console.log(temp);
    this.setData({
      newList:temp
    })
    console.log(this.data.newList)
  },
  toDetail:function(e){
    var index=e.currentTarget.dataset.index;
    // console.log(index) 
    var detail=this.data.newList[index];
    // console.log(detail)
    app.globalData.detail=detail;
    // console.log(app.globalData.detail)
    wx.navigateTo({
      url: '../../buy/buy',
    })
  }

思路：獲取輸入框的值,將輸入框的值與商品的名稱進行匹配，這裏用到了正則匹配，循環遍歷每個信息，若是商品名稱包含了所輸入的值，就放到搜索結果數組，然後頁面循環出來，最後調取詳情模板--點擊購買~~~

總結遇到的問題，但願對你有幫助：

1、頁面跳轉的多種方法：

一、保留當前頁面，跳轉到應用內的某個頁面，也就是說能夠跳轉到在當前目錄下的全部頁面

wx.navigateTo({
    url:'XXX'
})

二、關閉當前頁面，跳轉到應用內的某個頁面。

wx.redirectTo({
  url: 'test?id=1'
})

三、使用組件跳轉

<navigator url='XXX'>點擊跳轉</navigator>

四、跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面

wx.switchTab({
  url: '/index'
})

最後一種跳轉，也是踩的坑之一，在當前應用分支下要跳轉到另外一個tabBar頁面應用，使用wx.navigateTo是沒有辦法實現跳轉的，使用wx.switchTab即能跳轉到另外一個 tabBar 頁面，並關閉其餘 tabBar下的頁面。

2、scroll-view 隱藏滾動條，讓界面感官更好

::-webkit-scrollbar{
    width: 0;
    height: 0;
    color:transparent;
}

3、數據的設置

這是犯的最爲嚴重的錯誤

"desc": "千元全面屏",
      "url": "",
      "price": 1799,
      "selected": false

getTotalPrice: function (e) {
    let carMsg = this.data.carMsg;
    let total = 0;
    for (let i = 0; i < carMsg.length; i++) {
      if (carMsg[i].selected) {
        total+=carMsg[i].price;
      }
    }
    // total=total.toFixed(1)
    this.setData({
      totalPrice: total
    });
  }

數據的設定時，雙引號顯得很是重要，boolea值加上雙引號顯然會報錯，而數值類型加上雙引號，在計算價格的時候，carMsg[i].price獲得的結果時字符串類型，因此這樣的細節應當注意

4、小程序代碼包大小限制問題及優化

2018年1月15號微信公開課PRO上小程序產品經理angusdu提到，爲了保證小程序頁面的首次加載時間控制在2秒之內，且打開不出現白頁加載，小程序代碼包最理想的狀況是：不超過1M！又有說如今是2M，可是我遇到的問題是提示不得超過1M！超過限制將沒法上傳。
緣由：代碼包過大組要是本地圖片太多，由於商城的小程序須要大量的圖片向用戶進行展現，因此佔據代碼包很大一部分空間，這就要求儘可能不要把圖片放到本地，或者將圖片進行壓縮
優化：1.儘可能將圖片、音頻、數據、甚至頁面搬至服務端，須要時再經過網絡載入。將非核心非必要的內容移出代碼包能夠大幅度釋放代碼包空間。2.壓縮。這也是上面提到的最大限度的使用模板，簡潔代碼

有句話送給你

千里之行始於足下，絕知此事要躬行，萬事開頭難走到最後發現也不過如此。做爲想要走上代碼這條不歸路的程序員，心浮氣躁就是爲之後整個項目給本身挖坑奠基了良好的基礎。在實施以前，頁面的邏輯結構必須清晰，不能抱有走一步看一步的心態，工欲善其事必先利其器，還有就是數據的設置，條理不清晰在後期工做上會遇到很是多的問題，諸如數據的提取，會十分複雜