摘要：說(shuō)了這么多還沒(méi)說(shuō)自己做了什么，我做的是仿知乎，目的在于想通過(guò)這次學(xué)習(xí)對(duì)小程序有一個(gè)更好的認(rèn)識(shí)，這次的學(xué)習(xí)也是在前輩的鋪墊下進(jìn)一步的學(xué)習(xí)，學(xué)習(xí)到了很多前輩的想法，感覺(jué)很不錯(cuò)。

最近的十幾天中在接觸小程序，從看別人的開(kāi)源項(xiàng)目，到現(xiàn)在自己做一個(gè)項(xiàng)目，整個(gè)過(guò)程中心情是有起有落，也學(xué)到了很多東西，接下來(lái)和大家一起分享自己的學(xué)習(xí)過(guò)程，一起交流，一起學(xué)習(xí)：

在做項(xiàng)目的開(kāi)始，我們首先要做的事就是選擇主題了，無(wú)論我們是選擇仿一個(gè)項(xiàng)目，還是選擇自己原創(chuàng)一個(gè)項(xiàng)目，都要面對(duì)選擇主題，對(duì)不同層次的學(xué)習(xí)者來(lái)說(shuō)，主題的選擇的思考不同。對(duì)于自己來(lái)說(shuō)，還是一個(gè)初入小程序的新人，我就說(shuō)說(shuō)我自己現(xiàn)在對(duì)選題的看法，作為一個(gè)新手，我更多的是偏向選擇一個(gè)自己感覺(jué)容易上手的項(xiàng)目，例如先仿一個(gè)開(kāi)源項(xiàng)目，熟悉小程序的一些組件、API等，也就是熟悉小程序的一些開(kāi)發(fā)套路，不要為了做項(xiàng)目而去做項(xiàng)目，要清楚做項(xiàng)目的目的是什么，是學(xué)習(xí)，還是 完成老板任務(wù)，還是為了更多的star等等，這個(gè)得自己去思考。

說(shuō)了這么多還沒(méi)說(shuō)自己做了什么，我做的是仿知乎，目的在于想通過(guò)這次學(xué)習(xí)對(duì)小程序有一個(gè)更好的認(rèn)識(shí)，這次的學(xué)習(xí)也是在前輩的鋪墊下進(jìn)一步的學(xué)習(xí)，學(xué)習(xí)到了很多前輩的想法，感覺(jué)很不錯(cuò)。下面我和大家分享整個(gè)項(xiàng)目編寫(xiě)過(guò)程我的一些思考，遇到的問(wèn)題和看法等等。

列表式渲染數(shù)據(jù)

上拉刷新

下拉加載更多

頁(yè)面跳轉(zhuǎn)

傳參頁(yè)面跳轉(zhuǎn)

按鈕點(diǎn)擊彈窗

圖片輪播

頂部導(dǎo)航等等

底部tabBar切換

首頁(yè)切換

上拉刷新下拉加載

點(diǎn)擊事件及頁(yè)面跳轉(zhuǎn)

評(píng)論功能

上面是目前項(xiàng)目已經(jīng)實(shí)現(xiàn)的部分，其他功能在日后會(huì)繼續(xù)實(shí)現(xiàn)。

在整個(gè)項(xiàng)目開(kāi)始之前，我思考過(guò)這個(gè)問(wèn)題，我寫(xiě)這個(gè)項(xiàng)目是為什么，這是自己寫(xiě)項(xiàng)目的動(dòng)力，自己現(xiàn)在還處于學(xué)習(xí)階段，更多的是想通過(guò)這個(gè)項(xiàng)目自己能夠?qū)W到什么，編程技巧，編程思想，對(duì)小程序的熟悉程度等等，所以自己在寫(xiě)代碼的時(shí)候多去用用之前自己沒(méi)有接觸過(guò)的東西，例如commonJS中的文件引入的方法同時(shí)也使用了ES6中模塊化引入的方法等等，很多人可能不理解為什么要這么用，明明可以那樣做。對(duì)于一個(gè)學(xué)習(xí)者來(lái)說(shuō)，要盡可能的在一個(gè)項(xiàng)目中多用到不同的方法，讓自己知道有這么個(gè)東西的存在并學(xué)會(huì)掌握方便日后的項(xiàng)目中的使用，這才實(shí)現(xiàn)了做這個(gè)項(xiàng)目的價(jià)值。即對(duì)現(xiàn)在的我來(lái)說(shuō)，仿知乎這個(gè)項(xiàng)目的初心是為了學(xué)習(xí)更多自己沒(méi)有接觸到的東西，讓自己對(duì)編程有進(jìn)一步的了解。

項(xiàng)目起步

項(xiàng)目開(kāi)始的時(shí)候我首先思考的問(wèn)題就是文件排版，一個(gè)完整的項(xiàng)目應(yīng)該對(duì)文件有一個(gè)合理的結(jié)構(gòu)，需要模塊化，增強(qiáng)項(xiàng)目的可讀性，操作和以后維護(hù)起來(lái)也就更加的方便了。看看自己的文件的目錄:

上面就是自己項(xiàng)目的主要目錄了，按照自己的想法對(duì)其分解，但是還是存在著很多的問(wèn)題，編寫(xiě)的并不是很好，很多的功能的實(shí)現(xiàn)代碼沒(méi)有多帶帶的用不同的文件區(qū)分開(kāi)，都是在一個(gè)文件中編寫(xiě)，這需要進(jìn)一步的優(yōu)化，模塊化在編程中是一個(gè)挺重要的思想，可以很好的實(shí)現(xiàn)代碼的重用性，可以節(jié)約一定的開(kāi)發(fā)時(shí)間。最近也在看看前端工作流的一些東西，項(xiàng)目目錄也是分為開(kāi)發(fā)目錄和上線目錄，可以通過(guò)babel、gulp、webpack等對(duì)開(kāi)發(fā)文件的一些處理，也是挺不錯(cuò)的一種思想，對(duì)這了解的還不是很多，還在學(xué)習(xí)中，以后項(xiàng)目開(kāi)發(fā)中可以用，增加自己對(duì)企業(yè)級(jí)開(kāi)發(fā)的實(shí)踐，這也是大家可以學(xué)習(xí)的一個(gè)方向。

后臺(tái)數(shù)據(jù)方面

開(kāi)發(fā)項(xiàng)目中不可缺少的就是數(shù)據(jù)了，現(xiàn)在的項(xiàng)目中的頁(yè)面不再可能是靜態(tài)頁(yè)面了，把數(shù)據(jù)給寫(xiě)si了，這沒(méi)有任何價(jià)值，同時(shí)也增加了編程的工作量，代碼也很冗長(zhǎng)。這就需要模擬后臺(tái)數(shù)據(jù)，可以實(shí)現(xiàn)列表式渲染數(shù)據(jù)，減少了很多的工作量，這就出現(xiàn)了一個(gè)問(wèn)題，怎么模擬后臺(tái)數(shù)據(jù)，用什么去模仿數(shù)據(jù)，很多人會(huì)用第三方提供的，例如使用easy-mock，通過(guò)wx.request()來(lái)獲取數(shù)據(jù)，實(shí)現(xiàn)頁(yè)面加載數(shù)據(jù)，相信這種方式大家都會(huì)用。如果在本地寫(xiě)假數(shù)據(jù)，那我們又該用什么寫(xiě)，怎樣獲取數(shù)據(jù)，對(duì)一個(gè)初學(xué)者來(lái)說(shuō)應(yīng)該是不太清楚的（大佬除外），這個(gè)就是我們可以學(xué)習(xí)的地方，學(xué)會(huì)用不一樣的方式去做一件事，這就會(huì)實(shí)現(xiàn)做這個(gè)項(xiàng)目的目的。

說(shuō)到這里，數(shù)據(jù)應(yīng)該是放在js文件中，一般后臺(tái)數(shù)據(jù)都是JSON格式，所以放在js文件最為合理了，這時(shí)問(wèn)題又出現(xiàn)了，我們?cè)趺传@取里面的數(shù)據(jù)呢？想到這個(gè)我也不曉得怎么獲取里面的數(shù)據(jù)，看到前輩有用到require（）的方式獲取數(shù)據(jù)，想想這個(gè)是什么東西，開(kāi)發(fā)經(jīng)驗(yàn)不足，不曉得這個(gè)是什么東西，自己就會(huì)主動(dòng)的去了解這個(gè)是什么東西，原來(lái)這個(gè)是node中CommonJS中的模塊實(shí)現(xiàn)，js之前并沒(méi)有很好的實(shí)現(xiàn)模塊化編程，幾乎所有的代碼都寫(xiě)在一個(gè)文件中，CommonJS的出現(xiàn)，實(shí)現(xiàn)了JS的模塊化，同時(shí)自己也曉得了ES6中也有了屬于自己模塊化的方式了，使用import、export方式實(shí)現(xiàn)模塊化編程，感覺(jué)自己又學(xué)到了，在自己的項(xiàng)目中就都有用到這兩種方式來(lái)獲取數(shù)據(jù)：

看上面的圖片，就可以看到我兩種方式在一個(gè)項(xiàng)目中都是有使用到的，你可能沒(méi)有看懂下哦貼出來(lái)的是什么，你不需要看懂，現(xiàn)在快去看看CommonJS和ES6中模塊化的知識(shí)，你又會(huì)學(xué)到東西的！！！有人就會(huì)不理解，干嘛要在本地寫(xiě)假數(shù)據(jù)啊，這不在占存儲(chǔ)量嗎，為什么要用兩種模塊化的方式啊，一種不就行了嗎等等問(wèn)題，其實(shí)我做的不是“項(xiàng)目”，我更多的是想通過(guò)這個(gè)項(xiàng)目我能學(xué)到什么東西，這里我知道了兩種模塊化的方式，然后我可以在后面多花點(diǎn)時(shí)間對(duì)著兩種模塊化方式深入學(xué)習(xí)，這個(gè)就是我想要的結(jié)果，真正的項(xiàng)目開(kāi)發(fā)中就不要把假數(shù)據(jù)放在本地，也不要一件事情同時(shí)使用兩種方式去做，現(xiàn)在可以玩玩，哈哈哈哈哈哈哈！！！！！

引用第三方框架問(wèn)題

很多人肯定也思考過(guò)做項(xiàng)目是否使用第三方框架，還是自己寫(xiě)原生代碼，這個(gè)問(wèn)題就要看自己的想法了，我就說(shuō)說(shuō)我自己的看法，我現(xiàn)在接觸前端的時(shí)間不長(zhǎng)，很多的東西都不是很清楚，像wxss的樣式想自己去寫(xiě)，多熟悉樣式屬性，其實(shí)讓我用第三方的框架我也不是很會(huì)用，但是還是要多去用，要“會(huì)”用框架。在這個(gè)項(xiàng)目中大部分的wxss文件都是自己寫(xiě)的，到了后面有的功能的樣式，我也用了第三方框架，像小程序中常用的UI框架中有weui，這個(gè)很好用，微信團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)框架，提供了很多的組件，可以減少很多的開(kāi)發(fā)時(shí)間。

我的態(tài)度是，如果是學(xué)習(xí)的態(tài)度那就自己寫(xiě)原生代碼這樣提升我認(rèn)為是比較快的，如果是實(shí)際開(kāi)發(fā)項(xiàng)目，那就是能用框架那就用框架，不要自己造輪子。

項(xiàng)目主要功能實(shí)現(xiàn)過(guò)程中的思考

小程序開(kāi)發(fā)模式和我們傳統(tǒng)的開(kāi)發(fā)模式很不相同，傳統(tǒng)的開(kāi)發(fā)中我們一般是使用dom操作來(lái)動(dòng)態(tài)的改變頁(yè)面，讓我感覺(jué)的是一種查找的方式，使用dom操作，找到某個(gè)元素然后再改變?cè)撛氐男袨椋瑥亩淖兞隧?yè)面的狀態(tài)，而小程序的開(kāi)發(fā)模式是MVVM，數(shù)據(jù)綁定頁(yè)面，數(shù)據(jù)的改變從而使得頁(yè)面狀態(tài)發(fā)生改變，這個(gè)傳統(tǒng)的開(kāi)發(fā)很不相同，這個(gè)在小程序開(kāi)發(fā)很容易踩坑，自己在這個(gè)項(xiàng)目中就踩到過(guò)這個(gè)坑，要理解好MVVM模式。

1.按鈕點(diǎn)擊彈窗事件

        
     
       
       
       
       
           
       
     
     
     
        屏蔽這個(gè)問(wèn)題
        舉報(bào)
     
  

var util = require("../../utils/util.js");const app = getApp();
Page({ 
    // 頁(yè)面初始數(shù)據(jù)
    data: {
    //  數(shù)據(jù)源feed: [],
    //  更多按鈕 觸發(fā)彈窗
    showModalStatus: false ,
    },
    // 彈窗觸發(fā)事件
    powerDrawer: function (e) { 
      // 獲取數(shù)據(jù)源
      let feed = this.data.feed;
    // 得到按鈕點(diǎn)擊時(shí)設(shè)置的數(shù)據(jù)值 
        data-answerId
        let answer_id = e.currentTarget.dataset.answerid;
        // 得到按鈕點(diǎn)擊時(shí)設(shè)置的數(shù)據(jù)值 data-statu
        let currentStatu = e.currentTarget.dataset.statu;
        // 遍歷數(shù)據(jù)源
        for(let key of feed)
        {
           if(key.answer_id === answer_id){      
               key.isSelected = true;
            }
        }
        this.setData({
           feed:feed,
        });
        // 彈出窗
        this.util(currentStatu);}
    })

//數(shù)據(jù)源模板
var next = {
  "data": [
        {
          "topic": "教育",         
          "answer_id": 1,
          ...
        },
        {
           "topic": "教育",
           "answer_id": 2,
           ...
        },
        {
           ...
        },
        ...
    ]
}

上面就是點(diǎn)擊按鈕彈窗事件的主要代碼，因?yàn)樽龅氖橇斜硎綌?shù)據(jù)渲染，基本頁(yè)面的布局只寫(xiě)了一個(gè)，通過(guò)js中的數(shù)據(jù)綁定，可以將數(shù)據(jù)源中的所有的數(shù)據(jù)都可以導(dǎo)入頁(yè)面中，這樣可以減少很多的工作量。現(xiàn)在就和大家分享我在寫(xiě)這個(gè)觸發(fā)事件遇到的問(wèn)題，大家看下面的圖就清楚問(wèn)題在哪里了：

看到圖就曉得了問(wèn)題來(lái)了，多帶帶點(diǎn)擊一個(gè)，其他框也觸發(fā)了彈窗事件，這是做列表式渲染數(shù)據(jù)都容易遇到的問(wèn)題，遇到的坑，為什么會(huì)出現(xiàn)這種問(wèn)題呢，原因很簡(jiǎn)單，因?yàn)樵趯?xiě)頁(yè)面布局的時(shí)候，我們是通過(guò)動(dòng)態(tài)填充數(shù)據(jù)的，基本的樣式只寫(xiě)了一個(gè)，每一個(gè)數(shù)據(jù)都有bindtap觸發(fā)事件

起初遇到這個(gè)問(wèn)題，我想的辦法是，數(shù)據(jù)源中的數(shù)據(jù)是寫(xiě)在數(shù)組中，每一數(shù)據(jù)都有自己固定的"answer_id" ，然后我在觸發(fā)彈窗時(shí)填入一個(gè)數(shù)據(jù)data-answerId="{{item.answer_id}}"，設(shè)置的值也為answer_id，我就想通過(guò)查找的方式，找到每一個(gè)數(shù)據(jù)的answer_id再和觸發(fā)按鈕時(shí)的設(shè)置的數(shù)據(jù)進(jìn)行對(duì)比，如果值一樣，就彈出其自身的窗，然而并沒(méi)有解決問(wèn)題，下面是最初設(shè)計(jì)的代碼：

這就是想通過(guò)查找的方式來(lái)解決問(wèn)題，沒(méi)有做到，原因是你每次查找的值和你觸發(fā)時(shí)設(shè)置的值都是一樣的，所以是解決不了問(wèn)題的，這種做法就還停留在傳統(tǒng)的開(kāi)發(fā)設(shè)計(jì)，如dom操作，不斷的查找，找到某個(gè)值，然后再改變它。單純的使用這種做法在小程序有些難度來(lái)解決問(wèn)題了，其實(shí)要正確的理解MVVM模式，這個(gè)問(wèn)題就很好解決了，數(shù)據(jù)綁定頁(yè)面，數(shù)據(jù)改版頁(yè)面的狀態(tài)。

解決這個(gè)問(wèn)題的方法就是為每一個(gè)數(shù)據(jù)添加一個(gè)布爾值，觸發(fā)自身的按鈕事件時(shí)其布爾值為true，其他的數(shù)據(jù)的布爾值為false

這樣的寫(xiě)法就很好的解決了問(wèn)題，查找操作和數(shù)據(jù)綁定操作一起解決問(wèn)題。

2.評(píng)論功能

   
       評(píng)論
    
    
        
           
             
           
            
               
                    {{item.feed_source_name}}
               
               
                    {{item.content}}
               
               
               
                    點(diǎn)贊 {{item.good_num}}
                
               
                     回復(fù){{item.comment_num}}
               
               
                      {{item.time}}
                
          
      
     
   
  
 
     
        
     
      
          發(fā)布
       

var util = require("../../utils/util.js");
let myComment = "";
Page({
   data: {     
        comment: [],    
        content: "", 
        },
    onTextChanged: function(e){
     //獲取文本框的值，即輸入的評(píng)論的內(nèi)容
      myComment = e.detail.value; 
     },
    onSendClicked: function(e){
        //獲取觸發(fā)時(shí)設(shè)置數(shù)據(jù)的值
        let question_id = e.target.dataset.questionid;
        var that = this,conArr = [];
        //定時(shí)器，100ms后觸發(fā)
        setTimeout(function(){
            //將評(píng)論的基本信息存入數(shù)組
             if(myComment.length > 0){
                 conArr.push({     
                 "feed_source_img": "../../images/icon9.jpeg",     
                 "feed_source_name": "zero",     
                 "time": util.formatTime(new Date()),     
                 "good_num": "0",    
                  "comment_num": "0",     
                  "content": myComment     
      })
        //從數(shù)據(jù)源中獲取評(píng)論頁(yè)面的所有數(shù)據(jù)
        var feed = util.getData2();
        let comment_data = feed.comment;
        //找到指定頁(yè)面的評(píng)論數(shù)據(jù)
        const comment = comment_data.filter((comment) => {
           return question_id == comment.question_id;})
            //將添加的評(píng)論的基本信息數(shù)組conArr合并到數(shù)據(jù)源中評(píng)論數(shù)據(jù)的數(shù)組comment[0].ordinaryComment中
            var commentContent = comment[0].ordinaryComment.concat(conArr);
            //將新加入的conArr數(shù)組放在源數(shù)組中的第一位，便于觸發(fā)提交評(píng)論時(shí)評(píng)論內(nèi)容出現(xiàn)在頁(yè)面的第一欄
            var newCommentContent = commentContent.reverse();
            var newComment = comment[0];
            comment[0].ordinaryComment = newCommentContent;
            that.setData({
                comment: comment,
                content: ""
            })
        }
       },100)
    },
})

上面就是評(píng)論功能的主要代碼，要實(shí)現(xiàn)這個(gè)功能主要解決的問(wèn)題是找到指定問(wèn)題的評(píng)論頁(yè)面，通過(guò)Array.filter()方法可以找到指定問(wèn)題的評(píng)論頁(yè)面，然后又解決的問(wèn)題是將填寫(xiě)的評(píng)論信息加到數(shù)據(jù)源中評(píng)論數(shù)據(jù)的數(shù)組comment[0].ordinaryComment中，通過(guò)Array.concat()方法可以實(shí)現(xiàn)，最后就是將新的數(shù)據(jù)展示到頁(yè)面上，更新頁(yè)面狀態(tài)，其中還有一個(gè)地方主要注意：如何將輸入的評(píng)論信息，顯示在評(píng)論欄的第一欄，Array.reverse()可以解決這個(gè)問(wèn)題，這樣就比較好的實(shí)現(xiàn)了這個(gè)功能。

3.其他功能總結(jié)
像比較常見(jiàn)的功能還有首頁(yè)頂部的tab切換，可以使用swiper-item組件和bindtap進(jìn)行事件綁定，可以實(shí)現(xiàn)這種tab切換的效果，下拉刷新的可以使用scroll-view組件，組件里面提供了很多的屬性可以實(shí)現(xiàn)很多的功能，還有基本的彈窗功能的組件有wx.showToast()、wx.showActionSheet（OBJECT）、wx.showModal(OBJECT)等等，這些組件都可以看官方文檔學(xué)習(xí)，學(xué)習(xí)利用基本組件。

小程序開(kāi)發(fā)文檔 學(xué)會(huì)使用開(kāi)發(fā)文檔，多看開(kāi)發(fā)文檔，熟悉組件，避免自己不必要的麻煩提供

commonJS學(xué)習(xí) 比較強(qiáng)的模塊化的學(xué)習(xí)

ES6模塊化 屬于自己的模塊化開(kāi)發(fā)

iconfont @font-face 學(xué)會(huì)使用CSS3 font-size屬性 頁(yè)面圖片不再是png格式了，值得學(xué)習(xí)

weui 學(xué)會(huì)使用第三方框架，小程序需要學(xué)習(xí)weui

小程序開(kāi)發(fā)者工具 小程序開(kāi)發(fā)工具

這次的學(xué)習(xí)學(xué)到了挺多東西的，要想清除做這個(gè)項(xiàng)目的目的是什么，這個(gè)項(xiàng)目我的目的就是為了學(xué)習(xí)，曉得了自己缺少什么，什么需要去加強(qiáng)學(xué)習(xí)的，在整個(gè)項(xiàng)目的完成過(guò)程中，其實(shí)感覺(jué)到了自己的功利心，希望自己快點(diǎn)把項(xiàng)目做完，這個(gè)在學(xué)習(xí)的過(guò)程中是很不好的，忘記了自己做項(xiàng)目的初心，作為一個(gè)學(xué)習(xí)者，我們應(yīng)該多想想做這個(gè)項(xiàng)目能給自己帶來(lái)什么，我可以通過(guò)行動(dòng)具體的給自己帶來(lái)哪些幫助，我們應(yīng)該要實(shí)現(xiàn)這個(gè)項(xiàng)目對(duì)自己的最大效益，這才是這個(gè)項(xiàng)目的存在價(jià)值，要對(duì)得起這個(gè)項(xiàng)目，不要僅僅趨于我做了這個(gè)項(xiàng)目，做好了，我不管了，需要不忘初心的學(xué)習(xí)，做一個(gè)有思想的程序猿！！！！！

最后附上這個(gè)項(xiàng)目的github地址和個(gè)人的聯(lián)系方式，我們可以一起交流學(xué)習(xí)，共同進(jìn)步
項(xiàng)目地址：https://github.com/DengSongso...
個(gè)人郵箱：DengSongsong1010@163.com
wx: dss1000010
如果覺(jué)得這篇文章和項(xiàng)目有好處，歡迎star哦，謝謝大家！！！