微信小程序 加载 HTML 标签

肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签

这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到一个合适的轮子拿来用!这里用到的轮子就是这个:wxParse.他的介绍可以去 github 主页学习,这里简要记录使用过程.(项目地址链接)

本文由百牛信息技术bainiu.ltd整理发布于博客园

接口是截取的网易新闻的新闻详情接口,数据格式大家自行格式化观察.这里在做 HTML 处理的时候遇到了两个小问题.

1.返回数据中包含非 HTML 标签的内容,这会导致加载数据时解析失败.

2.一些新闻详情会有配图,配图的位置是通过一些标识字符串加到内容里,不是直接加载出来.

首先来看第一个问题.其实这个问题很好解决,直接获取到要加载的内容,找到这些非 HTML 字符串将他们替换成空字符串,问题就迎刃而解了.下面是关键的代码;

[html] view plain copy

<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 标签就解决了.

[html] view plain copy

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

最后加载数据,

[html] view plain copy

<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 页面代码如下

[html] view plain copy

<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 页面详细代码如下:

[html] view plain copy

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

最后的效果图如下