html铺满整个页面_小程序富文本（HTML+MarkDown），200+种语言代码高亮支持
蓝丨飘
原创
关注
0点赞·164人阅读
介绍
今天为大家带来的是一个用于在微信小程序中渲染html和Markdown的富文本组件，而且支持代码高亮，它就是html2wxml！
Github
https://github.com/qwqoffice/html2wxml
三种版本介绍
插件版本准备
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" }
登录后复制
组件版本准备
1、复制整个 html2wxml-component 文件夹到小程序目录
2、在对应页面的 json 文件，比如首页 index.json，添加使用组件的声明，注意路径
"usingComponents": { "htmltowxml": "path/to/html2wxml-component/html2wxml" }
登录后复制
模板版本准备
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，添加引用模板的声明，并使用模板，注意路径和绑定的数据名
登录后复制
4、在对应页面的 wxss 文件，比如首页 index.wxss或app.wxss， 引入样式表和你喜欢的代码高亮样式，注意路径
@import "path/to/html2wxml-template/html2wxml.wxss"@import "path/to/html2wxml-template/highlight-styles/darcula.wxss"
登录后复制
组件使用
示例
// 将Page中的content数据作为HTML格式渲染// 禁用代码高亮功能// 禁用代码行号显示功能// 代码高亮样式改为tomorrow// 设置代码高亮检测语言 (最多6个，自行搭建服务不受限制)// 对HTML数据中的img标签的相对路径补全域名// 禁用加载中动画// 将Page中的text数据作为Markdown格式渲染// 直接渲染Page中的已经过解析的obj数据
登录后复制
服务端用法
富文本的解析默认是由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标题
', 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 )
可用的代码高亮语言
html铺满整个页面
眼镜店选址
精选推荐
广告
var源码matlab-html2wxml:用于微信小程序HTML和Markdown格式的富文本渲染组件，支持代码高亮
2下载·0评论
2021年5月19日
用于微信小程序的HTML和Markdown格式的富文本渲染组件支持代码高亮
1下载·0评论
2019年8月10日
带格式粘贴至html富文本,防止复制/粘贴将网页样式复制到富文本编辑器
565阅读·0评论·0点赞
2021年6月13日
微信小程序使用html2wxml渲染HTML或Markdown文本
1295阅读·0评论·0点赞
2020年5月16日
html转pdf汉字重叠,富文本编辑器保存的html内容使用itextpdf转PDF文件（css提取，内容重叠）问题解决...
458阅读·0评论·0点赞
2021年6月9日
让小程序支持代码高亮
383阅读·0评论·0点赞
2021年8月13日
高清播放机，图片大全，点击查看详情！
精选推荐
广告
HTML让背景图片铺满整个图片
1.1W阅读·0评论·4点赞
2022年4月25日
不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）
1505阅读·3评论·5点赞
2022年3月17日
微信小程序渲染富文本
441阅读·0评论·0点赞
2020年11月10日
小程序渲染富文本内容
5270阅读·0评论·2点赞
2019年1月28日
浏览器中的HTML富文本编辑（一）
480阅读·0评论·0点赞
2013年3月12日
简单封装 wangEditor富文本编辑器，保留大部分粘贴样式
818阅读·0评论·1点赞
2021年12月20日
[贝聊科技]在微信小程序中渲染HTML内容
567阅读·0评论·0点赞
2018年9月14日
微信小程序渲染富文本（html标签）
8058阅读·0评论·5点赞
2019年7月2日
微信小程序Markdonw、HTML富文本内容显示解决办法
1.6W阅读·4评论·2点赞
2017年6月3日
搞定了微信小程序富文本渲染解决方案-后端渲染方案Html2Wxml2J
1162阅读·0评论·1点赞
2018年11月18日
html-to-wxml-小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示.zip
2下载·0评论
2019年9月23日
如何让表格（table）充满整个页面
2.5W阅读·6评论·2点赞
2008年7月17日
Towxml是一个可将HTMLMarkdown转为微信小程序WXML的渲染库
4下载·0评论
2019年8月10日
wxParse 微信小程序富文本解析自定义组件，支持HTML及markdown解析
8下载·0评论
2017年9月30日
去首页
看看更多热门内容
背景图片不重复不平铺，可以这样设定背景：
1、<body style="background-image: url("图片文件地址")background-attachment: fixed">
这样背景图片就会固定住，不会因页面滚动而重复。
2、使图在任何大小的屏幕都不会显示重复，可以这样设定背景（图像不平铺）：
<body style="background-image: url("图片文件地址")background-repeat:no-repeat">
3、两者结合，就是：<body style="background-image: url("图片文件地址")background-repeat:no-repeatbackground-attachment: fixed">
扩展资料
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
参考资料 百度百科 HTML
最简单的方法是打开新的不能最大化的网页后，关掉最先开的，然后最大化窗口，接着关了再开试一下。不行的话就试试以下的方法：方法一：通过点击链接打开的新窗口都不是最大化的，要想以最大化方式启动，请建立一个ie浏览器的快捷方式，在快捷方式属性里设置最大化。不过，你可以任意打开一个非最大化的ie窗口，用鼠标拖动边框的方式把它拉到最大，尽量覆盖整个桌面，然后关闭窗口。ie浏览器具有自动记忆窗口大小效应，以最后关闭的ie窗口大小为准。以后只要不再调整窗口大小，那么新开的窗口就都是这种最大显示面积的，和最大化的效果也差不多。方法二：有时会发生这样的情况，即ie的窗口会变小，每次重新启动ie都是一个小窗口，即使用“最大化”按钮也无济于事，其实这是ie窗口的一种“记忆”效果，我们可以在注册表中进行修改。①运行regedit，打开注册表编辑器；②依次展开“hkey_current_user\software\microsoft\internetexplorer\main”分支，在右边的窗口中删除“window_placement”子键；③再展开“hkey_current_user\software\microsoft\internetexplorer\desktop\oldworkareas”分支，在右边窗口中删除“oldworkarearects”键；④关闭注册表，重新启动计算机；⑤打开ie，连续两次最大化ie窗口（即“最大化”——“还原”——“最大化”），点×号关闭ie；⑥再次重新启动ie。打开ie浏览器，最大化，然后最小化，再最大化，关闭ie浏览器。以后再使用ie浏览器，窗口打开就为最大化了。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）