小程序引入html全屏

html铺满整个页面

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日

去首页

看看更多热门内容

小族咐程序的页面不支持html标签和css样式。根据查询相关资料信息显示，微信小程序棚粗相比WebAPP也有不兆和纯足，不支持HTML标签和DOM *** 作，对CSS的支持也有限，前端库和框架也无法使用。

首先静态的html标签是无法直接调用java程序的。\x0d\x0a下面是实现的几种方法：\x0d\x0a\x0d\x0a第一种方法：\x0d\x0a将按钮放到form表单中，当按钮点击时提交表单（或者直接将input的type属性定义成submit）,表单可以指向JSP或Servlet，信碧在JSP或Servlet里调用java程序\x0d\x0a\x0d\x0a第二种方法：\x0d\x0a在按钮的onclick时间中添加js代码\x0d\x0aself.location="url"其中url指向JSP或Servlet\x0d\x0a\x0d\x0a第三种方法：\x0d\x0a使用第三方的javascript包，dwr是一个不错的选择：\x0d\x0a1、需要准备dwr的jar包，并将之放到lib目录下；\x0d\x0a2、修改web.xml文件，添加DWRServlet的映射；\x0d\x0a3、配置dwr，即在WEB-INF目录下，添加dwr.xml文件，让dwr知道在运行时给哪些JavaBean生成相应的javascript库袜和；\x0d\x0a4、将需要的脚本库引入到html页面中就可以通过dwr的API访问java类了。\x0d\x0a\x0d\x0a第四种方法：\x0d\x0a使用MVC框架更简单，以struts为例，可以仿照第一或第二种方法，将url替换成配置文件中配告坦盯置的地址就能访问java程序了。

---