登录  /  注册

微信小程序富文本支持HTML及markdown解析wxParse Alpha0.1

Y2J
发布: 2017-05-01 10:32:24
原创
2520人浏览过

wxParse

微信小程序富文本解析自定义组件,支持html及markdown解析,可能是第一个微信小程序富文本解析组件

微信小程序富文本支持HTML及markdown解析wxParse Alpha0.1

wxParse.gif

代码库

github地址: github.com/icindy/wxParse

示例

  • cnode版wxParse使用

    github地址:github.com/icindy/wechat-webapp-cnode

现状

版本号: Alpha0.1-目前还不太适合直接使用

目前项目不属于完整版,只是大概完成了基础的构思项目,能够解析基本的html,基础的markdown。
希望大家能够发现问题,提交问题,也可以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(&#39;你的路径/wxParse/wxParse.js&#39;);
    登录后复制
  • 设置对应data值数组wxParseData(必须使用wxParseData),并设置

// html解析

onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var html = &#39;<p class="content mousetrap"><h1 id="wxparse">wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析</h1> <blockquote><p>微信小程序富文本解析自定义组件,支持HTML及markdown解析</p></blockquote> <h2 id="-">功能列表</h2> <ul> <li>动态加载代码</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; } <p>test p</p></code>
登录后复制

开发信息

微信小程序开发论坛

![](https://img.php.cn/upload/article/000/001/505/115945f096a6bba61f58be0b164de67b-1.png)

微信小程序logo

'; var that = this //更新数据 that.setData({ wxParseData:WxParse('html',html) }) }
// markdown解析

onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var text = &#39;# wxParse-微信小程序富文本解析自定义组件,支持HTML及markdown解析 \n&#39;
    +&#39; > 微信小程序富文本解析自定义组件,支持HTML及markdown解析 \n\n&#39; 
    +&#39;## 功能列表 \n * 动态加载代码  \n * html转json \n * markdown转html转json \n * 富文本markdown解析 \n * 自定义层级解析 \n * 自定义样式表 \n&#39;
    +&#39;## 文件作用 \n&#39;
    +&#39; " // wxParse.wxml //用于解析使用的模版 " \n&#39;
    +&#39;## 开发信息 \n &#39;
    +&#39; [微信小程序开发论坛](http://weappdev.com) \n&#39;
    +&#39; ![微信小程序logo](https://img.php.cn/upload/article/000/001/505/115945f096a6bba61f58be0b164de67b-1.png)&#39;;

    var that = this
    //更新数据
    that.setData({
      wxParseData:WxParse(&#39;md&#39;,text)
    })
  }
登录后复制

功能列表

  • 动态加载代码

  • html转json

  • markdown转html转json

  • 富文本markdown解析

  • 自定义层级解析

  • 自定义样式表

TODO

  • 添加更多标签的解析

  • 去重与定制样式

  • 解决组件中的问题

第三方引用

  • html->json html2json
    目前没有找到更好的,感觉解析还是有问题,欢迎提供更好的代替品

  • markdown->html showdown

以上就是微信小程序富文本支持HTML及markdown解析wxParse Alpha0.1的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号