接著上一篇

• 下拉重新整理、無限載入
• 評論顯示
• 收藏功能

　說明下為什麼不做收藏功能，其實是設計到使用者登陸功能暫時都不做了，包括髮表評論。原因：

微信小程式登陸需要有appid，appid需要公司資質去申請，每個公司申請的數量有限制（好像是30個），每個身份證也只能最多繫結5個。
雖然網上流傳著個人即使申請失敗也可以獲得appid，但是就此失去了一次繫結機會，個人建議還是不要浪費。所以小程式中的登陸、評論、收藏功能此處暫時不做。

重新整理優化

　微信小程式原生提供了下拉重新整理和載入更多事件，這一點還是比較人性化的。
　首先需要在配置檔案，即頁面.json，如index.json新增允許下拉重新整理：

{
    "enablePullDownRefresh":true
}

然後在js程式碼中新增響應事件：

//下拉重新整理
  onPullDownRefresh: function(){
    this.loadArticles(sectionData[currentSectionIndex]['section_id'],false)
  },
  //載入更多
  onReachBottom: function () {
    this.loadArticles(sectionData[currentSectionIndex]['section_id'],true)
  }

注意我把載入更多和下拉重新整理所用的請求方法寫成了一個函式：

loadArticles: function(section_id,ifLoadMore) //分類id、是否是載入更多

這個ifLoadMore起區分的作用，如果是false，則將獲得的資料直接替換；如果是true，則將獲得的資料追加在原有的資料後面。

          if(ifLoadMore){
            //載入更多
            if(articleData){
              sectionData[currentSectionIndex]['articles'] = sectionData[currentSectionIndex]['articles'
 
].concat(articleData)//追加
            }else{
              wx.showToast({
                title: '暫無更多內容',
                icon: 'loading',
                duration: 2000
              })
            }   
          }else{
            sectionData[currentSectionIndex]['articles'] = articleData//重新整理
          }

　這樣就不需要分開寫2種請求程式碼了。當然我們需要新增一個loading動畫，有一點我不明白的是微信把loading動畫當初了元件...只能強行用一個hidden引數來改變它的隱藏和展示狀態，太坑了。
　有同學說不是有showToast嗎？是的，showToast最多可以顯示10秒，雖然理論上是夠了，但是這樣總是很蛋疼，並不能真實地去控制顯示因此。

評論功能

　雖然不打算做發表評論功能了，但是佈局我還是加了上去，效果如圖：

　評論列表還是用for迴圈渲染每個item即可，當然這邊我添加了一個小細節，當沒有評論的時候會顯示一個空提示：

　只需要一個簡單的if判斷就可以啦：

    <view wx:if="{{commentList}}">
        <view class="comment" wx:for="{{commentList}}">
            <view class="avatar">
                <image src="{{item.avatar}}" mode="scaleToFill"></image>
            </view>
            <view class="commentInfo">
                <view class="userName">{{item.username}}<view class="time">{{item.time}}</view></view>
                <view class="commentContent"><text class="reply" wx:if="{{item.parent_username}}">回覆@{{item.parent_username}}：</text>{{item.content}}</view>
            </view>
        </view>
    </view>
    <view class="noComment" wx:else>
        <text>暫無評論，趕快搶沙發吧！</text>
    </view>
</view>

　這邊還有一個細節是，可以顯示回覆XX。當時在設計後臺的時候允許回覆他人，即評論可以有一個parent_userid欄位，代表你所回覆的這個使用者的id，當然最後伺服器返回的時候會返回使用者名稱。
　所以判斷下wx:if="{{item.parent_username}}" 即可得出該評論是直接評論還是回覆他人的評論。
　其實發表評論的程式碼我也寫了，很簡單就是一個post請求，但是由於無法登陸，並沒有真正去呼叫。

由於微信沒有提供元素獲取功能，所以想要獲取評論框裡的內容不好直接get，只能給輸入框繫結change事件，然後在事件裡把內容複製給一個變數才行。如果有其他方法，歡迎留言指點。

總結開源

　至此，一個小頭條就完成了，當然由於缺失了使用者系統，功能肯定是不完善的，理論上也是毫無用處的。所以真正的小程式產品肯定不應該是純粹的內容展示，互動一定是個很重要的環節。
　我的程式碼可能在很多地方都不夠嚴謹、不夠細緻，大家如果需要參考歡迎訪問Github給個star。
　Github開源地址：https://github.com/winterfeel/Wxapp_Toutiao
　我更享受的是產品的設計過程，所以小程式一定會帶給我很多樂趣。後續我會繼續製作更多小程式，並且釋出一些教程，喜歡的朋友可以繼續關注！
　注：此文為燈燈原創，可轉載，註明出處即可。
　燈燈微信，新增請註明理由。