【支付寶小程序】 rich-text的應用

問題描述：在支付寶小程序中，rich-text的nodes 屬性只支持使用 Array 類型，如果需要支持 HTML String，則需要自己將 HTML String 轉化為 nodes 數組

解決方案：使用mini-html-parser2

代碼樣例：

index.axml

<rich-text type="text" nodes="{{htmlData}}"></rich-text>

 

index.js

import parse from 'mini-html-parser2';

Page({

　　data: {

　　　　htmlData:[]

　　},　

　　onLoad: function (options) {

　　　　var that = this;　　　　

　　　　var strhtml =

`<div><span>test</span>

<div><span>table test</span><table><thead><tr><th>title</th><th>title</th></tr></thead><tbody><tr><td colspan="2">yy</td><td>xx</td></tr></tbody></table></div></div>` ;

　　　　parse(strhtml, (err, htmlData) => {

　　　　　　if (!err) {

　　　　　　　　that.setData({

　　　　　　　　　　htmlData,

　　　　　　　　});

　　　　　　}

　　　　})

　　}

})

 

注意事項：html字符串里的標簽都要閉合，否則會轉不了nodes數組，比如:<br>一定要是<br/>

　　　　　import parse from 'mini-html-parser2',有一個前提需要提前將mini-html-parser2安裝到小程序根目錄下，安裝代碼為npm install mini-html-parser2 --save（cmd命令行下安裝，要先cd跳轉到小程序目錄，在執行安裝命令）

                  如果電腦沒有安裝npm，請參考 https://blog.csdn.net/wjnf012/article/details/80422313 先安裝好npm

                  安裝組件參考 https://blog.csdn.net/mentalitys/article/details/89400478