微信小程序開發日記——高仿知乎日報（下）

本人對知乎日報是情有獨鍾，看個人博客和github就知道了，寫了幾個不一樣技術類型的知乎日報APP

要作微信小程序首先要對html，css，js有必定的基礎，還有對微信小程序的API也要很是熟悉

我將該教程分爲如下三篇

1. 微信小程序日記——高仿知乎日報（上）
2. 微信小程序日記——高仿知乎日報（中）
3. 微信小程序日記——高仿知乎日報（下）

三篇分別講不一樣的組件和功能塊

這篇要講

• 主題日報
• 個人收藏
• 設置
• 圖片修正

主題日報

主題日報的樣式跟首頁幾乎如出一轍，區別在多了一行主編區域。不過這個主編區域沒有實現什麼功能，原本是點擊主編的頭像跳轉到主編的我的首頁簡介，沒有時間安排就不作了，這也是須要解析html的（累），因此和主頁共享一個頁面根據主題id判斷，若是是主題日報，頂部的swiper換成image，同時顯示主編信息

主題日報列表須要接受一個具體的主題日報id，根據這個id來請求接口獲取主題日報的日報列表。
點擊相應的主題觸發這個方法，加載數據以後收起側滑菜單

主題日報的請求列表方式和主頁的列表方式差很少，因爲沒有發現分頁參數，主題日報的日報列表這部分也沒有分頁請求。主題日報的日報詳情仍是跳轉到日報詳情頁面的。toThemePage: function( e ) { var _this = this; _this.setData( { loading: true,themeId:e.currentTarget.dataset.id }); console.log( 'themeId', _this.data.themeId ); requests.getThemeStories( _this.data.themeId, ( data ) => { data.background=data.background.replace("pic1","pic3"); data.background=data.background.replace("pic2","pic3"); for(var i=0;i<data.editors.length;i++){ data.editors[i].avatar=data.editors[i].avatar.replace("pic1","pic3"); data.editors[i].avatar=data.editors[i].avatar.replace("pic2","pic3"); } data=utils.correctData(data); _this.setData( { pageData: data.stories, background: data.background, description: data.description, editorData: data.editors }); slideDown.call( this ); }, null, () => { _this.setData( { loading: false }); }); }, 

收藏頁面

收藏頁面就是隻剩下下面列表項的，因此也是共用了主頁的頁面，在主題日報的基礎上再判斷，若是是個人收藏頁面就不顯示頂部圖片和主編信息
點擊個人收藏觸發如下方法

toCollectPage: function( ) { var _this = this; _this.setData( { themeId:-1}); var pageData = wx.getStorageSync('pageData') || [] console.log(pageData); _this.setData({ themeId:-1, pageData:pageData }) slideDown.call( this ); },

設置頁面

原本想作設置頁面裏列出的功能，可是工做比較忙，仍是納入到後邊的完善計劃吧，現階段只作了簡單的頁面佈局。

可是仍是講一下本身的思路
– 夜間模式就是改變應用的顯示樣式，利用到了css，咱們能夠在page中放置一個頂層的view來包括起全部的wxml元素，當切換主題時給頁面頂層元素一個主題控制類。

<view class="light"> .... </view> <view class="night"> ... </view>

那怎麼實現換膚當即生效呢？一個頁面剛啓動是會通過onLoad、onShow等，當第二次進來的時候頁面的onLoad事件就不會在次觸發，而是觸發onShow事件，咱們能夠經過onShow事件來獲取存在全局緩存中的主題設置。

onShow: function() { var app = getApp(); this.setData({theme: app.globalData.theme}); } 

<view class="{{theme}}"> ... </view>

• 清除緩存功能，固然是把臨時文件和localStorage中的數據清空。

clearDataEvent: function() { wx.clearStorage(); //清除應用數據 }

• 應用的無圖瀏覽模式跟主題的思路差很少，就是判斷應用緩存中的設置是不是無圖模式，若是是就在內容顯示的時候加一個判斷，根據這個值來判斷是否顯示圖片類型的內容。

onLoad: function() { var app = getApp(); this.setData({imageMode: app.getImageMode()}); }

<view> <image wx:if="{{imageMode}}" src="..." /> <!--或者--> <block wx:if="{{imageMode}}"> <image src="..." /> </block> </view>

圖片修正

若是是用知乎日報提供的圖片地址，如：

http://pic1.zhimg.com//9e26ccbadca80e2e94f89d24b7ce6b04.jpg

pic1和pic2的圖片都不能正常顯示，這應該是微信小程序開發工具的bug，因此咱們只能把它們替換成pic3或者pic4，後來發現首頁的列表和頂部圖片用pic4能夠正常顯示，主編頭像用pic3才能正常顯示，詳細頁面也用pic3，我新建了一個方法來修正主頁圖片地址，其餘那些只要在相應位置replace一下就好

/** * 修正圖片url，將pic1和pic2改成pic4 * @param data * @returns {*} */ function correctData(data){ if (("top_stories" in data) ){ var top_stories=data.top_stories; for(var i = 0;i < top_stories.length; i++) { top_stories[i].image = top_stories[i].image.replace("pic1", "pic4"); top_stories[i].image = top_stories[i].image.replace("pic2", "pic4"); } data.top_stories=top_stories; } var stories=data.stories; for(var i = 0;i < stories.length; i++) { if (("images" in stories[i]) ){ var s=stories[i].images[0]; s=s.replace("pic1", "pic4"); s=s.replace("pic2", "pic4"); stories[i].images[0] =s; } } data.stories=stories; return data; }

總結

問題

• 代碼結構比較爛，不少地方都沒有優化處理，複用率較低，待重構。
• 頁面佈局有些不合理，尺寸控制的不夠好。
• 部分wxml沒有用模版功能代替重複的渲染工做，達不到複用效果。

閒語

本次編寫的小程序用到了蠻多知識點，雖然花費了很多時間，可是一切都是很是的值得。編寫的過程當中遇到最大的困難就是解析html內容，能夠說是絞盡腦汁，哈哈，智商不足啦。很期待能有網友能奉獻出更好的解決方法。這個小例子作的比較簡陋，不少功能沒有徹底實現，跟別人的Android和React仿客戶端相比，小巫見大巫啦。還得抽空完成後續的更多功能。

到目前爲止，小程序已經更新了幾回，支持了ES5/ES6轉換、下拉刷新事件、上傳文件等功能，不過還有不少API還不能在模擬環境下顯示效果。本身以爲一直作相似於豆瓣圖書和知乎日報等除了網絡請求以外沒什麼特別的地方的應用也很差，須要嘗試新的API來擴展本身的視野，後續打算往未使用到的API進行案例製做。不知不覺已經踏出校園準備有4個月了，很懷念之前的學習日子，作過不少案例，可是都沒有寫日誌和保存的習慣。此次寫的字數蠻多的，可累死我了。很幸運本身初入工做圈就能碰上小程序風暴，期待它正式公測！

現階段比較完整的效果動態圖

本次示例的源碼地址：

http://www.hotlist.com.cn/archives/189.html

若是你們喜歡，給個start激勵一下我，之後會有更好的做品與你們分享:)