微信小程序 加載 HTML 標簽

肯定有小火伴遇到過這個問題:加載的數據是1堆HTML 標簽這就為難了,由于小程序沒有提供 webview 來加載這些 HTML.但是不用慌,小程序不提供我們可以自己造個新輪子,自己造不出新輪子我們找到1個適合的輪子拿來用!這里用到的輪子就是這個:wxParse.他的介紹可以去 github 主頁學習,這里扼要記錄使用進程.(項目地址鏈接)

接口是截取的網易新聞的新聞詳情接口,數據格式大家自行格式化視察.這里在做 HTML 處理的時候遇到了兩個小問題.

1.返回數據中包括非 HTML 標簽的內容,這會致使加載數據時解析失敗.

2.1些新聞詳情會有配圖,配圖的位置是通過1些標識字符串加到內容里,不是直接加載出來.

首先來看第1個問題.其實這個問題很好解決,直接獲得到要加載的內容,找到這些非 HTML 字符串將他們替換成空字符串,問題就迎刃而解了.下面是關鍵的代碼;

 	//替換標簽中特殊字符 這里視察返回數據找到非 HTML 字符串,隨后將該字符串替換成空字符串.
        var infoFlg = "<!--SPINFO#0-->";
        if (content.indexOf(infoFlg) > 0) {
         content = content.replace(/<!--SPINFO#0-->/, "");
        }

第2個問題思路也是這樣,將標識圖片位置的非 HTML 字符串替換成 HTML 標簽就解決了.

	var imgFlg = "<!--IMG#";
        //圖片數量
        var imgCount = (content.split(imgFlg)).length⑴; 
        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);

wxml 頁面代碼以下

<import src="../../wxParse/wxParse.wxml"/> 

<loading hidden = "{{hide}}">加載中...</loading>

<view class="wxParse">
    	<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

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⑴; 
        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)
      }
    });
}

})

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈