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

?????關(guān)于小程序，在這里有一句話送給正準(zhǔn)備閱讀的你-世界上本沒(méi)有坑，路走的多了就有了；世界上本沒(méi)有路，坑填的多了就有了。嗯~~~這句話就是作為第一次做仿小程序項(xiàng)目的我，歷經(jīng)‘磨難’得出來(lái)的肺腑之言。好了，不多說(shuō)，進(jìn)入正題。。

這一次分享，對(duì)象是商城類小程序-仿小米商城Lite
那商城類小程序主要的功能又是什么呢？其實(shí)也就這幾個(gè)點(diǎn)

即點(diǎn)即看（實(shí)時(shí)查看詳情）

即看即買（加入購(gòu)物車或者立即夠買）

即搜即看即買（精準(zhǔn)搜索）

???????商城類的小程序，因?yàn)槠湫再|(zhì)為網(wǎng)上購(gòu)物平臺(tái)，必然羅列大量且繁雜的商品，就形成了多種分類，層層嵌套的結(jié)構(gòu)。如何即點(diǎn)即看?這是我開始想要仿寫這個(gè)小程序遇到的第一個(gè)大問(wèn)題，難道每一個(gè)商品一個(gè)一個(gè)給它寫一個(gè)相應(yīng)的詳情頁(yè)面嗎？
來(lái)看一下頁(yè)面


首先，一個(gè)一個(gè)給它寫一個(gè)相應(yīng)的詳情頁(yè)面十分耗時(shí)耗力，簡(jiǎn)潔的代碼是每一個(gè)程序員追求有的品質(zhì)；其次，小程序代碼包大小限制了你不能過(guò)多地重復(fù)代碼。

解決方案：

設(shè)計(jì)一個(gè)詳情頁(yè)模板（如效果過(guò)圖）具體的頁(yè)面wxml代碼就不寫了，（后面會(huì)給出源碼鏈接）我們主要分析js內(nèi)的數(shù)據(jù)傳輸：

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:[]
  }

每次點(diǎn)擊，獲取相應(yīng)的數(shù)據(jù)值，將獲取的值放入app.globalData里的事先設(shè)置好的空數(shù)組內(nèi)（detail），注意，這里是直接將獲取的值賦給detail，這樣就可以保證每一次點(diǎn)擊的商品將信息放入detail，而detail內(nèi)的數(shù)據(jù)不會(huì)保存上一次獲取的商品詳情信息，這樣就做到了數(shù)據(jù)的實(shí)時(shí)更新，這一點(diǎn)很重！！因?yàn)樵谠斍轫?yè)獲取detail內(nèi)數(shù)據(jù)時(shí)保證了獲取的時(shí)最新的數(shù)據(jù)，從而實(shí)現(xiàn)了即點(diǎn)即看的效果。

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

這樣就完成了數(shù)據(jù)的傳遞

效果圖：

同樣的，在詳情頁(yè)實(shí)時(shí)獲取用戶點(diǎn)擊查看的信息之后當(dāng)然就要實(shí)現(xiàn)購(gòu)物的功能，不然整個(gè)小程序就沒(méi)有任何意義。

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

同樣的，我們?cè)?app.globalData內(nèi)設(shè)置一個(gè)空數(shù)組tocartMsg，這里解釋一下為什么要放到globalData里面，原因就是app.js文件的作用是監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量，這樣我們就可以極為方便地去引用這個(gè)小社區(qū)同志們事先無(wú)私分享的數(shù)據(jù)。

 /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () {
    this.setData({
      carMsg:[...app.globalData.tocartMsg]
      
    })
    console.log(this.data.carMsg)
  }

最后，在每一次頁(yè)面顯示的時(shí)候，都將新添加購(gòu)物車的商品信息獲取到，因?yàn)椴荒苤猾@取一次，你購(gòu)買了商品發(fā)現(xiàn)還有一只手指沒(méi)剁掉，想再來(lái)一次，那么你就會(huì)回到頁(yè)面上繼續(xù)購(gòu)買，所以放在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
思路：獲取輸入框的值,將輸入框的值與商品的名稱進(jìn)行匹配，這里用到了正則匹配，循環(huán)遍歷每一個(gè)信息，如果商品名稱包含了所輸入的值，就放到搜索結(jié)果數(shù)組，而后頁(yè)面循環(huán)出來(lái)，最后調(diào)取詳情模板--點(diǎn)擊購(gòu)買~~~
總結(jié)遇到的問(wèn)題，希望對(duì)你有幫助：
一、頁(yè)面跳轉(zhuǎn)的多種方法：
1、保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，也就是說(shuō)可以跳轉(zhuǎn)到在當(dāng)前目錄下的所有頁(yè)面
wx.navigateTo({
    url:"XXX"
})
2、關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
wx.redirectTo({
  url: "test?id=1"
})
3、使用組件跳轉(zhuǎn)
 點(diǎn)擊跳轉(zhuǎn)
4、跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面
wx.switchTab({
  url: "/index"
})
最后一種跳轉(zhuǎn)，也是踩的坑之一，在當(dāng)前應(yīng)用分支下要跳轉(zhuǎn)到另一個(gè)tabBar頁(yè)面應(yīng)用，使用wx.navigateTo是沒(méi)有辦法實(shí)現(xiàn)跳轉(zhuǎn)的，使用wx.switchTab即能跳轉(zhuǎn)到另一個(gè) tabBar 頁(yè)面，并關(guān)閉其他 tabBar下的頁(yè)面。
二、scroll-view 隱藏滾動(dòng)條，讓界面感官更好
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color:transparent;
}
三、數(shù)據(jù)的設(shè)置
這是犯的最為嚴(yán)重的錯(cuò)誤
"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
    });
  }
數(shù)據(jù)的設(shè)定時(shí)，雙引號(hào)顯得非常重要，boolea值加上雙引號(hào)顯然會(huì)報(bào)錯(cuò)，而數(shù)值類型加上雙引號(hào)，在計(jì)算價(jià)格的時(shí)候，carMsg[i].price得到的結(jié)果時(shí)字符串類型，所以這樣的細(xì)節(jié)應(yīng)當(dāng)注意
四、小程序代碼包大小限制問(wèn)題及優(yōu)化

2018年1月15號(hào)微信公開課PRO上小程序產(chǎn)品經(jīng)理angusdu提到，為了保證小程序頁(yè)面的首次加載時(shí)間控制在2秒以內(nèi)，且打開不出現(xiàn)白頁(yè)加載，小程序代碼包最理想的情況是：不超過(guò)1M！又有說(shuō)現(xiàn)在是2M，但是我遇到的問(wèn)題是提示不得超過(guò)1M！超過(guò)限制將無(wú)法上傳。
原因：代碼包過(guò)大組要是本地圖片太多，因?yàn)樯坛堑男〕绦蛐枰罅康膱D片向用戶進(jìn)行展示，所以占據(jù)代碼包很大一部分空間，這就要求盡量不要把圖片放到本地，或者將圖片進(jìn)行壓縮
優(yōu)化：1.盡量將圖片、音頻、數(shù)據(jù)、甚至頁(yè)面搬至服務(wù)端，需要時(shí)再通過(guò)網(wǎng)絡(luò)載入。將非核心非必要的內(nèi)容移出代碼包可以大幅度釋放代碼包空間。2.壓縮。這也是上面提到的最大限度的使用模板，簡(jiǎn)潔代碼

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