├── rich-parse ├── render-nodes │ ├── recursion.wxml │ ├── render-nodes.json │ ├── render-nodes.js │ ├── render-nodes.wxml │ └── render-nodes.wxss ├── rich-parse.wxml ├── rich-parse.json ├── rich-parse.wxss ├── rich-parse.js └── helper │ ├── htmlparser.js │ ├── wx-discode.js │ └── html2json.js ├── package.json └── README.md /rich-parse/render-nodes/recursion.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /rich-parse/rich-parse.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /rich-parse/rich-parse.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "render-nodes": "./render-nodes/render-nodes" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /rich-parse/render-nodes/render-nodes.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "render-nodes": "./render-nodes" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /rich-parse/rich-parse.wxss: -------------------------------------------------------------------------------- 1 | .rich-parse { 2 | font-family: Helvetica, sans-serif; 3 | font-size: 28rpx; 4 | color: #666; 5 | line-height: 1.8; 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wx-rich-parse", 3 | "version": "1.0.0", 4 | "description": "微信小程序富文本解析组件", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/jamieYou/wx-rich-parse.git" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "bugs": { 12 | "url": "https://github.com/jamieYou/wx-rich-parse/issues" 13 | }, 14 | "homepage": "https://github.com/jamieYou/wx-rich-parse#readme" 15 | } 16 | -------------------------------------------------------------------------------- /rich-parse/render-nodes/render-nodes.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | options: { 3 | addGlobalClass: true, 4 | }, 5 | 6 | properties: { 7 | nodes: { 8 | type: Array, 9 | value: [], 10 | }, 11 | parse_id: { 12 | type: String, 13 | value: '', 14 | } 15 | }, 16 | 17 | data: { 18 | imageWidths: {} 19 | }, 20 | 21 | methods: { 22 | onImgTap(e) { 23 | global.richParses[this.data.parse_id].onImgTap(e) 24 | }, 25 | 26 | onLinkTap(e) { 27 | global.richParses[this.data.parse_id].onLinkTap(e) 28 | }, 29 | 30 | onImgLoad(e) { 31 | this.data.imageWidths[e.target.dataset.src] = e.detail.width + 'px' 32 | this.setData({ imageWidths: this.data.imageWidths }) 33 | } 34 | } 35 | }) 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 微信小程序富文本解析组件 2 | 3 | ## 代码从 https://github.com/icindy/wxParse fork。 4 | 5 | 于 wxParse 的差异: 6 | 7 | 1. 使用自定义组件重写逻辑 8 | 2. 解决 wxParse 中的 template 不能循环使用的问题 9 | 10 | ## 特性 11 | 12 | | 支持特性 | 13 | | ------------- | 14 | | - [x] HTML的大部分标签解析 | 15 | | - [x] 内联style | 16 | | - [x] 标签Class | 17 | | - [x] 图片自适应规则 | 18 | | - [x] 图片多图片预览 | 19 | | - [x] 模版层级可扩展性 | 20 | | - [x] 多数据循环方式 | 21 | | - [x] 内联style | 22 | | - [x] a标签跳转 | 23 | 24 | ## 基本使用方法 25 | 26 | 1. Copy文件夹 `rich-parse` 到放置自定义组件的地方 27 | 28 | 2. 引入必要文件 29 | 30 | ``` 31 | // 在使用的View中引入 rich-parse 32 | { 33 | "usingComponents": { 34 | "rich-parse": "/自定义组件路径/rich-parse/rich-parse" 35 | } 36 | } 37 | ``` 38 | 39 | 3. 使用 40 | ``` 41 | 42 | // content 是字符串内容,type 默认 html,可选 md。 43 | // md 解析器需要手动配置,函数挂在 global.md2html 上才有效 44 | ``` 45 | 46 | 4. a 标签使用 47 | ``` 48 | 49 | ``` 50 | 51 | 5. 图片预览 52 | ``` 53 | 54 | ``` 55 | 56 | ## 相关文章 57 | 58 | * [wxDiscode-微信小程序特殊字符转义符转化工具类](http://weappdev.com/t/wxdiscode/203) 59 | -------------------------------------------------------------------------------- /rich-parse/rich-parse.js: -------------------------------------------------------------------------------- 1 | const { html2json } = require('./helper/html2json') 2 | 3 | global.richParses = {} 4 | 5 | Component({ 6 | options: { 7 | addGlobalClass: true, 8 | }, 9 | 10 | properties: { 11 | content: { 12 | type: String, 13 | value: '', 14 | observer(newVal) { 15 | this.parse(newVal) 16 | } 17 | }, 18 | type: { 19 | type: String, 20 | value: 'html', 21 | }, 22 | preview: { 23 | type: Boolean, 24 | value: true, 25 | }, 26 | }, 27 | 28 | data: { 29 | rich: null, 30 | parse_id: null, 31 | }, 32 | 33 | attached() { 34 | // 把组件实例放到全局上,让 rich-render 里面可以访问 35 | global.richParses[this.__wxExparserNodeId__] = this 36 | this.setData({ parse_id: this.__wxExparserNodeId__ }) 37 | }, 38 | 39 | ready() { 40 | this.parse(this.data.content) 41 | global.tt = this 42 | }, 43 | 44 | detached() { 45 | delete global.richParses[this.__wxExparserNodeId__] 46 | }, 47 | 48 | methods: { 49 | parse(content, cb) { 50 | const { type } = this.data 51 | if (type === 'md' || type === 'markdown') { 52 | const { md2html = v => v } = global 53 | content = md2html(content) 54 | } 55 | const transData = html2json(content, 'rich') 56 | this.setData({ rich: transData }, cb) 57 | }, 58 | 59 | onImgTap(e) { 60 | const detail = { 61 | current: e.target.dataset.src, // 当前显示图片的http链接 62 | urls: this.data.rich.imageUrls, // 需要预览的图片http链接列表 63 | } 64 | this.triggerEvent('imgTap', detail, {}) 65 | this.data.preview && wx.previewImage(detail) 66 | }, 67 | 68 | onLinkTap(e) { 69 | const { href } = e.currentTarget.dataset 70 | this.triggerEvent('linkTo', { href }, {}) 71 | } 72 | } 73 | }) 74 | -------------------------------------------------------------------------------- /rich-parse/render-nodes/render-nodes.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |