接著上一篇

　上一篇文章中，我們已經(jīng)完成了頭條的新聞列表、新聞詳情功能了，但是還存在一些值得優(yōu)化的地方，以及評論功能沒有加上。
　歡迎Star Github開源地址：https://github.com/winterfeel/Wxapp_Toutiao
　所以在這一篇中我們進行以下優(yōu)化：

• 下拉刷新、無限加載
• 評論顯示
• 收藏功能

　說明下為什么不做收藏功能，其實是設(shè)計到用戶登陸功能暫時都不做了，包括發(fā)表評論。原因：

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

刷新優(yōu)化

　微信小程序原生提供了下拉刷新和加載更多事件，這一點還是比較人性化的。
　首先需要在配置文件，即頁面.json，如index.json添加允許下拉刷新：

{
    "enablePullDownRefresh":true
}

然后在js代碼中添加響應(yīng)事件：

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

注意我把加載更多和下拉刷新所用的請求方法寫成了一個函數(shù)：

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

這個ifLoadMore起區(qū)分的作用，如果是false，則將獲得的數(shù)據(jù)直接替換；如果是true，則將獲得的數(shù)據(jù)追加在原有的數(shù)據(jù)后面。

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

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

評論功能

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

　評論列表還是用for循環(huán)渲染每個item即可，當然這邊我添加了一個小細節(jié)，當沒有評論的時候會顯示一個空提示：

　只需要一個簡單的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>暫無評論，趕快搶沙發(fā)吧！</text>
    </view>
</view>

　這邊還有一個細節(jié)是，可以顯示回復XX。當時在設(shè)計后臺的時候允許回復他人，即評論可以有一個parent_userid字段，代表你所回復的這個用戶的id，當然最后服務(wù)器返回的時候會返回用戶名。
　所以判斷下wx:if="{{item.parent_username}}" 即可得出該評論是直接評論還是回復他人的評論。
　其實發(fā)表評論的代碼我也寫了，很簡單就是一個post請求，但是由于無法登陸，并沒有真正去調(diào)用。

由于微信沒有提供元素獲取功能，所以想要獲取評論框里的內(nèi)容不好直接get，只能給輸入框綁定change事件，然后在事件里把內(nèi)容復制給一個變量才行。如果有其他方法，歡迎留言指點。

總結(jié)開源

　至此，一個小頭條就完成了，當然由于缺失了用戶系統(tǒng)，功能肯定是不完善的，理論上也是毫無用處的。所以真正的小程序產(chǎn)品肯定不應(yīng)該是純粹的內(nèi)容展示，交互一定是個很重要的環(huán)節(jié)。
　我的代碼可能在很多地方都不夠嚴謹、不夠細致，大家如果需要參考歡迎訪問Github給個star。
　Github開源地址：https://github.com/winterfeel/Wxapp_Toutiao
　我更享受的是產(chǎn)品的設(shè)計過程，所以小程序一定會帶給我很多樂趣。后續(xù)我會繼續(xù)制作更多小程序，并且發(fā)布一些教程，喜歡的朋友可以繼續(xù)關(guān)注！