特性

支援特性 實驗功能 ToDo
[x] HTML的大部分標籤解析
[x] 小表情emjio [x] table標籤
[x] 內聯style
[x] a標籤跳轉
[x] 標籤Class
[x] 動態新增
[x] 圖片自適應規則
[x] 圖片多圖片預覽
[x] 模版層級可擴充套件性
[x] 多資料迴圈方式
[x] 內聯style
基本使用方法

Copy資料夾wxParse
這裡寫圖片描述
- wxParse/
-wxParse.js(必須存在)
-html2json.js(必須存在)
-htmlparser.js(必須存在)
-showdown.js(必須存在)
-wxDiscode.js(必須存在)
-wxParse.wxml(必須存在)
-wxParse.wxss(必須存在)
-emojis(可選)
1
2
3
4
5
6
7
8
9
引入必要檔案
//在使用的View中引入WxParse模組
var WxParse = require(‘../../wxParse/wxParse.js’);
1
2
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import “/wxParse/wxParse.wxss”;
1
2
資料繫結
var article = ‘

我是HTML程式碼 ‘;
/**
* 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);
1
2
3
4
5
6
7
8
9
10
11
模版引用
// 引入模板

//這裡data中article為bindName

1
2
3
4
注意點

在上面的基本使用裡面在.js檔案和.wxml檔案裡面出現的article這個是兩個檔案裡面是一樣的。但是article是js檔案裡面的一個變數是可以變的，只要保證js檔案和wxml檔案裡面變數名一致即可。

例項

例項結構

這裡寫圖片描述
page頁面是測試頁面。

wxml檔案

1
2
3
4
5
wxss檔案

@import “../../wxParse/wxParse.wxss”;
1
js檔案

var WxParse = require(‘../../wxParse/wxParse.js’);
data: {
article: ‘

《靜夜思》· 李白
床前明月光，
疑是地上霜。
舉頭望明月，
低頭思故鄉。




‘,
},
/**
* 生命週期函式–監聽頁面載入
*/
onLoad: function (options) {
var that = this;
var temp = WxParse.wxParse(‘article’, ‘html’, that.data.article, that, 5);
that.setData({
article: temp
})
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
效果圖

這裡寫圖片描述

總結

這裡使用這個外掛並不難。但是需要主要data裡面的那個變數article(這個名字是可變)在幾個位置是一樣的。需要看看小程式-template。