微信小程序 加载 HTML 标签

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

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

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

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

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

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

1. <span style="font-size:18px;"> <span style="white-space:pre">   </span>//替换标签中特殊字符 这里观察返回数据找到非 HTML 字符串,随后将该字符串替换成空字符串.
2. var infoFlg = "<!--SPINFO#0-->";
3. if (content.indexOf(infoFlg) > 0) {
4. content = content.replace(/<!--SPINFO#0-->/, "");
5. }</span>

第二个问题思路也是这样,将标识图片位置的非 HTML 字符串替换成 HTML 标签就解决了.

1. <span style="font-size:18px;"><span style="white-space:pre">    </span>var imgFlg = "<!--IMG#";
2. //图片数量
3. var imgCount = (content.split(imgFlg)).length-1;
4. if (imgCount > 0) {
5. console.log("有dd" + imgCount + "张图片");
6. for (var i = 0; i < imgCount; i++) {
7. var imgStr = "<!--IMG#" + i + "-->";
8. var imgSrc = "\"" + imgInfoArr[i].src + "\"";
9. var imgHTML = "<div> <img style=\"width:100%\" src=" +imgSrc+ "> </div>";
10. content = content.replace(imgStr, imgHTML);
11. }
12. }</span>

最后加载数据,

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

wxml 页面代码如下

1. <span style="font-size:18px;"><import src="../../wxParse/wxParse.wxml"/>
2. <loading hidden = "{{hide}}">加载中...</loading>
3. <view class="wxParse">
4. <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
5. </view></span>

js 页面详细代码如下:

1. <span style="font-size:18px;">var WxParse = require('../../wxParse/wxParse.js');
2. Page({
3. data: {
4. },
5. onLoad: function(options) {
6. //http://c.m.163.com/nc/article/CADGA4VH0001875N/full.html
7. var self = this;
8. var optionId = options.id;
9. console.log(optionId);
10. wx.request( {
11. url: 'http://c.m.163.com/nc/article/' +optionId+ '/full.html',
12. header: {
13. "Content-Type": "application/json"
14. },
15. method: "GET",
16. data: {
17. },
18. success: function( res ) {
19. var data = res.data[optionId];
20. var imgInfoArr = res.data[optionId].img;
21. //替换标签中特殊字符
22. var infoFlg = "<!--SPINFO#0-->";
23. var imgFlg = "<!--IMG#";
24. var title = " <p style=\"margin:15px 15px; line-height: 20px;\"> " + res.data[optionId].title + "</p>";
25. var source = " <p style=\"margin:15px 15px; font-size: 14px; color:darkgray \">来源于: " + res.data[optionId].source + "</p>";
26. 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>";
27. //替换标签中特殊字符
28. var infoFlg = "<!--SPINFO#0-->";
29. if (content.indexOf(infoFlg) > 0) {
30. content = content.replace(/<!--SPINFO#0-->/, "");
31. }
32. var imgFlg = "<!--IMG#";
33. //图片数量
34. var imgCount = (content.split(imgFlg)).length-1;
35. if (imgCount > 0) {
36. console.log("有dd" + imgCount + "张图片");
37. for (var i = 0; i < imgCount; i++) {
38. var imgStr = "<!--IMG#" + i + "-->";
39. var imgSrc = "\"" + imgInfoArr[i].src + "\"";
40. var imgHTML = "<div> <img style=\"width:100%\" src=" +imgSrc+ "> </div>";
41. content = content.replace(imgStr, imgHTML);
42. }
43. }
44. var article = title + source + content ;
45. WxParse.wxParse('article', 'html', article, self,imgCount);
46. setTimeout (function () {
47. self.setData({
48. hide: true
49. })
50. }, 500)
51. }
52. });
53. }
54. })</span>

最后的效果图如下