Home

Awesome

申请使用注意事项

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

html2wxml

html2wxml微信小程序富文本组件

效果

html2wxml截图

参考

小程序富文本解析 https://github.com/icindy/wxParse

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

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

演示

扫码打开演示小程序

html2wxml演示小程序

小程序端用法

三种版本演示

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

插件版本准备

  1. 打开小程序管理后台,转到设置 - 第三方服务,点击添加插件 添加小程序插件

  2. 搜索 html2wxml ,选中并添加 添加小程序插件

  3. 添加成功 添加小程序插件

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

     "plugins": {
     	"htmltowxml": {
     		"version": "1.3.0",
     		"provider": "wxa51b9c855ae38f3c"
     	}
     }
    
  5. 在对应页面的 json 文件,比如首页 index.json,添加使用插件组件的声明

     "usingComponents": {
     	"htmltowxml": "plugin://htmltowxml/view"
     }
    
  6. 参考下面组件使用方法

组件版本准备

  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);
    
  3. 在对应页面的 wxml 文件,比如首页 index.wxml,添加引用模板的声明,并使用模板,注意路径和绑定的数据名

     <import src="path/to/html2wxml-template/html2wxml.wxml" />
     <template is="html2wxml" data="{{wxmlData:article}}" />
    
  4. 在对应页面的 wxss 文件,比如首页 index.wxssapp.wxss, 引入样式表和你喜欢的代码高亮样式,注意路径

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

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

属性介绍

属性名类型默认值说明
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组件与屏幕边缘的单边距离,用于图片自适应
imghostStringnullimg标签中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>

服务端用法

富文本的解析默认是由QwqOffice完成,存在不稳定因素,你可以自行搭建解析服务或将解析组件引入到你的项目中。

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

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

     include( 'path/to/html2wxml-php/class.ToWXML.php' );
    
  3. 实例化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添加行号显示
imghostStringnullimg标签中src属性可能的相对路径进行域名补全
encodeBooleantrue是否对结果进行JSON编码

可用的代码高亮语言

语言名称和别名均可使用

语言名称别名
1c
abnf
accesslog
actionscriptas
ada
apacheapacheconf
applescriptosascript
arduino
armasmarm
asciidocadoc
aspectj
autohotkeyahk
autoit
avrasm
awk
axapta
bashsh,zsh
basic
bnf
brainfuckbf
cal
capnprotocapnp
ceylon
cleanclean,icl,dcl
clojure-repl
clojureclj
cmakecmake.in
coffeescriptcoffee,cson,iced
coq
coscos,cls
cppc,cc,h,c++,h++,hpp
crmshcrm,pcmk
crystalcr
cscsharp
csp
css
d
dart
delphidpr,dfm,pas,pascal,freepascal,lazarus,lpr,lfm
diffpatch
djangojinja
dnsbind,zone
dockerfiledocker
dosbat,cmd
dsconfig
dts
dustdst
ebnf
elixir
elm
erb
erlang-repl
erlangerl
excelxlsx,xls
fix
flix
fortranf90,f95
fsharpfs
gamsgms
gaussgss
gcodenc
gherkinfeature
glsl
gogolang
golo
gradle
groovy
haml
handlebarshbs,html.hbs,html.handlebars
haskellhs
haxehx
hsp
htmlbars
httphttps
hyhylang
inform7i7
initoml
irpf90
javajsp
javascriptjs,jsx
jboss-cliwildfly-cli
json
julia-repl
julia
kotlin
lassols,lassoscript
ldif
leaf
less
lisp
livecodeserver
livescriptls
llvm
lsl
lua
makefilemk,mak
markdownmd,mkdown,mkd
mathematicamma
matlab
maxima
mel
mercurym,moo
mipsasmmips
mizar
mojolicious
monkey
moonscriptmoon
n1ql
nginxnginxconf
nimrodnim
nixnixos
nsis
objectivecmm,objc,obj-c
ocamlml
openscadscad
oxygene
parser3
perlpl,pm
pfpf.conf
phpphp3,php4,php5,php6
pony
powershellps
processing
profile
prolog
protobuf
puppetpp
purebasicpb,pbi
pythonpy,gyp
qk,kdb
qmlqt
r
rib
roboconfgraph,instances
routerosrouteros,mikrotik
rsl
rubyrb,gemspec,podspec,thor,irb
ruleslanguage
rustrs
scala
scheme
scilabsci
scss
shellconsole
smalismali
smalltalkst
smlml
sqfsqf
sql
stan
statado,ado
step21p21,step,stp
stylusstyl
subunit
swift
taggerscript
tap
tcltk
tex
thrift
tp
twigcraftcms
typescriptts
vala
vbnetvb
vbscript-html
vbscriptvbs
verilogv,sv,svh
vhdl
vim
x86asm
xltao
xmlhtml,xhtml,rss,atom,xjb,xsd,xsl,plist
xqueryxpath,xq
yamlyml,YAML,yaml
zephirzep

来源

QwqOffice软件工作室 https://www.qwqoffice.com/

QwqOffice官网小程序(文章详情页富文本解析由 html2wxml 提供)

QwqOffice小程序

赞赏

赞赏码