今天介绍一个在微信小程序中渲染html和Markdown的富文本组件,它支持代码高亮显示。是html2wxml!
Githubhttps://github.com/qwqoffice/html2wxml
三个版本介绍:插件版本准备1。打开小程序管理后台,进入设置-第三方服务,点击添加插件。
010-350000
2.搜索html2wxml,选择并添加它。
010-350000
3.添加成功。
010-350000
4.回到小程序开发环境,编辑app.json,添加plugin语句。最新版本是1.3.0。
插件’ 3360 { ‘ htmltowxml ‘ 3360 { ‘版本’ 3360′ 1.3.0 ‘,’提供程序’ 3360′ wxa51b9c855ae38f3c’}} 5。在相应页面的json文件中添加使用插件组件的声明,比如首页的index.json。
使用组件’ 3360 { ‘ htmltowxml ‘ 3360 ‘插件3360//htmltoxml/view ‘ }组件版本准备1。将整个html 2 XML-component文件夹复制到applet目录中。
2.在对应页面的json文件中,比如homepage index.json,添加使用组件的声明,注意路径。
使用组件’ 3360 { ‘ htmltoxml ‘ 3360 ‘ path/to/html 2 wxml-component/html 2 wxml ‘ }模板版本准备1。将整个html 2 XML-template文件夹复制到applet目录中
2.在对应页面的js文件中添加引用语句,比如homepage index.js,使用html2wxml方法绑定数据。注意路径。这些参数是绑定数据名称、解析的富文本数据以及当前页面对象和容器与屏幕边缘之间的单向距离。
var html 2 XML=require(‘ path/to/html 2 XML-template/html 2 XML . js ‘);html2wxml.html2wxml(‘article ‘,res.data,this,5);3.在对应页面的wxml文件中添加引用模板的语句,比如主页上的index.wxml,使用模板,注意路径和绑定数据名称。
src=’ path/to/html 2 wxml-template/html 2 wxml . wxml ‘/template is=’ html 2 wxml ‘ data=’ { { wxml data 3360 article } } ‘/4。在对应页面的wxss文件中,比如homepage index.wxss或者app.wxss,介绍样式表和你喜欢的代码高亮样式。
@ import“path/to/html 2 wxml-template/html 2 wxml . wxss”;@ import ‘ path/to/html 2 wxml-template/highlight-styles/darc ula . wxss ‘;使用组件
010-350000
示例//将页面中的内容数据呈现为HTML格式htmltowXML Text=’ { { content } } ‘ BindWxMLTagatap=’ WxMLTagatap ‘/htmltowXML//禁用代码突出显示函数htmltowxmltext=’ { { content } } Highlight=’ { { false } } ‘ BindWxMLTagatap=’ WxMLTagatap ‘/htmltowXML//禁用代码行号显示函数htmltowxmltext=’ { { content } } ‘ line numbers=’ { { false } } bindwxmxm 对自建服务没有限制)htmltoxml Text=’ { { content } } ‘ highlight languages=’ { {[‘ HTML ‘,’ JS ‘,’ PHP ‘,’ CSS ‘,’ CPP ‘,Ruby ‘]} ‘ bindwxmltagatap=’ wxmltagatap ‘/htmltoxml//完成HTML数据中img标签相对路径的域名htmltoxml Text=’ { { content } }。 img host=’ 3359 www . QwqOffice . com ‘ BindWxMLTagatap=’ WxMLTagatap ‘/htmltoxml//禁用动画htmltoxmltext=’ { { content } } ‘ show loading=’ { { false } } BindWxMLTagatap=’ WxMLTagatap ‘/htmltoxml//将页面中的文本数据呈现为Markdown格式htmltoxml Text=’ { { Text } } ‘ type=’ MD ‘ BindWxMLTagatap=’ WxMLTagatap您可以构建自己的解析服务,或者在项目中引入解析组件。
1.将整个html 2 XML-PHP文件夹复制到项目目录中。
2.介绍类文件class.ToWXML.php。
包含(‘ path/to/html2wxml-php/class。tow XML . PHP’);3.实例化html2wxml,解析并输出。示例:
$ tow XML=new tow XML();$json=$towxml-towxml( ‘h1H1标题/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);
010-350000
可用的代码高亮语言
010-350000
010-350000
010-350000
010-350000
010-350000
010-350000
010-350000
010-350000