优点:目前已知唯一可以转化HTML到小程序识别的插件

缺点:转换一个HTML标签可能需要大量的微信小程序标签还有样式

配置:第一步,下载

https://github.com/icindy/wxParse
第二步,放入项目中,我选择pages目录下
第三步,配置
wxml加入:

<import src="../wxParse/wxParse.wxml"/>
在需要的地方使用:
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
其中article是后台html值的变量名
 
js加入:
var WxParse = require('../wxParse/wxParse.js');
这里貌似使用es6的import会有错误
我在onload事件写下了:
WxParse.wxParse('article', 'html', this.data.article, this, 5);
注意的是第三个和第四个参数,前几个可以固定不变但是第一个要和数据变量名一致,第三个是后台数据,第四个是指的小程序标签,可以注册多个wxparse
wxss加入:
@import '../wxParse/wxParse.wxss';
到此完成,但是要注意的是a标签的转化,需要加入一个方法,示例如下:
wxParseTagATap: function (e) {
var href = e.currentTarget.dataset.src;
console.log(href);
wx.redirectTo({
url: href
});
}
这个在点击a标签的时候控制台其实是输出了警告信息的
此外url也只能是小程序内部地址,这是个限制,他不能跳到外部,这里我想后台编辑的时候可以用二维码替代,小程序跳转外部地址可以使用web-view标签,详情参考官方文档
 

wxparse使用(富文本插件)的更多相关文章

  1. 小程序快速部署富文本插件wxParser

    为了解决html2wxml在ios下字体过大问题,又发现一个比较好用的富文本插件:wxParser. 目前 wxParser 支持对一般的富文本内容包括标题.字体大小.对齐和列表等进行解析.同时也支持 ...

  2. wxParse解析富文本内容使点击图片可以选中并实现放大缩小

    wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...

  3. 【富文本、JS】将接口传来的全部纯URL替换为富文本插件能识别到的img标签

    replaceURLWithImage (text) { var a = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0 ...

  4. 小程序解析html之富文本插件wxParse

    近期,开发小程序时,遇到后台给我返回了一串html代码,需要我这边来解析,头疼了好久,网上找资料找了变天,终于找到wxParse,然而看到的都是针对于页面中有单个html或者固定数据的,我现在的问题是 ...

  5. 微信小程序开发--富文本插件wxParse的使用

    昨天一位网友问我小程序怎么解析富文本.他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来.但是这两种方法都是不行了.后来找到了wxParse-微信小程序富文本解析组件. 特性 ...

  6. 微信小程序/支付宝小程序 WxParse解析富文本(html)代码

    小程序本身并不太支持html代码,比如html的img.span.p这个时候改这么办呢?需要用到一个小插件WxParse来实现. 小程序高级交流群:336925436  微信小程序支持富文本编辑器代码 ...

  7. 富文本插件KindEditor

    具体用法查看官网http://kindeditor.net/doc.php {% load staticfiles %} <!DOCTYPE html> <html lang=&qu ...

  8. vue PC端页面引入vue-quill-editor富文本插件

    项目需要:在添加新类别的弹框中,要在输入框中输入多条描述信息,不同的描述信息要换行输入,输入后点击确定传给后端,接口返回成功后点击查看刚添加的新类别时,描述框中展现多条换行的描述信息也要跟填写时一样( ...

  9. 微信小程序template富文本插件image宽度被js强制设置

    这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用, ...

  10. 百度UEditor富文本插件的使用

    这个富文本还是功能挺全的. 官方文档地址 下载地址 常用接口 较完整代码仓库 UEditor下载后直接运行即可访问,但在上传文件时需要单独再做配置. [很详细的SpringBoot整合UEditor教 ...

随机推荐

  1. 编程语言-Ruby-问题整理

    安装 https://github.com/oneclick/rubyinstaller2/releases/tag/RubyInstaller-2.6.0-1

  2. 性能测试工具 Jmeter GET 请求 参数为 Json 串且参数中存在变量的转化

    2.在BeanShell PreProcessor的实现:

  3. forEach究竟能不能改变数组的值

    forEach究竟能不能改变数组的值 :https://blog.csdn.net/ZhengKehang/article/details/81281563 初学者每次提到Array对象的时候有些烦人 ...

  4. android测试开发概念

    一:测试分类 1.分类概览 按测试阶段划分: 单元测试 集成测试 系统测试 验收测试 按是否覆盖源代码: 黑盒测试: 功能测试: 界面测试 逻辑测试 安装测试 应用性测试 兼容性测试 性能测试: 稳定 ...

  5. JVM(12)之 可视化分析工具

    开发十年,就只剩下这套架构体系了! >>>   经过前几篇博文对堆内存以及垃圾收集机制的学习,相信小伙伴们已经建立了一套比较完整的理论体系!本篇博客就根据已有的理论知识,通过可视化工 ...

  6. hud2243 考研路茫茫——单词情结

    考研路茫茫--单词情结 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Problem ...

  7. RabbitMQ ——与Spring集成及exchange的direct、topic方式实现和简单队列实现

    程序整体结构 Maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  8. elasticsearch 基础 —— 请求体查询

    请求体查询 简易 查询 -query-string search- 对于用命令行进行即席查询(ad-hoc)是非常有用的. 然而,为了充分利用查询的强大功能,你应该使用 请求体 search API, ...

  9. route - 显示 / 操作IP选路表

    总览 SYNOPSIS route [-CFvnee] route [-v] [-A family] add [-net|-host] target [netmask Nm] [gw Gw] [met ...

  10. 使用MyEclipse创建Servlet

    https://www.yiibai.com/servlet/creating-servlet-in-myeclipse-ide.html 如何在myeclipse IDE中创建Servlet? 要在 ...