微信小程序 加载 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="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="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>

最后的效果图如下