肯定有小伙伴遇到过这个问题:加载的数据是一堆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>
最后的效果图如下