微信小程序php新闻,微信小程序实践_4显示新闻（2）

前言

上一小节说道，点击版面图片区域，可获取到映射的文章链接。本节将着重实现对文章html的解析，正则匹配走起~

通过对文章html结构的比对，调查发现，文章详情从class="text_c"的地方开，所以解析文章的函数如下。

代码实现

在utils目录下新建articleExtract.js

var articleObj = {};

var articleExtract = function (html, newsHref, pagenum) {

articleObj["newshref"] = newsHref; //该文章的链接

articleObj["pagenum"] = pagenum; //该文章所在版面编号

var html = html.replace(/
/ig, "\r\n");

// console.log(articleHtml);

/*正则*/

//文章部分

var titleReg = /

]+class="text_c"[^>]*>[\s\S]+?/i; //会匹配到class=lai的结束

为止，所以只能用标题部分的

//来源部分

var sourceReg = /

]+class="lai"[^>]*>([\s\S]+?)/i;

//正文图片

var imgReg = /

//正文文章

var contentReg = /

[\s\S]*?/i;

//中间变量

// var articleHtml = articleMatch[0];//存放匹配的文章部分的html

var titleHtml = "";

var imgHtmlArray = ""; //存放匹配的正文图片部分的html

var contentHtml = ""; //存放匹配的正文文章部分的html

//正则匹配结果

var titleMatch = html.match(titleReg); //存放匹配的文章的结果

var sourceMatch = html.match(sourceReg); //存放的标题部分的html

var imgMatch = html.match(imgReg); //存放匹配的正文图片部分的html

var contentMatch = html.match(contentReg); //存放匹配的正文文章部分的html

//结果变量

var h1 = ""; //主标题

var h2 = ""; //副标题

var h3 = ""; //引标题

var h4 = ""; //不知道代表啥标题

var source = ""; //来源及日期

var imgArray = []; //图片及图片说明

var contentArray = []; //文章每段的内容

//给中间变量赋值

titleMatch && (titleHtml = titleMatch[0]);

sourceMatch && (source = sourceMatch[1].replace(/\s+/g, ''));

imgMatch && (imgHtmlArray = imgMatch);

contentMatch && (contentHtml = contentMatch[0]);

/***********图片***********************/

if (imgHtmlArray) {

var i;

var imgSrc = ''

var imgDesc = ''

for (i = 0; i < imgHtmlArray.length; i++) {

imgSrc = imgMatch[i].match(//i)[1].replace("../../../", 'http://paper.people.com.cn/rmrb/');

imgDesc = imgMatch[i].match(/

([\s\S]*?)/i)[1]

imgArray.push({

imgSrc: imgSrc,

imgDesc: imgDesc

})

}

console.log("图片匹配", imgArray);

}

/*************标题*********************/

h1 = titleHtml.match(/

([\s\S]+?)/i)[1]; //标题肯定存在，所以用 +

h2 = titleHtml.match(/

([\s\S]*?)/i)[1] //副标题不一定存在，所以用 *

h3 = titleHtml.match(/

([\s\S]*?)/i)[1] //引标题不一定存在，所以用 *

h4 = titleHtml.match(/

([\s\S]*?)/i)[1] //h4不知道是啥标题，所以用 *

console.log("标题 ", h1);

console.log("副标题 ", h2);

console.log("引标题 ", h3);

console.log("不知道是啥的h4 ", h4);

console.log("来源", source);

console.log("图片列表", imgHtmlArray);

console.log("文章段落列表", contentHtml);

/*************正文*********************/

if (contentHtml) {

var contents = contentHtml.match(/

.*?/ig);

var p = {};

var text = "";

var strong = "strong";

//某些新闻没有正文内容(比如广告，只有一张图片)，因此需要判断一下

if (contents) {

for (i = 0; i < contents.length; i++) {

var currentP = contents[i];

text = currentP.match(/

(.*?)/i)[1].replace(/( )+/g, '\t');

if ((text.indexOf('STRONG') != -1) || (text.indexOf('FONT') != -1)) {

text = text.match(/(.*?)/i)[1].replace(/( )+/g, '\t');

contentArray.push({ "text": text, "strong": strong });

} else {

contentArray.push({ "text": text });

}

}

}

}

articleObj["titleObj"] = {

title: h1,

sub: h2,

quote: h3,

unknown: h4,

source: source

}

articleObj["imgArray"] = imgArray

articleObj['contentArray'] = contentArray

return articleObj

}

module.exports = articleExtract;

修改pages/article/article.js

添加articleExtract函数

var app = getApp();

//article url

var todayDateArray = require('../../utils/util.js').todayDateArray;

var articleExtract = require('../../utils/articleExtract.js')

var baseUri = "http://paper.people.com.cn/rmrb/html"

//拼接url的变量

//...

Page({

/**

* 页面的初始数据

*/

data: {

articleObj:{}

},

//...

onShow: function () {

// ...

},

//请求文章

getArticle: function (url, newsHref, pagenum) {

var self = this;

var reqObj = { url: url };

wx.request({

url: url,

success:function(res){

var html = res.data;

//解析文章html，获取文章标题、内容等相关信息

var tmpArticleObj = articleExtract(html, newsHref, pagenum);

console.log("文章解析结果", tmpArticleObj )

self.setData({

articleObj: tmpArticleObj,

});

}

});

},

})

文章解析出来了，下一步就是把他显示出来

显示文章

在article.wxml，把内容简单的显示出来

{{articleObj.titleObj.introTitle}}

{{articleObj.titleObj.title}}

{{articleObj.titleObj.subTitle}}

{{articleObj.titleObj.authors}}

{{item.imgAlt}}

{{item.text}}

至此，文章详情算是显示出来了，下一步，继续完善