liuz-my-parse

0.4.0 • Public • Published

myParse 是基于开源软件 wxParse 的一款富文本解析组件,适用于支付宝小程序。

具体修改内容参见蚂蚁金服开发者社区的文章:《支付宝富文本解析组件》

myParse - 支付宝小程序富文本解析组件

支持 Html 及 markdown 转 axml 可视化。作用是将 Html/Markdown 转换为支付宝小程序的可视化方案。

特性

支持特性 实验功能 ToDo
- [x] HTML的大部分标签解析 [x] 小表情emjio [x] table标签
- [x] 内联style [x] a标签跳转
- [x] 标签Class [x] 动态添加
- [x] 图片自适应规则
- [x] 图片多图片预览
- [x] 模版层级可扩展性
- [x] 多数据循环方式
- [x] 内联style

感谢

@icindy | @stonewen| @Daissmentii | @wuyanwen | @vcxiaohan |

基本使用方法

1. Copy文件夹 myParse

- myParse/
  -myParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -myDiscode.js(必须存在)
  -myParse.axml(必须存在)
  -myParse.acss(必须存在)
  -emojis(可选)

2. 引入必要文件

// 在使用的 View 中引入 myParse 模块
var MyParse = require('../../myParse/myParse.js');
// 在使用的 acss 中引入 myParse.acss,可以在app.acss
@import "/myParse/myParse.acss";

3. 数据绑定

var article = '<div>我是HTML代码</div>';
/**
* MyParse.myParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
MyParse.myParse('article', 'html', article, that, 5);

4. 模版引用

<!-- 引入模板 -->
<import src="你的路径/myParse/myParse.axml"/>
<!-- 这里data中article为bindName -->
<template is="myParse" data="{{ myParseData:article.nodes }}"/>

为什么叫 myParse?

因为微信小程序的命名空间是 wx(「微信」的缩写),而支付宝小程序的命名空间是 my(「蚂蚁」的缩写)。为了在支付宝小程序使用中更符合命名规范,将 wxParse 改为 myParse

Package Sidebar

Install

npm i liuz-my-parse

Weekly Downloads

0

Version

0.4.0

License

none

Unpacked Size

497 kB

Total Files

160

Last publish

Collaborators

  • liuz2