微信小程序日记——高仿知乎日报

要做微信小程序首先要对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 });    });  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

主题日报的请求列表方式和主页的列表方式差不多，由于没有发现分页参数，主题日报的日报列表这部分也没有分页请求。主题日报的日报详情还是跳转到日报详情页面的。

收藏页面

收藏页面就是只剩下下面列表项的，所以也是共用了主页的页面，在主题日报的基础上再判断，如果是我的收藏页面就不显示顶部图片和主编信息 
点击我的收藏触发以下方法

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 );  },
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

设置页面

本来想做设置页面里列出的功能，但是工作比较忙，还是归入到后边的完善计划吧，现阶段只做了简单的页面布局。

但是还是讲一下自己的思路 
- 夜间模式就是改变应用的显示样式，利用到了css，我们可以在page中放置一个顶层的view来包括起所有的wxml元素，当切换主题时给页面顶层元素一个主题控制类。

<view class="light">    ....</view><view class="night">    ...</view>
1
2
3
4
5
6
7
1
2
3
4
5
6
7

那怎么实现换肤立即生效呢？一个页面刚启动是会经过onLoad、onShow等，当第二次进来的时候页面的onLoad事件就不会在次触发，而是触发onShow事件，我们可以通过onShow事件来获取存在全局缓存中的主题设置。

onShow: function() {    var app = getApp();    this.setData({theme: app.globalData.theme});}
1
2
3
4
5
6
1
2
3
4
5
6

<view class="{{theme}}">    ...</view>
1
2
3
1
2
3

• 清除缓存功能，当然是把临时文件和localStorage中的数据清空。

clearDataEvent: function() {    wx.clearStorage(); //清除应用数据}
1
2
3
1
2
3

• 应用的无图浏览模式跟主题的思路差不多，就是判断应用缓存中的设置是否是无图模式，如果是就在内容显示的时候加一个判断，根据这个值来判断是否显示图片类型的内容。

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

<view>    <image wx:if="{{imageMode}}" src="..." />    <!--或者-->    <block wx:if="{{imageMode}}">        <image src="..." />    </block></view>
1
2
3
4
5
6
7
1
2
3
4
5
6
7

图片修正

如果是用知乎日报提供的图片地址，如：

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

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;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

总结

问题

• 代码结构比较烂，很多地方都没有优化处理，复用率较低，待重构。
• 页面布局有些不合理，尺寸控制的不够好。
• 部分wxml没有用模版功能代替重复的渲染工作，达不到复用效果。

闲语

本次编写的小程序用到了蛮多知识点，虽然花费了不少时间，但是一切都是非常的值得。编写的过程中遇到最大的困难就是解析html内容，可以说是绞尽脑汁，哈哈，智商不足啦。很期待能有网友能奉献出更好的解决方法。这个小例子做的比较简陋，很多功能没有完全实现，跟别人的Android和React仿客户端相比，小巫见大巫啦。还得抽空完成后续的更多功能。

到目前为止，小程序已经更新了几次，支持了ES5/ES6转换、下拉刷新事件、上传文件等功能，不过还有很多API还不能在模拟环境下显示效果。自己觉得一直做类似于豆瓣图书和知乎日报等除了网络请求之外没什么特别的地方的应用也不好，需要尝试新的API来扩展自己的视野，后续打算往未使用到的API进行案例制作。不知不觉已经踏出校园准备有4个月了，很怀念以前的学习日子，做过很多案例，但是都没有写日志和保存的习惯。这次写的字数蛮多的，可累死我了。很幸运自己初入工作圈就能碰上小程序风暴，期待它正式公测！

现阶段比较完整的效果动态图

本次示例的源码地址：

https://github.com/oopsguy/WechatSmallApps

http://git.oschina.net/oopsguy/WechatSmallApps

笔者在原作者基础上优化的地址：

https://github.com/jkgeekJack/WechatSmallApps