微信小程序开发日记——高仿知乎日报（中） - iyifei_H5之家

本人对知乎日报是情有独钟，看我的博客和github就知道了，写了几个不同技术类型的知乎日报APP
要做微信小程序首先要对html，css，js有一定的基础，还有对微信小程序的API也要非常熟悉

我将该教程分为以下三篇

三篇分别讲不同的组件和功能块

这篇要讲

日报详情页

日报的内容也是最难做的，因为接口返回的内容是html…，天呀，是html！小程序肯本就不支持，解析html的过程非常痛苦，因为本人的正则表达式只是几乎为0，解析方案的寻找过程很虐心，经典的jQuery是用不了了，又没有dom，无法用传统的方式解析html。尝试了正则学习，但是也是无法在短时间内掌握，寻找了很多解析库，大多是依赖浏览器api。不过，上天是不会忽视有心人的，哈哈，还是被我找到了解决方案。幸运的我发现了一个用正则编写的和类似与语法分析方法的xml解析库。这个库是一个very good的网友封装的html解析库。详情点击用Javascript解析html。

由于日报详情内容的html部分结构太大，这里只列出了简要的结构，这个结构是通用的（不过不保证知乎会变动结构，要是变动了，之前的解析可能就没用了…心累）

<div class="question"> <h2 class="question-title">日本的六大财阀现在怎么样了？</h2> <div class="answer"> <div class="meta"> <img class="avatar" src="http://pic1.zhimg.com/e53a7f35d5b1e27b00aa90a2c1468a8c_is.jpg"> <span class="author">leon，</span><span class="bio">data analyst</span> </div> <div class="content"> <p>“财阀”在战后统称为 Group（集团），是以银行和传统工业企业为核心的松散集合体，由于历史渊源而有相互持股。</p> <p>Group 对于当今日本企业的意义在于：</p> <p><strong>MUFG：三菱集团、三和集团（みどり会）</strong></p> <p><img class="content-image" src="http://pic1.zhimg.com/70/90c319ac7a7b2723e5b511de954f45bc_b.jpg" alt="" /></p> </div> </div> <div class="view-more"><a href="http://www.zhihu.com/question/23907827">查看知乎讨论<span class="js-question-holder"></span></a></div> </div>

外层的.question是日报中问题答案的显示单位，可能有多个，因此需要循环显示。.question-title是问题的标题，.meta中是作者的信息，img.avatar是用户的头像,span.author是用户的名称，span.bio可能使用户的签名吧。最难解析的是.content中的内容，比较多。但是有个规律就是都是以<p>标签包裹着，获取了.content中的所有p就可以得到所有的段落。之后再解析出段落中的图片。

以下是详情页的内容展示模版

<view style="padding-bottom: 150rpx;"> <block wx:for="{{news.body}}"> <view class="article"> <view class="title" wx:if="{{item.title && item.title != ''}}"> <text>{{item.title}}</text> </view> <view class="author-info" wx:if="{{(item.avatar && item.avatar != '') || (item.author && item.author != '') || (item.bio && item.bio != '')}}"> <image wx:if="{{item.avatar && item.avatar != ''}}" class="avatar" src="{{item.avatar}}"></image> <text wx:if="{{item.author && item.author != ''}}" class="author-name">{{item.author}}</text> <text wx:if="{{item.bio && item.bio != ''}}" class="author-mark">，{{item.bio}}</text> </view> <view class="content" wx:if="{{item.content && item.content.length > 0}}"> <block wx:for="{{item.content}}" wx:for-item="it"> <block wx:if="{{it.type == 'p'}}"> <text>{{it.value}}</text> </block> <block wx:elif="{{it.type == 'img'}}"> <image mode="aspectFill" src="{{it.value}}" data-src="{{it.value}}" bindtap="previewImgEvent" /> </block> <block wx:elif="{{it.type == 'pstrong'}}"> <text class="strong">{{it.value}}</text> </block> <block wx:elif="{{it.type == 'pem'}}"> <text class="em">{{it.value}}</text> </block> <block wx:elif="{{it.type == 'blockquote'}}"> <text class="qoute">{{it.value}}</text> </block> <block wx:else> <text>{{it.value}}</text> </block> </block> </view> <view class="discuss" wx:if="{{item.more && item.more != ''}}"> <navigator url="{{item.more}}">查看知乎讨论</navigator> </view> </view> </block> </view>