接著上一篇

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

• 下拉刷新、無(wú)限加載
• 評(píng)論顯示
• 收藏功能

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

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

刷新優(yōu)化

　微信小程序原生提供了下拉刷新和加載更多事件，這一點(diǎn)還是比較人性化的。
　首先需要在配置文件，即頁(yè)面.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)
  }

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

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

這個(gè)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: '暫無(wú)更多內(nèi)容',
                icon: 'loading',
                duration: 2000
              })
            }   
          }else{
            sectionData[currentSectionIndex]['articles'] = articleData//刷新
          }

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

評(píng)論功能

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

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

　只需要一個(gè)簡(jiǎn)單的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}}">回復(fù)@{{item.parent_username}}：</text>{{item.content}}</view>
            </view>
        </view>
    </view>
    <view class="noComment" wx:else>
        <text>暫無(wú)評(píng)論，趕快搶沙發(fā)吧！</text>
    </view>
</view>

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

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

總結(jié)開(kāi)源

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