国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序實踐_4顯示新聞（2）

selfimpr / 1855人閱讀

摘要：前言上一小節說道，點擊版面圖片區域，可獲取到映射的文章鏈接。本節將著重實現對文章的解析，正則匹配走起通過對文章結構的比對，調查發現，文章詳情從的地方開，所以解析文章的函數如下。

前言

上一小節說道，點擊版面圖片區域，可獲取到映射的文章鏈接。本節將著重實現對文章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}}

至此，文章詳情算是顯示出來了，下一步，繼續完善

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95600.html

相關文章

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<