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

selfimpr 发布于2019-08-22 18:12 / 1853人阅读

摘要：前言上一小节说道，点击版面图片区域，可获取到映射的文章链接。本节将着重实现对文章的解析，正则匹配走起通过对文章结构的比对，调查发现，文章详情从的地方开，所以解析文章的函数如下。

前言

上一小节说道，点击版面图片区域，可获取到映射的文章链接。本节将着重实现对文章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, "
");
  // console.log(articleHtml);
  /*正则*/
  //文章部分
  var titleReg = /]+class="text_c"[^>]*>[sS]+?

/i; //会匹配到class=lai的结束

为止，所以只能用标题部分的 //来源部分 var sourceReg = /]+class="lai"[^>]*>([sS]+?)

/i; //正文图片 var imgReg = /]+class="pci_c"[^>]*>[sS]+?/ig; //正文文章 var contentReg = /

[sS]*?

/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(/

([sS]*?)

/i)[1] imgArray.push({ imgSrc: imgSrc, imgDesc: imgDesc }) } console.log("图片匹配", imgArray); } /*************标题*********************/ h1 = titleHtml.match(/

([sS]+?)

/i)[1]; //标题肯定存在，所以用 + h2 = titleHtml.match(/

([sS]*?)

/i)[1] //副标题不一定存在，所以用 * h3 = titleHtml.match(/

([sS]*?)

/i)[1] //引标题不一定存在，所以用 * h4 = titleHtml.match(/

([sS]*?)

/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, " "); if ((text.indexOf("STRONG") != -1) || (text.indexOf("FONT") != -1)) { text = text.match(/(.*?)/i)[1].replace(/( )+/g, " "); 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}}

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

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95600.html

微信小程序实践_4显示新闻（1）

摘要：前言上节讲到，获取到触点所在区域所映射的新闻链接。有了新闻的链接，就能获取相应的新闻啦。前言上节讲到，获取到触点所在区域所映射的新闻链接。有了新闻的链接，就能获取相应的新闻啦。代码实现修改paper.js的toArticle方法 toArticle: function (e) { ....... if (href) { wx.navigateTo({...

hankkin 2019-08-26 17:18 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
微信小程序模块化开发实践

摘要：前言省略准备了解微信小程序是什么微信小程序官方文档了解应用状态管理方案也是架构的具体实现了解打包工具了解代码转译工具原理大致是借助语法分析工具之类的将代码解析成抽象语法树再重写成最终的代码测试工具等等请根据需要选择微信小程序目前版本的实现需前言: 省略... 准备了解微信小程序是什么? 微信小程序官方文档了解应用状态管理方案: Redux, 也是Flux架构的具体实现了解Ja...

luxixing 2019-08-20 13:29 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

赵春朋 2019-08-29 11:20 评论0 收藏0