网站要素,订阅号怎么开通小程序,wordpress文字怎么做超级链接,锡林郭勒盟建设工程造价管理网站一、html2wxml 插件版
https://gitee.com/qwqoffice/html2wxml
申请使用注意事项
插件版本解析服务是由 QwqOffice 完成#xff0c;存在不稳定因素#xff0c;如对稳定性有很高的要求#xff0c;请自行搭建解析服务#xff0c;或在自家服务器上直接完成解析。对于有关插…一、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) 插件版本准备 打开小程序管理后台转到设置 - 第三方服务点击添加插件 搜索 html2wxml 选中并添加 添加成功 回到小程序开发环境编辑 app.json 添加插件声明最新版为 1.4.0
plugins: {htmltowxml: {version: 1.4.0,provider: wxa51b9c855ae38f3c}
}在对应页面的 json 文件比如首页 index.json添加使用插件组件的声明 usingComponents: {htmltowxml: plugin://htmltowxml/view
}基本配置就已经完成剩下的就是如何在页面上渲染使用了 因为是写好的页面数据比较多我也是给大家标注了一下就是声明一个空的数据去接收你的富文本字段而已 最后一步在页面上渲染使用就行
(2) 组件版本准备 复制整个 html2wxml-component 文件夹到小程序目录 在对应页面的 json 文件比如首页 index.json添加使用组件的声明注意路径 usingComponents: {htmltowxml: path/to/html2wxml-component/html2wxml
}(3) 模板版本准备 复制整个 html2wxml-template 文件夹到小程序目录 在对应页面的 js 文件比如首页 index.js添加引用声明并使用html2wxml方法进行数据绑定注意路径参数分别为绑定的数据名、已解析的富文本数据、当前页面对象和容器与屏幕边缘的单边的距离
var html2wxml require(‘path/to/html2wxml-template/html2wxml.js’);
html2wxml.html2wxml(‘article’, res.data, this, 5);在对应页面的 wxml 文件比如首页 index.wxml添加引用模板的声明并使用模板注意路径和绑定的数据名 import srcpath/to/html2wxml-template/html2wxml.wxml /template ishtml2wxml data{{wxmlData:article}} /在对应页面的 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,mdhighlightBooleantrue是否对pre内文本进行代码高亮highlightStyleStringdarculapre代码高亮样式可用值default,darcula,dracula,tomorrowhighlightLanguagesArray[‘html’, ‘js’, ‘css’, ‘php’]pre代码高亮检测语言。linenumsBooleantrue是否为pre添加行号显示paddingNumber5html2wxml组件与屏幕边缘的单边距离用于图片自适应imghostStringnull对img标签中src属性可能的相对路径进行域名补全showLoadingBooleantrue是否显示加载中动画bindWxmlTagATapHandler点击a标签的回调
示例
// 将Page中的content数据作为HTML格式渲染
htmltowxml text{{content}} bindWxmlTagATapwxmlTagATap /htmltowxml// 禁用代码高亮功能
htmltowxml text{{content}} highlight{{false}} bindWxmlTagATapwxmlTagATap /htmltowxml// 禁用代码行号显示功能
htmltowxml text{{content}} linenums{{false}} bindWxmlTagATapwxmlTagATap /htmltowxml// 代码高亮样式改为tomorrow
htmltowxml text{{content}} highlightStyletomorrow bindWxmlTagATapwxmlTagATap /htmltowxml// 设置代码高亮检测语言 (最多6个自行搭建服务不受限制)
htmltowxml text{{content}} highlightLanguages{{[html,js,php,css,cpp,ruby]}} bindWxmlTagATapwxmlTagATap /htmltowxml// 对HTML数据中的img标签的相对路径补全域名
htmltowxml text{{content}} imghosthttps://www.qwqoffice.com bindWxmlTagATapwxmlTagATap /htmltowxml// 禁用加载中动画
htmltowxml text{{content}} showLoading{{false}} bindWxmlTagATapwxmlTagATap /htmltowxml// 将Page中的text数据作为Markdown格式渲染
htmltowxml text{{text}} typemd bindWxmlTagATapwxmlTagATap /htmltowxml// 直接渲染Page中的已经过解析的obj数据
htmltowxml json{{obj}} bindWxmlTagATapwxmlTagATap /htmltowxml服务端用法
具体用法请参考https://github.com/qwqoffice/html2wxml 富文本的解析默认是由QwqOffice完成存在不稳定因素你可以自行搭建解析服务或将解析组件引入到你的项目中。 复制整个 html2wxml-php 文件夹到项目目录中 引入类文件class.ToWXML.php
include( path/to/html2wxml-php/class.ToWXML.php );实例化html2wxml进行解析并输出示例 $towxml new ToWXML();$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 );参数介绍
参数名类型默认值说明textString要渲染的HTML或Markdown文本argsArray[]附加参数
args 参数介绍
参数名类型默认值说明typeStringhtml要渲染的文本类型可用值html,markdown,mdhighlightBooleantrue是否对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 就因此降临了。
特色
支持代码语法高亮使用简单多主题动态支持极致的中文排版优化
快速上手
克隆TOWXML到小程序根目录
git clone https://github.com/sbfkcel/towxml.git在小程序app.js中引入库
//app.js
const Towxml require(/towxml/main); //引入towxml库
App({onLaunch: function () {},towxml:new Towxml() //创建towxml对象供小程序页面使用
})在小程序页面文件中引入模版
!--pages/index.wxml--!--引入towxml模版入口文件并使用模版--
import src/towxml/entry.wxml/
template isentry data{{...article}}/在小程序对应的js中请求数据
//pages/index.jsconst 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);//设置文档显示主题默认lightdata.theme dark;//设置数据_ts.setData({article: data});}});}
})引入对应的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数据的过程放在服务器上在小程序中直接请求数据即可。
依赖环境
需要 Node.js 环境。已经安装请忽略
安装 towxml
npm install towxml接口使用
const Towxml require(towxml);
const towxml new Towxml();//Markdown转WXML
let wxml towxml.md2wxml(# Article title);//html转WXML
let wxml towxml.html2wxml(h1Article title/h1);//Markdown转towxml数据
let data towxml.toJson(# Article title,markdown);//htm转towxml数据
let data towxml.toJson(# Article title);Demo示例
将towxml/demo添加为小程序工程再克隆towxml到demo目录使用小程序开发工具编译即可
