小程序模板網(wǎng)

小燈燈實(shí)戰(zhàn)系列《三》微信小程序:仿今日頭條(下)

發(fā)布時(shí)間:2017-11-23 17:51 所屬欄目:小程序開(kāi)發(fā)教程

接著上一篇 上一篇文章中,我們已經(jīng)完成了頭條的新聞列表、新聞詳情功能了,但是還存在一些值得優(yōu)化的地方,以及評(píng)論功能沒(méi)有加上?!g迎StarGithub開(kāi)源地址:https://github.com ...

 
 
 

接著上一篇

 上一篇文章中,我們已經(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)論效果圖


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

暫無(wú)評(píng)論


 只需要一個(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)注!



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/17942.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢