微信小程序开发日记——高仿知乎日报（下）

本人对知乎日报是情有独钟，看个人博客和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激励一下我，之后会有更好的做品与你们分享:)