找回密码
 立即注册

QQ登录

只需一步,快速开始

信小程序 加载 HTML 标签

[复制链接]
查看: 114|回复: 0
最佳答案
0 

7

主题

7

帖子

155

积分

新人求带

积分
155
 楼主| 发表于 2017-11-15 10:18:06 | 显示全部楼层 |阅读模式
肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签尴尬这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到一个合适的轮子拿来用!这里用到的轮子就是这个:wxParse.他的介绍可以去 github 主页学习,这里简要记录使用过程.(项目地址链接)

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

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

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

首先来看第一个问题.其实这个问题很好解决,直接获取到要加载的内容,找到这些非 HTML 字符串将他们替换成空字符串,问题就迎刃而解了.下面是关键的代码;
  1. //替换标签中特殊字符 这里观察返回数据找到非 HTML 字符串,随后将该字符串替换成空字符串.  
  2.         var infoFlg = "<!--SPINFO#0-->";  
  3.         if (content.indexOf(infoFlg) > 0) {  
  4.          content = content.replace(/<!--SPINFO#0-->/, "");  
  5.         }
复制代码

第二个问题思路也是这样,将标识图片位置的非 HTML 字符串替换成 HTML 标签就解决了.
  1. var imgFlg = "<!--IMG#";  
  2.         //图片数量  
  3.         var imgCount = (content.split(imgFlg)).length-1;   
  4.         if (imgCount > 0) {  
  5.           console.log("有dd" + imgCount + "张图片");   
  6.             
  7.           for (var i = 0; i < imgCount; i++) {  
  8.             var imgStr = "<!--IMG#" + i + "-->";  
  9.             var imgSrc = "\"" + imgInfoArr[i].src + "\"";   
  10.             var imgHTML = "<div> <img style=\"width:100%\" src=" +imgSrc+ "> </div>";  
  11.             content = content.replace(imgStr, imgHTML);  
  12.           }  
  13.         }
复制代码

最后加载数据,
  1. WxParse.wxParse('article', 'html', article, self,imgCount);
复制代码

wxml 页面代码如下
  1. <import src="../../wxParse/wxParse.wxml"/>   
  2.   
  3. <loading hidden = "{{hide}}">加载中...</loading>  
  4.   
  5. <view class="wxParse">  
  6.         <template is="wxParse" data="{{wxParseData:article.nodes}}"/>  
  7. </view>
复制代码


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

最后的效果图如下
20170110113715560.png
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com