微信小程序 —— 微信小程序解析html富文本插件wxParse

本文轉載自查看原文 2018-05-30 23:32 4252 微信小程序/ 前端/ 小程序富文本

下載並把wxParse放到小程序的目錄中

github下載地址：https://github.com/icindy/wxParse

一、基本使用方法

1. Copy文件夾wxParse,把wxParse放在與page同一級目錄

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

2.引入必要文件

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

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

3. 數據綁定

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);

4. 模版引用

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

如果這樣子引用，在解析圖片時圖片解析不出來，Console里報找不到該圖片的錯誤，按照下面步驟配置域名：

1. 修改wxParse包里的html2json.js文件

這里寫圖片描述

2. 添加域名

這里寫圖片描述

按照以上配置圖片就可以顯示出來了。

二、高級用法

1. 配置小表情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",
    });

2. 多數據格式

參見wikiwxParse多數據循環使用方法

三、二次開發

1. 基礎數據格式

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

2. 參見wikiwxParse二次開發文檔

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序/支付寶小程序 WxParse解析富文本（html）代碼微信小程序-富文本解析插件wxParse基礎使用及問題解決微信小程序使用wxParse解析html 微信小程序解析富文本小程序html轉wxml，微信小程序用wxParse解析html 微信小程序中顯示html富文本的方法微信小程序中顯示html富文本的方法微信小程序顯示html格式內容（wxParse使用及循環解析數據渲染）微信小程序小結(3) -- 使用wxParse解析html及多數據循環微信小程序 wxParse插件顯示視頻