最近在做小程序的时候,从github上看到了一个开源的挺不错的微信小程序组件:wxParse-微信小程序富文本解析组件 。推荐给大家使用看看!觉得有用的话,给作者加个star !

wxParse 支持Html及markdown转wxml可视化,下面给出了几张项目运行截图 。

如何使用该组件呢?

1、从作者的开源项目

https://github.com/icindy/wxParse

复制wxParse代码加入到我们的项目中

2、引入必要文件

3、数据绑定

上面这些是作者的项目介绍,可能这样看不是很明白怎么使用 。强烈建议自己下载项目到本地,自己运行一下程序,更直接的了解项目的使用!以下,是我自己运行的截图,看起来不是很复杂,稍微研究一下,应该能很快上手 。

我也稍微使用了一下,效果图如下。这边说一下,本来打算发布这个小程序的,不过由于腾讯审核的原因,个人不允许发布博客类型的小程序,所以这个小程序虽然已经完成了,却迟迟不能发布,只能当例子学习一下!

下面是关键代码,贴出来,大家一起学习一下哈!

var WxParse = require('../../wxParse/wxParse.js');
Page({data: {},onLoad: function () {var that = this;/*** html解析示例*/var article = `< !DOCTYPE HTML ><!--注释: wxParse试验文本--><div style="text-align:center;margin-top:20px;"><img src="http://www.cxyquan.com/wp-content/uploads/2018/04/2.png" alt=""><h2 >本小程序是基于WordPress制作完成的</h2></div><div style="margin-top:10px;"><h3 style="color: #000;">小程序声明</h3><blockquote>小程序只提供对程序猿编程相关的内容,其余的都不考虑,欢迎大家投稿,一起学习!</blockquote><div style="margin-top:10px;"><h3 style="color: #000;">如何联系</h3><ul><li style="color: blue;">QQ: 842546199</li><li style="color: blue;">微信:18159020735</li><li style="color: blue;">电话:18159020735</li><li style="color: blue;">邮箱:llpdev@163.com</li><li style="color: red;">商务合作:请加微信 </li></ul></div><div style="margin-top:10px;"><h3 style="color: #000;">个人公众号</h3><h5 style="margin:8px;">一个学习编程技术和读者福利共存的公众号,每天推送高质量的优秀博文和原创文章,开源项目,实用工具,面试技巧等 。 我们的目标是做到最好公众号推送平台,服务于所有的程序员开发者 。公众号每月至少准备一次读者送书福利! 欢迎关注,老铁!</h5><img src="http://www.cxyquan.com/wp-content/uploads/2018/04/qrcode_for_gh_3634ff565445_258.jpg" alt="">    </div>    WxParse.wxParse('article', 'html', article, that, 5);}
})

不多说了,这篇就是给作者做宣传的(作者没联系我,个人觉得不错,顺手写了这篇文章),好的项目,应该被大家知道,大家觉得不错的,前文说了,记得给作者点个star 呀!

后续,大家有好的项目,可以私聊我,公众号可以给你做宣传,好的项目,不要藏着掖着!拿出来大家一起学习一下,共同进步!

最后,大家有兴趣学习小程序开发的,如果你不知道如何学习,建议你可以先看入门教程视频,视频可以关注下面公众号,公众号后台回复:小程序

如果你需要本文介绍的这个项目的源代码,公众号后台回复:wxParse !

想进微信技术群的可以加好友备注:加技术群 (最多添加500人)

推荐项目| 微信小程序富文本解析组件-wxParse相关推荐

  1. 微信小程序富文本解析

    微信小程序富文本解析 *人狠话不多,直接代码搞起* html代码(后台返回的html代码) <p>这是一段文字</p><p><strong>这是加粗的字 ...

  2. 微信小程序 富文本编辑器组件 editor

    微信小程序 富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...

  3. 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解

    前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...

  4. uniapp微信小程序富文本编辑器组件

    前言 最近需要实现一个微信小程序的富文本编辑器,由于使用的是uniapp框架开发的小程序,因此就改造了一下微信小程序官方案例,并封装成了一个组件. uniapp-editor gitee仓库 实现效果 ...

  5. [转]wxParse-微信小程序富文本解析组件

    本文转自:https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/-wxParse.js(必须存在)-html2json.j ...

  6. 微信小程序富文本解析 rich-text 、wxParse、mp-html

    rich-text 微信自带标签 很多局限性 还有后台的富文本 font 标签 size 不生效.字体大小无法设置 wxParse 微信很早的那期 副本插件 封装.拥有7.7k stars已停止维护了 ...

  7. 使用微信小程序 富文本编辑器组件 editor

    先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档 文档上的代码比较少建议在开 ...

  8. 微信小程序富文本展示,wxParse使用

    wxParse的下载地址:https://github.com/icindy/wxParse 1.上述地址中下载wxParse文件 2. 解压文件将wxParse中内容拷贝到项目中如下图所示: 3.在 ...

  9. 微信小程序富文本编辑器获取内容

    1.新建wxParse文件夹 里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...

  10. 微信小程序 富文本组件使用

    能够使用微信小程序提供的富文本组件及引入的第三方富文本组件 掌握使用微信小程序的表单组件 掌握使用微信小程序的form表单及如何提交数据 掌握使用微信小程序的导航及跳转组件 一.基础内容组件  1.1 ...

最新文章

  1. [ZT]如何取得客户端的Windows登录用户名?
  2. Shell 前后台任务
  3. 线程 synchronized锁机制
  4. 在win10系统下怎样快速切换任务视图
  5. maven原型_Maven原型创建技巧
  6. 独立游戏:四人团队如何100天做到百万用户
  7. C++轻量级微服务_微服务的部署
  8. Linux下安装matlab2014a
  9. 《高等数学》练习题库含答案(大学期末复习资料)
  10. 只要五分钟,即可将博客搬到公众号并完美布局(原创-独家)!
  11. 2022年视频号的五大机会,教育商家该如何上车?
  12. 《东周列国志》第十八回 曹沫手剑劫齐侯 桓公举火爵宁戚
  13. mac如何安装vue(简单明了)
  14. github上的python项目 运行,12月Github上热门的Python开源项目
  15. Linux原理与应用A卷广东科技,Linux操作系统应用选择题附答案(广东开放大学)...
  16. 计算机怎么改磁盘位置,如何修改磁盘0和磁盘1的硬盘位置
  17. 台式计算机后面的端口示意图,如何识别戴尔台式 PC 上的集成视频端口
  18. php监听iframe加载完成,window_IE iframe的onload方法分析小结,判断iframe是否加载完成的完美 - phpStudy...
  19. 链接虚拟机orecal
  20. 高中计算机试讲教案模板,高中音乐试讲教案模板模板.docx

热门文章

  1. Silverlight:针式打印机文字模糊的改善办法
  2. Android官方文档—APP组件(Content Providers)(Contacts Provider)
  3. InstallShield 2020 基本使用教程
  4. 2021 9.14 p.m.小结 以及 数独问题探索(T3)
  5. VS2008 ~ VS2019下载地址
  6. linux mencoder,linux下mencoder的一些用法
  7. 博主亲测Mac OSX 上好用必备的PC端软件
  8. 如何在OTN网站下载Grid方法(Oracle RAC)
  9. 强网杯2019线上赛-misc
  10. 【eoeAndroid社区索引】Android二维码知识汇总