微信小程序 加載 HTML 標籤

確定有小夥伴遇到過這個問題:加載的數據是一堆HTML 標籤這就尷尬了,由於小程序沒有提供 webview 來加載這些 HTML.可是不用慌,小程序不提供咱們能夠本身造個新輪子,本身造不出新輪子我們找到一個合適的輪子拿來用!這裏用到的輪子就是這個:wxParse.他的介紹能夠去 github 主頁學習,這裏簡要記錄使用過程.(項目地址連接)

 本文由百牛信息技術bainiu.ltd整理髮佈於博客園

接口是截取的網易新聞的新聞詳情接口,數據格式你們自行格式化觀察.這裏在作 HTML 處理的時候遇到了兩個小問題.

1.返回數據中包含非 HTML 標籤的內容,這會致使加載數據時解析失敗.

2.一些新聞詳情會有配圖,配圖的位置是經過一些標識字符串加到內容裏,不是直接加載出來.

 

首先來看第一個問題.其實這個問題很好解決,直接獲取到要加載的內容,找到這些非 HTML 字符串將他們替換成空字符串,問題就迎刃而解了.下面是關鍵的代碼;

 

<span style="font-size:18px;"> <span style="white-space:pre">   </span>//替換標籤中特殊字符 這裏觀察返回數據找到非 HTML 字符串,隨後將該字符串替換成空字符串.
        var infoFlg = "<!--SPINFO#0-->";
        if (content.indexOf(infoFlg) > 0) {
         content = content.replace(/<!--SPINFO#0-->/, "");
        }</span>

 

 

第二個問題思路也是這樣,將標識圖片位置的非 HTML 字符串替換成 HTML 標籤就解決了.

 

<span style="font-size:18px;"><span style="white-space:pre">    </span>var imgFlg = "<!--IMG#";
        //圖片數量
        var imgCount = (content.split(imgFlg)).length-1;
        if (imgCount > 0) {
          console.log("有dd" + imgCount + "張圖片");

          for (var i = 0; i < imgCount; i++) {
            var imgStr = "<!--IMG#" + i + "-->";
            var imgSrc = "\"" + imgInfoArr[i].src + "\"";
            var imgHTML = "<div> <img style=\"width:100%\" src=" +imgSrc+ "> </div>";
            content = content.replace(imgStr, imgHTML);
          }
        }</span>

最後加載數據,

 

 

<span style="font-size:18px;"><span style="white-space:pre">    </span>var article = title + source + content ;
        WxParse.wxParse('article', 'html', article, self,imgCount);</span>

 

 

wxml 頁面代碼以下

 

<span style="font-size:18px;"><import src="../../wxParse/wxParse.wxml"/>

<loading hidden = "{{hide}}">加載中...</loading>

<view class="wxParse">
        <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view></span>

 

 

js 頁面詳細代碼以下:

 

<span style="font-size:18px;">var WxParse = require('../../wxParse/wxParse.js');

Page({

  data: {
  },

onLoad: function(options) {

    //http://c.m.163.com/nc/article/CADGA4VH0001875N/full.html
    var self = this;
    var optionId = options.id;
    console.log(optionId);
    wx.request( {
      url: 'http://c.m.163.com/nc/article/' +optionId+ '/full.html',
      header: {
        "Content-Type": "application/json"
      },
      method: "GET",
      data: {

      },
      success: function( res ) {

        var data = res.data[optionId];
        var imgInfoArr = res.data[optionId].img;

        //替換標籤中特殊字符
        var infoFlg = "<!--SPINFO#0-->";
        var imgFlg = "<!--IMG#";
        var title = " <p style=\"margin:15px 15px; line-height: 20px;\"> " + res.data[optionId].title + "</p>";
        var source = " <p style=\"margin:15px 15px; font-size: 14px; color:darkgray \">來源於: " + res.data[optionId].source + "</p>";
        var content = "<div style=\"margin:10px; line-height:25px; font-weight:200; font-size:17px; color:black; word-break:normal\">" + res.data[optionId].body + "</div>";

         //替換標籤中特殊字符
        var infoFlg = "<!--SPINFO#0-->";
        if (content.indexOf(infoFlg) > 0) {
         content = content.replace(/<!--SPINFO#0-->/, "");
        }

        var imgFlg = "<!--IMG#";
        //圖片數量
        var imgCount = (content.split(imgFlg)).length-1;
        if (imgCount > 0) {
          console.log("有dd" + imgCount + "張圖片");

          for (var i = 0; i < imgCount; i++) {
            var imgStr = "<!--IMG#" + i + "-->";
            var imgSrc = "\"" + imgInfoArr[i].src + "\"";
            var imgHTML = "<div> <img style=\"width:100%\" src=" +imgSrc+ "> </div>";
            content = content.replace(imgStr, imgHTML);
          }
        }

        var article = title + source + content ;
        WxParse.wxParse('article', 'html', article, self,imgCount);


        setTimeout (function () {
          self.setData({
          hide: true
        })
        }, 500)
      }
    });
}

})</span>

最後的效果圖以下