摘要：嗯這句話就是作為第一次做仿小程序項目的我，歷經磨難得出來的肺腑之言。作為想要走上代碼這條不歸路的程序員，心浮氣躁就是為以后整個項目給自己挖坑奠定了良好的基礎。

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

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

即點即看（實時查看詳情）

即看即買（加入購物車或者立即夠買）

即搜即看即買（精準搜索）

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


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

解決方案：

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

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文件的作用是監聽并處理小程序的生命周期函數、聲明全局變量，這樣我們就可以極為方便地去引用這個小社區同志們事先無私分享的數據。

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

最后，在每一次頁面顯示的時候，都將新添加購物車的商品信息獲取到，因為不能只獲取一次，你購買了商品發現還有一只手指沒剁掉，想再來一次，那么你就會回到頁面上繼續購買，所以放在onShow里面是極為合適的。

先看效果

    
        
            
            
        
    
    搜索


    
        
            
            {{item.title}}
            {{item.desc}}
            {{item.price}}元
        
    

 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
思路：獲取輸入框的值,將輸入框的值與商品的名稱進行匹配，這里用到了正則匹配，循環遍歷每一個信息，如果商品名稱包含了所輸入的值，就放到搜索結果數組，而后頁面循環出來，最后調取詳情模板--點擊購買~~~
總結遇到的問題，希望對你有幫助：
一、頁面跳轉的多種方法：
1、保留當前頁面，跳轉到應用內的某個頁面，也就是說可以跳轉到在當前目錄下的所有頁面
wx.navigateTo({
    url:"XXX"
})
2、關閉當前頁面，跳轉到應用內的某個頁面。
wx.redirectTo({
  url: "test?id=1"
})
3、使用組件跳轉
 點擊跳轉
4、跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面
wx.switchTab({
  url: "/index"
})
最后一種跳轉，也是踩的坑之一，在當前應用分支下要跳轉到另一個tabBar頁面應用，使用wx.navigateTo是沒有辦法實現跳轉的，使用wx.switchTab即能跳轉到另一個 tabBar 頁面，并關閉其他 tabBar下的頁面。
二、scroll-view 隱藏滾動條，讓界面感官更好
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color:transparent;
}
三、數據的設置
這是犯的最為嚴重的錯誤
"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得到的結果時字符串類型，所以這樣的細節應當注意
四、小程序代碼包大小限制問題及優化

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

有句話送給你
千里之行始于足下，絕知此事要躬行，萬事開頭難走到最后發現也不過如此。作為想要走上代碼這條不歸路的程序員，心浮氣躁就是為以后整個項目給自己挖坑奠定了良好的基礎。在實施之前，頁面的邏輯結構必須清晰，不能抱有走一步看一步的心態，工欲善其事必先利其器，還有就是數據的設置，條理不清晰在后期工作上會遇到非常多的問題，諸如數據的提取，會十分復雜
最后
碼字不易，大佬們高抬貴手點個贊，用以鼓勵本猿繼續愉快踩坑。謝謝！
代碼鏈接：https://github.com/HuanqingDe...