优点:目前已知唯一可以转化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. 移动端安全 - 安卓Android - 工具相关

    渗透工具 drozer .安装文件解压后文件介绍 setup.exe ---安装 agent.apk ---用于调试 - 安装在安卓手机上 使用命令 . cd 到 drozer 安装目录 . adb ...

  2. std::map使用结构体自定义键值

    使用STL中的map时候,有时候需要使用结构题自定义键值,比如想统计点的坐标出现的次数 struct Node{ int x,y; }; ...... map<Node,int>mp; m ...

  3. 转义BABEL的POLYFILL和RUNTIME的区别

    babel-polyfill 使用场景 Babel 默认只转换新的 JavaScript 语法,而不转换新的 API.例如,Iterator.Generator.Set.Maps.Proxy.Refl ...

  4. kmp(暴力匹配)

    http://poj.org/problem?id=3080 Blue Jeans Time Limit: 1000MS   Memory Limit: 65536K Total Submission ...

  5. 怕忘记了CSS中position的absolute和relative用法

    CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...

  6. 阿里云云监控agent插件 - Linux版

    阿里云云监控agent插件使用指南 1.安装(注意,要以“root”权限运行,复制 sudo后面的就行,别把#也复制进去) #64位 # sudo bash -c "wget -e 'htt ...

  7. style中各种选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. BUUCTF--新年快乐

    测试文件:https://buuoj.cn/files/bbf9f68a97fd551edec384914d4f3fbe/93c43c5c-3d4d-4d17-a9a1-4ffb65ebb2fb.zi ...

  9. 【学习总结】Python-3-转义字符

    参考: 本教程的评论区:菜鸟教程-Python3-Python数字 转义字符: 在需要在字符中使用特殊字符时,python用反斜杠()转义字符 END

  10. differential evolution代码实例(DE算法)

    DE算法是遗传算法中一种比较流行的算法,这种算法比较简单,速度也比较快,下面给出一份示例代码 clear all; close all; clc 2 %Function to be minimized ...