[轉]燈燈小程序開發手記：仿今日頭條（上）

本文轉自：http://www.jianshu.com/p/a1e0b8abb12d

寫在前面

　新的一年，祝大家新年快樂！當然對於程序員來說，新的一年，也要有新的改變。因此燈燈決定湊熱鬧編寫微信小程序啦！ 　上一篇文章《記一次小程序開發過程》中，燈燈大致寫了下自己第一次開發小程序的感受和流程。這一次燈燈會詳細記錄下自己制作一個小程序的思路、遇到的問題、涉及到的代碼等和大家分享。    視頻教程地址：http://study.163.com/course/introduction.htm?courseId=1003606050

要做個什么

　首先我們要確定做一個什么小程序，我決定先做一個很常規的新聞App練練手，樣式就模仿頭條啦！ 　開發分為兩次進行，第一次完成新聞列表、內容閱讀這兩個常規功能，不涉及用戶交互。第二次完善功能，加上評論、收藏等互動功能。 　本文就和大家一起來制作第一個無用戶系統版本。 　應用構架非常簡單，就是2個頁面：新聞列表、新聞詳情。

今日頭條截圖

　當然樣式不一定要做那么復雜先，比如我們就統一1幅封面預覽圖，暫時不做3幅圖的item。

動手開發

首先是首頁，即新聞列表

　布局上，頂部一個懸浮固定的分類條，用橫向的scroll-view即可實現。下面是列表，循環渲染每個item即可。

頂部分類效果

分類布局代碼如下：

<scroll-view class="segments" scroll-x="true"> <view wx:for="{{sections}}" class="section {{item.active ? 'active' : ''}}" data-sid="{{item.section_id}}" bindtap="onSectionClicked"> <text>{{item.name}}</text> </view> </scroll-view>

分類樣式代碼如下：

.segments{ width:100%; height:35px; background: #f6f6f6; white-space: nowrap; font-size:15px; position: fixed; top: 0; z-index:1; } .section{ width:20%; height:100%; text-align: center; color:#000; display: inline-block; line-height: 35px; } .section.active{ color:#d43d3d; }

注意這邊有個active類，就是當前選中的分類，我把字體顏色設為了紅色，當然你也可以加個橫線。

文章列表布局如下：

<!--文章列表--> <view class="articles"> <view wx:for="{{articles}}" class="article" data-aid="{{item.article_id}}" bindtap="onArticleClicked"> <view class="left"> <view class="title"> {{item.title}} </view> <view class="subTitle"> <!--這邊可以加副標題--> </view> <view class="date"> <text>{{item.date}}</text> </view> <view class="cnt"> <text>閱讀:{{item.read_cnt}}</text> </view> </view> <view class="right"> <image src="{{item.cover1}}"/> </view> <view style="clear:both"></view> </view> </view>

Js邏輯代碼如下：

var app = getApp() var sectionData = null var currentSectionIndex = 0 Page({ data: {}, onLoad: function () { var that = this //獲取分類信息 wx.request({ url : 'http://你的服務器/news/section', data : {}, success : function(res){ sectionData = res.data.sections; sectionData[0]['active'] = true //默認選中第一個分類 that.loadArticles(sectionData[0]['section_id']) that.setData({ sections : sectionData }); } }) }, onSectionClicked: function(e){ var sid = e.currentTarget.dataset.sid; //刷新選中狀態 for(var i in sectionData){ if(sectionData[i]['section_id'] == sid){ sectionData[i]['active'] = true currentSectionIndex = i } else sectionData[i]['active'] = false } this.setData({ sections : sectionData }); //加載文章 if(sectionData[i]['articles']){ this.setData({ articles : sectionData[i]['articles'] }); }else{ this.loadArticles(sid) } }, loadArticles: function(section_id){ var that = this //獲取文章列表 wx.request({ url : 'http://你的服務器/news/article', method: 'POST', data : { section_id:section_id, start_id:0, limit:10 }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success : function(res){ var articleData = res.data.articles; sectionData[currentSectionIndex]['articles'] = articleData that.setData({ articles : articleData }); } }) }, onArticleClicked: function(e){ var aid = e.currentTarget.dataset.aid wx.navigateTo({ url: '/pages/detail/detail?article_id='+aid }) } })

解釋一下，就是從服務器獲取分類信息，然后根據分類的section_id再去獲取分類下的文章列表，這邊照理說是要實現下拉刷新和無限加載的，第一版暫時不做，所以參數里面start_id和limit我寫死了。 這邊我為了防止重復請求服務器，把每次分類請求完的數據都記錄下來了，詳情見onSectionClicked事件的處理。

注意：POST請求時，header參數要寫成'Content-Type': 'application/x-www-form-urlencoded'，不然服務器得不到post參數，很奇怪

這邊有個問題是橫向的scroll-view不能隱藏滾動條，非常難看，我沒有查到解決辦法，希望知道的朋友留言說下。

最終效果圖（數據是我以前做的一個藏文化App的數據，不要見怪哈哈）：

文章列表

然后是文章詳情

　這邊我本來要放棄去做了，因為當時做后台接口的時候文章content是以html代碼形式記錄的，然后客戶端直接webview去解析。但是現在微信小程序並不支持富文本、也不支持iframe、也不支持外鏈視頻。但是偶然間我看見了一個神器： wxParse微信小程序富文本解析 Github 正好實現了我需要的富文本解析功能，而且圖片還自帶懶加載、自帶全屏瀏覽功能，感謝作者。

所以詳情頁的JS代碼非常簡單：

var WxParse = require('../../wxParse/wxParse.js');//引入解析庫 var article_id = '' Page({ data:{}, onLoad:function(options){ var that = this article_id = options.article_id // 獲取文章id wx.request({ url : 'http://你的服務器/news/detail', method: 'POST', data : { article_id: article_id }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success : function(res){ var _content = res.data.article['content'] that.setData({ article: res.data.article }); WxParse.wxParse('content', 'html', _content, that,0);//富文本解析 } }) } })

布局代碼中：

<!--引入庫--> <import src="../../wxParse/wxParse.wxml"/> <!--...其他布局省略--> <!--解析生成--> <template is="wxParse" data="{{wxParseData:content.nodes}}"/>

當然別忘了在樣式代碼里也引入：

@import "/wxParse/wxParse.wxss";

最終效果圖，點擊圖片還支持全屏瀏覽，非常人性化：

詳情頁

總結

　至此，一個簡單的頭條的就開發完了。看起來很容易但實際做的時候會遇到很多莫名的bug，主要原因還是微信提供的那一套東西問題太多了。例如：不支持富文本、不支持外鏈、滾動條不能隱藏、百分比布局有時候有問題...... 　當然我相信之后微信也會一次次迭代一次次修復加強的，所以也不用太擔心，畢竟微信小程序的理念就是簡單，設計得太復雜就沒有意義了。

Todo

• 增加3幅圖片的item樣式
• 增加下拉刷新、無限加載
• 增加用戶登陸
• 增加收藏功能
• 增加評論功能

　這些功能燈燈會在開發完成后繼續和大家分享，目前源碼由於功能不完整暫時沒有在Github上開源，等做完后我再一起開源。對了，整個后台系統是用ThinkPHP做的，其實並不難，有興趣的同學可以自己學學。 Github開源地址：https://github.com/winterfeel/Wxapp_Toutiao 視頻教程地址：http://study.163.com/course/introduction.htm?courseId=1003606050

 

 

燈燈小程序開發手記：仿今日頭條（下）

http://www.jianshu.com/p/b17933c238d7

接着上一篇

　上一篇文章中，我們已經完成了頭條的新聞列表、新聞詳情功能了，但是還存在一些值得優化的地方，以及評論功能沒有加上。 　歡迎Star Github開源地址：https://github.com/winterfeel/Wxapp_Toutiao 視頻教程地址：http://study.163.com/course/introduction.htm?courseId=1003606050 　所以在這一篇中我們進行以下優化：

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

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

微信小程序登陸需要有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 　我更享受的是產品的設計過程，所以小程序一定會帶給我很多樂趣。后續我會繼續制作更多小程序，並且發布一些教程，喜歡的朋友可以繼續關注！ 　注：此文為燈燈原創，可轉載，注明出處即可。 　燈燈微信，添加請注明理由。小程序商城解決方案，最低1000元起即可擁有，歡迎聯系！

視頻教程地址：http://study.163.com/course/introduction.htm?courseId=1003606050