本項目由微信小程序開發(fā)論壇-WeAppDev http://weappdev.com/ 會員開發(fā)
原文地址: http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
垂直微信小程序開發(fā)交流社區(qū)
wxParse
微信小程序富文本解析自定義組件，支持HTML及markdown解析,可能是第一個微信小程序富文本解析組件
wxParse.gif
代碼庫
github地址: https://github.com/icindy/wxParse
示例
- cnode版wxParse使用
現(xiàn)狀
版本號: Alpha0.1-目前還不太適合直接使用
目前項目不屬于完整版，只是大概完成了基礎的構思項目，能夠解析基本的html，基礎的markdown。
希望大家能夠發(fā)現(xiàn)問題，提交問題，也可以foke提交您的修改代碼
- 項目目前在只是測試版，需要進一步完善
- 需要完善樣式wxParse,wxss
- 需要加強markdown解析html
- 其他
組成
-wxParse
--wxParse.js(工具類入口輸出口)
--wxParse.wxml(模版文件)
--wxParse.wxss(定義css)
使用方法
- 復制整個文件夾
wxParse/到根目錄 - 把樣式文件
wxParse.wxss引入到您調用本插件的作用域喜愛
@import "你的路徑/wxParse/wxParse.wxss";
- 在需要使用的模版的
x.wxml中引入模版文件wxParse.wxml
<import src="你的路徑/wxParse/wxParse.wxml"/>
<view class="wxParse">
<template is="wxParse" data="{{wxParseData}}"/>
</view>
- 在對應的js中引入
wxParse.js文件
var WxParse = require('你的路徑/wxParse/wxParse.js');
- 設置對應data值數(shù)組
wxParseData(必須使用wxParseData),并設置
// html解析
onLoad: function () {
console.log('onLoad')
var html = '<div class="content mousetrap"><h1 id="wxparse">wxParse-微信小程序富文本解析自定義組件，支持HTML及markdown解析</h1> <blockquote><p>微信小程序富文本解析自定義組件，支持HTML及markdown解析</p></blockquote> <h2 id="-">功能列表</h2> <ul> <li>動態(tài)加載代碼</li> <li>html轉json</li> <li>markdown轉html轉json</li> <li>富文本markdown解析</li> <li>自定義層級解析</li> <li>自定義樣式表</li> </ul> <h2 id="-">文件作用</h2> <pre class="hljs scala"><code class="scala"><span class="hljs-comment">// wxParse.wxml</span> <span class="hljs-comment">//用于解析使用的模版</span> .css{ text-align:center; } <div>test div</div></code></pre> <h2 id="-">開發(fā)信息</h2> <p><a target="_blank">微信小程序開發(fā)論壇</a></p> <div class="image-package"><br><div class="image-caption">微信小程序logo</div></div> </div>';
var that = this
//更新數(shù)據(jù)
that.setData({
wxParseData:WxParse('html',html)
})
}
// markdown解析
onLoad: function () {
console.log('onLoad')
var text = '# wxParse-微信小程序富文本解析自定義組件，支持HTML及markdown解析 \n'
+' > 微信小程序富文本解析自定義組件，支持HTML及markdown解析 \n\n'
+'## 功能列表 \n * 動態(tài)加載代碼 \n * html轉json \n * markdown轉html轉json \n * 富文本markdown解析 \n * 自定義層級解析 \n * 自定義樣式表 \n'
+'## 文件作用 \n'
+' ``` // wxParse.wxml //用于解析使用的模版 ``` \n'
+'## 開發(fā)信息 \n '
+' [微信小程序開發(fā)論壇](http://weappdev.com) \n'
+' ';
var that = this
//更新數(shù)據(jù)
that.setData({
wxParseData:WxParse('md',text)
})
}
功能列表
- 動態(tài)加載代碼
- html轉json
- markdown轉html轉json
- 富文本markdown解析
- 自定義層級解析
- 自定義樣式表
TODO
- 添加更多標簽的解析
- 去重與定制樣式
- 解決組件中的問題
第三方引用
html->json html2json
目前沒有找到更好的，感覺解析還是有問題，歡迎提供更好的代替品
開發(fā)信息
微信小程序開發(fā)論壇
垂直微信小程序開發(fā)交流社區(qū)
微信小程序logo
Time
- 2016.10.24 Alpha0.1 發(fā)布
