[轉]wxParse-微信小程式富文本解析元件

​

基本使用方法

• Copy檔案夾

  wxParse

- wxParse/
  -wxParse.js(必須存在)
  -html2json.js(必須存在)
  -htmlparser.js(必須存在)
  -showdown.js(必須存在)
  -wxDiscode.js(必須存在)
  -wxParse.wxml(必須存在)
  -wxParse.wxss(必須存在)
  -emojis(可選)
      

• 引入必要檔案

//在使用的View中引入WxParse子產品
var WxParse = require('../../wxParse/wxParse.js');
      

//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";
      

• 資料綁定

var article = '<div>我是HTML代碼</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的資料名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體資料(必填)
* 4.target為Page對象,一般為this(必填)
* 5.imagePadding為當圖檔自适應是左右的單一padding(預設為0,可選)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
      

• 模版引用

// 引入模闆
<import src="你的路徑/wxParse/wxParse.wxml"/>
//這裡data中article為bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
      

進階用法

• 配置小表情emojis

/**
* WxParse.emojisInit(reg,baseSrc,emojis)
* 1.reg，如格式為[00]=>指派 reg='[]'
* 2.baseSrc,為存儲emojis的圖檔檔案夾
* 3.emojis,定義表情鍵值對
*/
WxParse.emojisInit('[]', "/wxParse/emojis/", {
      "00": "00.gif",
      "01": "01.gif",
      "02": "02.gif",
      "03": "03.gif",
      "04": "04.gif",
      "05": "05.gif",
      "06": "06.gif",
      "07": "07.gif",
      "08": "08.gif",
      "09": "09.gif",
      "09": "09.gif",
      "10": "10.gif",
      "11": "11.gif",
      "12": "12.gif",
      "13": "13.gif",
      "14": "14.gif",
      "15": "15.gif",
      "16": "16.gif",
      "17": "17.gif",
      "18": "18.gif",
      "19": "19.gif",
    });
      

• 多資料格式
• 參見wiki​​wxParse多資料循環使用方法​​

FAQ

• 參見wiki​​weParse常見問題FAQ​​

二次開發

• 基礎資料格式

parsedata:{
    view:{},//樣式存儲
    nodes:{},//展示需要的存儲節點
    images:[],//存放圖檔對象數組
    imageUrls:[],//存放圖檔url數組
}