微信小程序 - 解析富文本插件版们

news2024/12/25 12:32:18

一、html2wxml 插件版

https://gitee.com/qwqoffice/html2wxml

申请使用注意事项

插件版本解析服务是由 QwqOffice 完成，存在不稳定因素，如对稳定性有很高的要求，请自行搭建解析服务，或在自家服务器上直接完成解析。对于有关插件版本不能使用/不能解析的提问，不作任何回答。

在这里插入图片描述

效果

在这里插入图片描述
参考
小程序富文本解析 https://github.com/icindy/wxParse

PHP移植版highlight.js https://github.com/scrivo/highlight.php

PHP编写的Markdown解析器 https://github.com/erusev/parsedown

演示

扫码打开演示小程序

在这里插入图片描述

小程序端用法

三种版本演示

三种版本演示所用的小程序源码均在demo目录中

(1) 插件版本准备

  1. 打开小程序管理后台，转到设置 - 第三方服务，点击添加插件
    在这里插入图片描述

  2. 搜索 html2wxml ，选中并添加
    在这里插入图片描述

  3. 添加成功
    在这里插入图片描述

  4. 回到小程序开发环境，编辑 app.json ，添加插件声明，最新版为 1.4.0

"plugins": {
  	"htmltowxml": {
  		"version": "1.4.0",
  		"provider": "wxa51b9c855ae38f3c"
  	}
}

在这里插入图片描述

  1. 在对应页面的 json 文件，比如首页 index.json，添加使用插件组件的声明
 "usingComponents": {
   "htmltowxml": "plugin://htmltowxml/view"
}

在这里插入图片描述
基本配置就已经完成剩下的就是如何在页面上渲染使用了
在这里插入图片描述
因为是写好的页面数据比较多，我也是给大家标注了一下，就是声明一个空的数据去接收你的富文本字段而已
在这里插入图片描述
最后一步在页面上渲染使用就行
在这里插入图片描述

(2) 组件版本准备

  1. 复制整个 html2wxml-component 文件夹到小程序目录

  2. 在对应页面的 json 文件，比如首页 index.json，添加使用组件的声明，注意路径

 "usingComponents": {
   	"htmltowxml": "path/to/html2wxml-component/html2wxml"
}

(3) 模板版本准备

  1. 复制整个 html2wxml-template 文件夹到小程序目录

  2. 在对应页面的 js 文件，比如首页 index.js，添加引用声明，并使用html2wxml方法进行数据绑定，注意路径，参数分别为绑定的数据名、已解析的富文本数据、当前页面对象和容器与屏幕边缘的单边的距离

var html2wxml = require(‘path/to/html2wxml-template/html2wxml.js’);
html2wxml.html2wxml(‘article’, res.data, this, 5);
  1. 在对应页面的 wxml 文件，比如首页 index.wxml，添加引用模板的声明，并使用模板，注意路径和绑定的数据名
  <import src="path/to/html2wxml-template/html2wxml.wxml" />
  <template is="html2wxml" data="{{wxmlData:article}}" />
  1. 在对应页面的 wxss 文件，比如首页 index.wxss或app.wxss， 引入样式表和你喜欢的代码高亮样式，注意路径
   	@import "path/to/html2wxml-template/html2wxml.wxss";
   	@import "path/to/html2wxml-template/highlight-styles/darcula.wxss";

(4) 组件使用方法（仅适用于插件版本和组件版本）

属性名类型默认值说明
textStringnull要渲染的HTML或Markdown文本
jsonObject{}已经过解析的JSON数据
typeStringhtml要渲染的文本类型，可用值html,markdown,md
highlightBooleantrue是否对pre内文本进行代码高亮
highlightStyleStringdarculapre代码高亮样式，可用值default,darcula,dracula,tomorrow
highlightLanguagesArray[‘html’, ‘js’, ‘css’, ‘php’]pre代码高亮检测语言。
linenumsBooleantrue是否为pre添加行号显示
paddingNumber5html2wxml组件与屏幕边缘的单边距离，用于图片自适应
imghostStringnull对img标签中src属性可能的相对路径进行域名补全
showLoadingBooleantrue是否显示加载中动画
bindWxmlTagATapHandler点击a标签的回调

示例

// 将Page中的content数据作为HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代码高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代码行号显示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 代码高亮样式改为tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 设置代码高亮检测语言 (最多6个，自行搭建服务不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 对HTML数据中的img标签的相对路径补全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用加载中动画
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 将Page中的text数据作为Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 直接渲染Page中的已经过解析的obj数据
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

服务端用法

具体用法请参考：https://github.com/qwqoffice/html2wxml
富文本的解析默认是由QwqOffice完成，存在不稳定因素，你可以自行搭建解析服务或将解析组件引入到你的项目中。

  1. 复制整个 html2wxml-php 文件夹到项目目录中

  2. 引入类文件class.ToWXML.php

include( 'path/to/html2wxml-php/class.ToWXML.php' );
  1. 实例化html2wxml，进行解析并输出，示例：
 $towxml = new ToWXML();
   	$json = $towxml->towxml( '<h1>H1标题</h1>', array(
   		'type' => 'html',
   		'highlight' => true,
   		'linenums' => true,
   		'imghost' => null,
   		'encode' => false,
   		'highlight_languages' => array( 'html', 'js', 'php', 'css' )
   	) );
   	echo json_encode( $json, JSON_UNESCAPED_UNICODE );

参数介绍

参数名类型默认值说明
textString要渲染的HTML或Markdown文本
argsArray[]附加参数

args 参数介绍

参数名类型默认值说明
typeStringhtml要渲染的文本类型，可用值html,markdown,md
highlightBooleantrue是否对pre内文本进行代码高亮
highlight_languagesArray[‘html’, ‘js’, ‘css’, ‘php’]pre代码高亮检测语言。查看可用语言
linenumsBooleantrue是否为pre添加行号显示
imghostStringnull对img标签中src属性可能的相对路径进行域名补全
encodeBooleantrue是否对结果进行JSON编码

二、Towxml

https://gitcode.net/mirrors/sbfkcel/towxml

https://github.com/sbfkcel/towxml

Towxml 是一个可将HTML、markdown转换为WXML(WeiXin Markup Language)的渲染库。
由于微信小程序不能直接渲染HTML，因此富文本编辑器生成的HTML内容无法直接在小程序中展示。
可能是出于安全因素考虑，即使WXML文本在小程序中也是以字符串方式进行渲染。
所以……
然后……
于是，Towxml 就因此降临了。

特色

  • 支持代码语法高亮
  • 使用简单
  • 多主题动态支持
  • 极致的中文排版优化

快速上手

  1. 克隆TOWXML到小程序根目录
git clone https://github.com/sbfkcel/towxml.git
  1. 在小程序app.js中引入库
//app.js
const Towxml = require('/towxml/main');     //引入towxml库
App({
    onLaunch: function () {
    },
    towxml:new Towxml()                     //创建towxml对象，供小程序页面使用
})
  1. 在小程序页面文件中引入模版
<!--pages/index.wxml-->
 
<!--引入towxml模版入口文件，并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>
  1. 在小程序对应的js中请求数据
//pages/index.js
 
const app = getApp();
Page({
    data: {
        //article将用来存储towxml数据
        article:{}
    },
    onLoad: function () {
        const _ts = this;
 
        //请求markdown文件，并转换为内容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                //将markdown内容转换为towxml数据
                let data = app.towxml.toJson(res.data,'markdown');
 
                //设置文档显示主题，默认'light'
                data.theme = 'dark';
 
                //设置数据
                _ts.setData({
                    article: data
                });
            }
        });
    }
})
  1. 引入对应的WXSS
/**pages/index.wxss**/
 
/**基础风格样式**/
@import '/towxml/style/main.wxss';
 
/**如果页面有动态主题切换，则需要将使用到的样式全部引入**/
 
/**主题配色（浅色样式）**/
@import '/towxml/style/theme/light.wxss';
 
/**主题配色（深色样式）**/
@import '/towxml/style/theme/dark.wxss';

OK，大功告成~~

API

如果为了追求极致的体验，建议将markdown、html转换为towxml数据的过程放在服务器上，在小程序中直接请求数据即可。

  1. 依赖环境

需要 Node.js 环境。（已经安装请忽略）

  1. 安装 towxml
npm install towxml
  1. 接口使用
const Towxml = require('towxml');
const towxml = new Towxml();
 
//Markdown转WXML
let wxml = towxml.md2wxml('# Article title');
 
//html转WXML
let wxml = towxml.html2wxml('<h1>Article title</h1>');
 
//Markdown转towxml数据
let data = towxml.toJson('# Article title','markdown');
 
//htm转towxml数据
let data = towxml.toJson('# Article title');

Demo示例

  1. 将towxml/demo添加为小程序工程
  2. 再克隆towxml到demo目录
  3. 使用小程序开发工具编译即可

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/825065.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SCI论文的发文的模板(Elsevier,MDPI,IEEE)

SCI论文的发文的模板(Elsevier,MDPI,IEEE)

不同的SCI期刊都有自己的出版商&#xff0c;不同的出版商有不同的发文格式。 最简单的方式就是去查官网上面&#xff0c;常用的期刊格式如下。到对应的位置下载模板即可&#xff0c;推荐使用latex。 MDPI MDPI | Preparing Manuscripts in LaTeX Elsevier Guide for authors …
阅读更多...
P3373 【模板】线段树 2（乘法与加法）（内附封面）

P3373 【模板】线段树 2（乘法与加法）（内附封面）

【模板】线段树 2 题目描述 如题&#xff0c;已知一个数列&#xff0c;你需要进行下面三种操作&#xff1a; 将某区间每一个数乘上 x x x&#xff1b;将某区间每一个数加上 x x x&#xff1b;求出某区间每一个数的和。 输入格式 第一行包含三个整数 n , q , m n,q,m n,…
阅读更多...
【多线程初阶】多线程案例之单例模式

【多线程初阶】多线程案例之单例模式

文章目录 前言1. 什么是单例模式2. 饿汉模式3. 懒汉模式 --- 单线程版4. 懒汉模式 --- 多线程版5. 懒汉模式 --- 多线程改进版总结 前言 本文主要给大家讲解多线程的一个重要案例 — 单例模式. 关注收藏, 开始学习吧&#x1f9d0; 1. 什么是单例模式 单例模式是一种很经典的…
阅读更多...
数据结构-二叉树

数据结构-二叉树

数据结构-二叉树 二叉树的概念二叉树的遍历分类 建立二叉树&#xff0c;并遍历二叉树的最小单元二叉树的最小单元初始化初始化二叉树前序遍历的实现中序遍历的实现后序遍历的实现计算节点的个数计算树的深度求第k层的个数查找二叉树的元素分层遍历 全部代码如下 二叉树的概念 二…
阅读更多...
MySQL数据库服务器安装与配置（步骤简单详细，看完可学会下载MySQL所有版本）

MySQL数据库服务器安装与配置（步骤简单详细，看完可学会下载MySQL所有版本）

目录 引言 一&#xff0c;5.6.51数据库服务器下载 二&#xff0c;8.1.0最新版数据库服务器下载 三&#xff0c;MySQL客户端下载 引言 个人认为MySQl数据库目前推荐的两个版本系列为5.6.51和8.系列。 至于我们为什么要下载两个版本呢&#xff1f;是因为官方在数据库下载的结构…
阅读更多...
C++：STL的引入和string类

C++：STL的引入和string类

文章目录 STLSTL是什么STL的六大组件 stringstring类内成员函数迭代器 STL STL是什么 什么是STL&#xff1f;STL是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 STL的六大组件 要学一个新知识&#xf…
阅读更多...
微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）

微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）

前言 最近在做微信小程序项目中&#xff0c;有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能&#xff0c;遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题&#xff0c;网上很多说给scroll-view设置一个高度啥的就可以解决&#xff0c;有些人设置了…
阅读更多...
嵌入式软件开发有没有捷径

嵌入式软件开发有没有捷径

嵌入式软件开发有没有什么捷径&#xff1f;不定期会收到类似的问题&#xff0c;我只想说&#xff1a;嵌入式软件开发没有捷径 说实话&#xff0c;有这种想法的人&#xff0c;我其实想劝你放弃。对于绝大多数普通人&#xff0c;一步一个脚印就是捷径。 当然&#xff0c;这个问题…
阅读更多...
若依（RuoYi）系统添加自定义的模块

若依（RuoYi）系统添加自定义的模块

RuoYi系统是干什么用的，这里不过多说明了，自己搜一下，其提供的功能己经基本满足了一些简单的系统应用，如果想进行二次开发的小伙伴，可能会想仅仅用Ruoyi的后台权限管理，但是业务功能想进行自定义，可以借鉴一下本文。我们用的是前后端分离版 一、前端的自定义模块 其实在…
阅读更多...
Drools用户手册翻译——第四章 Drools规则引擎（九）Phreak算法

Drools用户手册翻译——第四章 Drools规则引擎（九）Phreak算法

这个地方我是先了解了Rete算法&#xff0c;才来看得这一部分&#xff0c;结果发现好像没有什么用......完全不知道讲的什么&#xff0c;估计之后在用的时候慢慢会明白。 RETE算法笔记&#xff1a;http://t.csdn.cn/iNZ8V 甩锅声明&#xff1a;本人英语一般&#xff0c;翻译只…
阅读更多...
二叉树的最近公共祖先,二叉搜索树的最近公共祖先（同一个思路）

二叉树的最近公共祖先,二叉搜索树的最近公共祖先（同一个思路）

题目链接   二叉树的最近公共祖先   给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。   百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可…
阅读更多...
GD32F103输入捕获

GD32F103输入捕获

GD32F103输入捕获程序&#xff0c;经过多次测试&#xff0c;终于完成了。本程序将TIMER2_CH2通道映射到PB0引脚&#xff0c;捕获PB0引脚低电平脉冲时间宽度。PB0是一个按钮&#xff0c;第1次按下采集一个值保存到TIMER2_CountValue1中&#xff0c;第2次按下采集一个值保存到TIM…
阅读更多...
如何使jwt生成的 token在用户登出之后失效?

如何使jwt生成的 token在用户登出之后失效?

问题1:如何使jwt生成的 token在用户登出之后失效? 由于jwt生成的token是无状态的,这体现在我们在每一次请求时 request都会新建一个session对象: 举个例子: @PostMapping(value = "/authentication/logout") public ResponseEntity<BaseResult> logOut(Htt…
阅读更多...
第十次CCF计算机软件能力认证

第十次CCF计算机软件能力认证

第一题&#xff1a;分蛋糕 小明今天生日&#xff0c;他有 n 块蛋糕要分给朋友们吃&#xff0c;这 n 块蛋糕&#xff08;编号为 1 到 n&#xff09;的重量分别为 a1,a2,…,an。 小明想分给每个朋友至少重量为 k 的蛋糕。 小明的朋友们已经排好队准备领蛋糕&#xff0c;对于每个朋…
阅读更多...
Spring之浅谈AOP技术

Spring之浅谈AOP技术

前言 AOP&#xff1a;Aspect Oriented Programming&#xff08;面向切面编程&#xff09;&#xff0c;一种编程范式&#xff0c;指导开发者如何组织程序结构。 OOP&#xff08;Object Oriented Programming&#xff09;面向对象编程 AOP和OOP一样都是一种编程思想&#xff0c…
阅读更多...
佑友防火墙后台命令执行漏洞

佑友防火墙后台命令执行漏洞

漏洞描述 佑友防火墙 后台维护工具存在命令执行&#xff0c;由于没有过滤危险字符&#xff0c;导致可以执行任意命令 漏洞复现 访问url 使用弱口令登录佑友防火墙后台 User: admin Pass: hicomadmin 点击系统管理 维护工具 Ping 输入可执行命令 127.0.0.1|cat /etc/passwd
阅读更多...
【高级程序设计语言C++】AVL树

【高级程序设计语言C++】AVL树

1. AVL树的概念2. AVL树的旋转2.1. 左单旋2.2 右单旋2.3 左右双旋2.4 右左双旋 1. AVL树的概念 AVL树是一种自平衡二叉搜索树&#xff0c;它在每次插入或删除节点时自动调整以保持树的平衡。AVL树的平衡是通过节点的高度差来衡量的&#xff0c;即左子树的高度和右子树的高度之…
阅读更多...
Gartner：2022年全球IaaS公有云服务市场增长30%，首次突破1000亿美元

Gartner：2022年全球IaaS公有云服务市场增长30%，首次突破1000亿美元

根据Gartner的统计结果&#xff0c;2022年全球基础设施即服务&#xff08;IaaS&#xff09;市场从2021年的928亿美元增长到1203亿美元&#xff0c;同比增长29.7%。亚马逊在2022年继续排在IaaS市场的第一名&#xff0c;其次是微软、阿里巴巴、谷歌和华为。 最新消息&#xff0c;…
阅读更多...
Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台免费搭建 qt

Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台免费搭建 qt

&#xfeff;Java版知识付费源码 Spring CloudSpring BootMybatisuniapp前后端分离实现知识付费平台 提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售…
阅读更多...
无涯教程-Lua - 文件I/O

无涯教程-Lua - 文件I/O

I/O库用于在Lua中读取和处理文件。 Lua中有两种文件操作&#xff0c;即隐式(Implicit)和显式(Explicit)操作。 对于以下示例&#xff0c;无涯教程将使用例文件test.lua&#xff0c;如下所示。 -- sample test.lua -- sample2 test.lua 一个简单的文件打开操作使用以下语句。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023