小程序插入html代碼

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

1、首先，html 分 2 種狀況：

一、我在作詳情頁開發的時候發現獲取到的數據是 轉譯後的 html字符串，以下圖： 這種 轉譯後的 html字符串，左括號、右括號、&符號等都被轉譯了，這種代碼，使用下文中的 wxParse 可直接插入。 而若是使用 rich-text，則須要先轉譯成正常 html 代碼，再插入才能成功（這種方法我用如下連接中的內容中包含了例子，確實可行）。 （反轉譯方法在我另外一篇博客裏面：轉譯html連接） 我使用該反轉譯方法確實能夠將 html轉譯字符串 轉譯爲正常 html代碼，這是通過測試的，，可是我本身項目中得到的大段詳情頁的 html轉譯字符串 在經以上代碼翻譯後再放入 rich-text 中卻不能顯示出來，目前緣由還沒有清楚，若有同行大神知道箇中蹊蹺，忘留言指教，我將在此再次更新。 二、得到的是正常 html 代碼，以下圖： 2、插入 html 代碼的 3 種方法：     一、使用組件 web-view：（這種方法只能插入完整網頁）              二、使用組件 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>  

  三、使用 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>