优点:目前已知唯一可以转化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. Entity Framework 中遇到的一些小问题

    一.在多表关联中,一个表中有另一个表的model累,在Include方法里提示lambda表达式不是委托类型,这时候需要using System.Data.Entity; 二.插入数据时,主键并非自增 ...

  2. knn原理及借助电影分类实现knn算法

    KNN最近邻算法原理 KNN英文全称K-nearst neighbor,中文名称为K近邻算法,它是由Cover和Hart在1968年提出来的 KNN算法原理: 1. 计算已知类别数据集中的点与当前点之 ...

  3. google+ sign in and get the oauth token 转摘:https://gist.github.com/ianbarber/5170508

    package com.example.anothersignintest;   import java.io.IOException;   import com.google.android.gms ...

  4. zabbix 微信告警脚本

    #!/usr/bin/env python3 import requests import json import sys import os def access_token(Corpid,Secr ...

  5. springcloud费话之Eureka集群

    目录: springcloud费话之Eureka基础 springcloud费话之Eureka集群 springcloud费话之Eureka服务访问(restTemplate) springcloud ...

  6. eclipse安装weblogic Server服务器

    1.首先打开eclipse,第一次进入欢迎画面点击上方标签X,关闭欢迎标签 2.关闭欢迎标签后,进入eclipse操作界面,在上方的菜单栏,选择windows下拉菜单,选择子菜单Preference ...

  7. USTC现代软件工程--summary

    起笔:我希望先简单总结一下我在这门课程中经历的一些工作以及学习到的一些东西,再对自己.队友.老师做一个评价.然后我想提出一些对这门课程的一些看法和建议,与自己的心得体会. 第一部分: 我在这门课上经历 ...

  8. 2018-8-10-win10-uwp-线程池

    title author date CreateTime categories win10 uwp 线程池 lindexi 2018-08-10 19:16:50 +0800 2018-05-15 1 ...

  9. printf, fprintf, sprintf, snprintf, vprintf, vfprintf, vsprintf, vsnprintf - 输出格式转换

    总览 (SYNOPSIS) #include <stdio.h> int printf(const char *format, ...); int fprintf(FILE *stream ...

  10. 初学Java 从控制台读取输入

    代码 import java.util.Scanner; public class ComputeArea { public static void main(String[] args) { Sca ...