Mini programa WeChat: análisis de complementos de texto enriquecido

1. Versión del complemento html2wxml

https://gitee.com/qwqoffice/html2wxml

Notas sobre el uso de la aplicación

El servicio de análisis de la versión del complemento se QwqOfficecompleta con y hay factores inestables. Si tiene altos requisitos de estabilidad, cree el servicio de análisis usted mismo o complete el análisis directamente en su propio servidor. No habrá respuesta a las preguntas sobre la versión del complemento que no se puede utilizar/analizar.

Efecto

Miniprograma de referencia Análisis de texto enriquecido https://github.com/icindy/wxParse

Versión portada de PHP resaltado.js https://github.com/scrivo/highlight.php

Analizador de Markdown escrito en PHP https://github.com/erusev/parsedown

manifestación

Escanee el código QR para abrir el subprograma de demostración

Uso del miniprograma

Demostraciones de tres versiones

Los códigos fuente de los miniprogramas utilizados en las tres versiones de demostraciones se encuentran todos en el directorio de demostración.

(1) Preparación de la versión del complemento

1. Abra el fondo de administración del mini programa, vaya a Configuración - Servicios de terceros, haga clic en Agregar complemento
   

2. Buscar html2wxml, seleccionar y agregar
   

3. Agregado exitosamente
   

4. Regrese al entorno de desarrollo del miniprograma, edite app.json y agregue la declaración del complemento. La última versión es 1.4.0

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

5. En el archivo de la página correspondiente json, como la página de inicio index.json, agregue una declaración utilizando el componente de complemento

 "usingComponents": {
    
    
   "htmltowxml": "plugin://htmltowxml/view"
}

La configuración básica ya está completa, el resto es cómo renderizarla y usarla en la página.

Debido a que la página escrita tiene muchos datos, también la marqué para todos, que es declarar datos vacíos para recibir su texto enriquecido. campo. El último

paso Simplemente renderícelo en la página y úselo

(2) Preparación de la versión del componente

1. Copie la carpeta completa html2wxml-componental directorio del subprograma

2. En jsonel archivo de la página correspondiente, como la página de inicio index.json, agregue la declaración de uso del componente, preste atención a la ruta

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

(3) Preparación de la versión de la plantilla

1. Copie la carpeta completa html2wxml-templateal directorio del subprograma

2. En el archivo js de la página correspondiente, como la página de inicio index.js, agregue una declaración de referencia y use html2wxmlel método para el enlace de datos, preste atención a la ruta, los parámetros son el nombre de los datos enlazados, los datos de texto enriquecido analizados y el actual. objeto de la página y el borde del contenedor y la pantalla Distancia unilateral

var html2wxml = require(‘path/to/html2wxml-template/html2wxml.js’);
html2wxml.html2wxml(‘article’, res.data, this, 5);

3. En wxmlel archivo de la página correspondiente, como la página de inicio index.wxml, agregue una declaración que haga referencia a la plantilla y use la plantilla, preste atención a la ruta y al nombre de los datos vinculados.

  <import src="path/to/html2wxml-template/html2wxml.wxml" />
  <template is="html2wxml" data="{
    
    {wxmlData:article}}" />

4. En wxssel archivo de la página correspondiente, como la página de inicio index.wxsso app.wxss, introduzca la hoja de estilo y su código favorito resaltando el estilo, preste atención a la ruta

   	@import "path/to/html2wxml-template/html2wxml.wxss";
   	@import "path/to/html2wxml-template/highlight-styles/darcula.wxss";

(4) Cómo utilizar los componentes (solo aplicable a la versión del complemento y a la versión del componente)

Nombre del Atributo	tipo	Valores predeterminados	ilustrar
texto	Cadena	nulo	Texto HTML o Markdown para renderizar
json	Objeto	{}	Datos JSON analizados
tipo	Cadena	HTML	Tipo de texto a renderizar, valores disponibles html, markdown,md
destacar	Booleano	verdadero	Si se debe realizar resaltado de código preen texto interno
resaltarEstilo	Cadena	Dárcula	preEstilo de resaltado de código, valores disponibles default, darcula, dracula,tomorrow
resaltarIdiomas	Formación	['html', 'js', 'css', 'php']	preCódigo que resalta el idioma de detección.
linos	Booleano	verdadero	Ya sea para premostrar el número de línea agregado
relleno	Número	5	html2wxmlLa distancia unilateral entre el componente y el borde de la pantalla, utilizada para la adaptación de la imagen.
Soy fantasma	Cadena	nulo	Completar nombres de dominio en posibles rutas relativas de atributos imgen etiquetassrc
mostrarCargando	Booleano	verdadero	Ya sea para mostrar la animación de carga
enlazarWxmlTagATap	Manipulador		Devolución de llamada al hacer clic aen la etiqueta

Ejemplo

// 将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>

Uso del servidor

Para un uso específico, consulte: https://github.com/qwqoffice/html2wxml
QwqOffice realiza el análisis de texto enriquecido de forma predeterminada, existen factores inestables, puede crear el servicio de análisis usted mismo o introducir componentes de análisis en su proyecto.

1. Copie toda la html2wxml-phpcarpeta al directorio del proyecto.

2. Importar archivos de claseclass.ToWXML.php

include( 'path/to/html2wxml-php/class.ToWXML.php' );

3. Crear instancias html2wxml, analizar y generar resultados, ejemplo:

 $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 );

Introducción de parámetros

nombre del parámetro	tipo	Valores predeterminados	ilustrar
texto	Cadena		Texto HTML o Markdown para renderizar
argumentos	Formación	[]	parámetros adicionales

introducción al parámetro args

nombre del parámetro	tipo	Valores predeterminados	ilustrar
tipo	Cadena	HTML	Tipo de texto a renderizar, valores disponibles html, markdown,md
destacar	Booleano	verdadero	Si se debe realizar resaltado de código preen texto interno
idiomas_destacados	Formación	['html', 'js', 'css', 'php']	preEl resaltado de código detecta idiomas. Ver idiomas disponibles
linos	Booleano	verdadero	Ya sea para premostrar el número de línea agregado
Soy fantasma	Cadena	nulo	Completar nombres de dominio en posibles rutas relativas de atributos imgen etiquetassrc
codificar	Booleano	verdadero	Ya sea para codificar JSON los resultados

2. remolquexml

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

https://github.com/sbfkcel/towxml

Towxml es una biblioteca de renderizado que puede convertir HTML y rebajas a WXML (WeiXin Markup Language).
Dado que el miniprograma WeChat no puede representar HTML directamente, el contenido HTML generado por el editor de texto enriquecido no se puede mostrar directamente en el miniprograma.
Posiblemente por razones de seguridad, incluso el texto WXML se representa como una cadena en el subprograma.
Entonces...
y...
así llegó Towxml.

característica

• Resaltado de sintaxis de código de soporte
• Fácil de usar
• Soporte dinámico multitema
• Optimización definitiva de la tipografía china

Comience rápidamente

1. Clonar TOWXML al directorio raíz del mini programa

git clone https://github.com/sbfkcel/towxml.git

2. Introduce la biblioteca en el mini programa app.js.

//app.js
const Towxml = require('/towxml/main');     //引入towxml库
App({
    
    
    onLaunch: function () {
    
    
    },
    towxml:new Towxml()                     //创建towxml对象，供小程序页面使用
})

3. Introducir plantillas en archivos de páginas de mini programas

<!--pages/index.wxml-->
 
<!--引入towxml模版入口文件，并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{
     
     {...article}}"/>

4. Solicitar datos en js correspondientes al mini programa.

//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
                });
            }
        });
    }
})

5. Introducir el WXSS correspondiente

/**pages/index.wxss**/
 
/**基础风格样式**/
@import '/towxml/style/main.wxss';
 
/**如果页面有动态主题切换，则需要将使用到的样式全部引入**/
 
/**主题配色（浅色样式）**/
@import '/towxml/style/theme/light.wxss';
 
/**主题配色（深色样式）**/
@import '/towxml/style/theme/dark.wxss';

Bien, ya terminaste~~

API

Si desea obtener la mejor experiencia, se recomienda colocar el proceso de conversión de Markdown y HTML en datos towxml en el servidor y solicitar los datos directamente en el subprograma.

1. Depende del entorno

Requiere el entorno Node.js. (Ignore si ya está instalado)

2. Instalartowxml

npm install towxml

3. Uso de la interfaz

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');

Ejemplo de demostración

1. Se agregará towxml/democomo un mini proyecto de programa.
2. Clonar towxmlal demodirectorio
3. Simplemente compila usando mini herramientas de desarrollo de programas.