微信小程序之富文本解析

示例效果圖

• github地址wxParse https://github.com/icindy/wxParse

一、使用方法

1、下載wxParse文件，拷貝wxParse文件夾到自己的小程序項目中

2、在項目文件中使用

• （1）、在需要使用的wxml文件中引入WxParse.wxml

    <!--當前.wxml-->
    <import src="../../wxParse/wxParse.wxml" />
  

• （2）、在當前頁對應的js中引入wxParse.js

    //對應頁.js 
    var WxParse = require('../../wxParse/wxParse.js');
  

• （3）、使用template組件

    <!--當前.wxml-->
    <import src="../../wxParse/wxParse.wxml" />
    <view class="container">
        <template is="wxParse" data="{{wxParseData:article.nodes}}" />
    </view>
  

• （4）、在當前頁的js中使用WxParse中的方法

    //當前頁.js
    var WxParse = require('../../wxParse/wxParse.js');
    Page({
      data: {
        
      }, 
      onLoad: function () {
        var that = this;
        var love =
          `<div>
                <span>請說出你最喜歡最喜歡的明星？</span>
                <ul>
                    <li>易烊千璽</li>
                    <li>迪麗熱巴</li>
                </ul>
            </div>`;
        WxParse.wxParse('article', 'html', love, that, 5);
      }, 
    })
        /**
    * WxParse.wxParse(bindName , type, data, target,imagePadding)
    * 1.bindName綁定的數據名(必填)
    * 2.type可以為html或者md(必填)
    * 3.data為傳入的具體數據(必填)
    * 4.target為Page對象,一般為this(必填)
    * 5.imagePadding為當圖片自適應是左右的單一padding(默認為0,可選)
    */
  

• 最近用微信小程序寫項目，遇到富文本這個問題，看了github，不是特別清楚，這一篇文章很清楚
• 原文地址： https://www.jianshu.com/p/50cbb428ad1c