小程序插入html代碼

轉自：https://blog.csdn.net/BetterGG/article/details/81027291

一、首先，html 分 2 種情況：

1、我在做詳情頁開發的時候發現獲取到的數據是 轉譯后的 html字符串，如下圖： 這種 轉譯后的 html字符串，左括號、右括號、&符號等都被轉譯了，這種代碼，使用下文中的 wxParse 可直接插入。 而如果使用 rich-text，則需要先轉譯成正常 html 代碼，再插入才能成功（這種方法我用以下鏈接中的內容中包含了例子，確實可行）。 （反轉譯方法在我另一篇博客里面：轉譯html鏈接） 我使用該反轉譯方法確實可以將 html轉譯字符串 轉譯為正常 html代碼，這是經過測試的，，但是我自己項目中獲得的大段詳情頁的 html轉譯字符串 在經以上代碼翻譯后再放入 rich-text 中卻不能顯示出來，目前原因尚未清楚，如有同行大神知道個中蹊蹺，忘留言指教，我將在此再次更新。 2、獲得的是正常 html 代碼，如下圖： 二、插入 html 代碼的 3 種方法：     1、使用組件 web-view：（這種方法只能插入完整網頁）              2、使用組件 rich-text：         官方鏈接：點擊打開鏈接       

// 插入正常 html 代碼
var article = '<div style="text-align:center;">《靜夜思》· 李白<br />床前明月光，<br />疑是地上霜。 <br />舉頭望明月， <br />低頭思故鄉。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br /></div>';
that.setData({ detailInfo: article });
 
// 插入 html 轉譯字符串
var html = '&lt;div&gt;&lt;p&gt;第一行&lt;/p&gt;&lt;p&gt;第二行&lt;/p&gt;&lt;/div&gt;';
var newHtml = this.htmlEscapt(html);
this.setData({ detailInfo: newHtml });
htmlEscape: function(html){
    var reg = /(&lt;)|(&gt;)|(&amp;)|(&quot;)/g;
    return html.replace(reg,function(match){
        switch(match){
            case "&lt;":
                return "<";
            case "&gt;":
                return ">"
            case "&amp;":
                return "&";
            case "&quot;":
                return "\""
        }
    });
}

     wxml 頁面：

<rich-text nodes="{{detailInfo}}"></rich-text>  

  3、使用 wxParse：點擊打開鏈接（wxParse使用詳解）    

       

wxParse下載鏈接：點擊打開鏈接

在此聲明一點，使用這個方法，不管下文中的 article 是正常 html 代碼，還是 html 轉譯字符串，都可直接使用。     此外，我在項目中遇到的是將大段的 html 轉譯字符串 轉譯為小程序可識別內容，用的就是 wxParse，，只是在項目中遇到了幾個問題，如果你也有遇到，請點擊以下鏈接：點擊打開鏈接     實例：     wxss 頁面： @import "/templates/wxParse/wxParse.wxss"; 

@import "/templates/wxParse/wxParse.wxss";

JS頁面

var WxParse = require('../../../templates/wxParse/wxParse.js');
Page({
  data: { },
  onLoad: function (options) {
    // var atricle = '<div><p>第一行</p><p>第二行</p></div>';
    var article = '<div style="text-align:center;">《靜夜思》· 李白<br />床前明月光，<br />疑是地上霜。 <br />舉頭望明月， <br />低頭思故鄉。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br /></div>';
    WxParse.wxParse('article', 'html', article, that, 5); 
  },
}）

　　WXML頁面

<import src="../../../templates/wxParse/wxParse.wxml"/>
<view>
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>