小程序引入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日

去首页

看看更多热门内容

微信小程序是腾讯依赖微信APP建立起的一种自己规则的应用,和php和python无关

php和python可以作为WEB端 request 应用接口程序

你可以去后盾人粗神平台看一下，里面的东西不森拍错此凳羡

对于h5中生成海报大家都不陌生 最常见的方法是前端生成 用html2canvas 但是弊端就是画质太差 网上很多方法 但是依然不是很管用 最近做的h5中 用了php来生成 画质简直美得不行 1）采用熟练的JSP框架，每人一天可以改造2个页面左右，计划投入2人，风险最小虽然开发方法类似网页，但实际上是一种只能运行在微信自己开发的浏览器中的特殊网页，它所能够使用的所有功能都必须由微信浏览器提供；

H5页面：这是真正的网页应用，运行在通用浏览器中，各种浏览器虽然在细微上有所差别，但总的来说是一致的，微信浏览器同时也是一种通用浏览器，能够支持真正的网页应用。

因此我们才有可能在微信小程序和H5页面之间进行跳转，但这种跳转是受到微信浏览器的严格控制的，因此我们有必要了解这些控制包括哪些。

H5页面所在的域名：假设你需要调转的H5页面URL为https://www.mysite.com/h5page，那么这里所说的域名就是www.mysite.com，另外你没有看错，这个URL必须是https，如果你还没有为你的网站加上SSL，那么就先去申请一个证书吧（注意必须是公开申请的证书，不能是自签名的，微信不认哦！）

好了，这些都准备好了，让我们开始开发一个小例子。

由于web-view组件是一个全屏组件，不能和其它小程序组件合用，因此需要独立占据一个页面，所以我们到例子就是在小程序的A页面加一个链接，跳转到B页面，然后在B页面使用web-view组件来加载H5页面。

2）采用主流分布式Vue框架，时间未知，风险未知；

首先自我介绍下，本人是一名JAVA开发工程师，平时喜欢研究相关主流技术和挑战自己。对此我还是比较倾向于第二种解决方案，但是第二种解决方案无疑是最复杂，最耗时，最未知，风险最大。公司内没有人愿意承接。悄棚于是我抱着学习和研究的态度以及对主流技术的向往，我找到我们领导我是这样说的：我还是比较建议公司采用第二种方案。1）这无疑是给我们进行敲门砖及学习的机会；2）这是公司提升前端技术能力与主流技术看齐的机会。最后公司同意了我建议，采用方案二，有我来承接此事，进行牵头负责。

中间心酸过程忽略，刚接下来第一天就后悔了，VUE用都没用过，还怎么玩。于是我花了大量的时间，看了大量文献，我这里使用到是Vue 2 + Vant 2 + axios + router。原来并不是什么网址拿来就可以设置跳转的，你的小程序中就不能直接跳转到百度上去，小程序能够跳转的域名必须在业务域名中进行注册，总算这次是在小程序开发号里面设置了，但注意在服务号的设置里也有业务域名这个设置，不要搞混了（话说微信起名也太没有想象力了，简直是一坨浆糊）。这时候控制权已经从小程序转移到了H5页面，但微信页面跳转内部的机制比较复杂，涉及到了OAuth认证之类的，所以这个错误已经是H5页面报的了，这就需要到H5页面关联的服务号中去进行设置，这次设置的项目叫做网页授权域名，在公众号设置的功能设置里由于小程序官方没有提供外部H5网页直接跳转到小程序的api，所以目前只支持小程序内嵌H5，并且只有内嵌的H5才能跳回小程序在微信开发中工具里返回“{"base_resp":{"ret":-1}}”时，需要点左上角“设置”--“项目设置”--勾选“不校验合法域锋此名、web-view（业务域名）、TLS 版本以及 HTTPS 证书” 源码中验证使用的是session 来校验验证码是否正确。我这边前端是小程序无法存session改用框架自带的缓存。

这里讲一点转Taro的调试经验，有报错的文件先拎出来放在一边，因为es5,6语法差异，很多js文件转es6是不支持的，所以会报错，建议是先把所有报错的文件注释，或者改成es6写法再转。我这边是去掉了很多的文件才转成功了的。这里需要银运迅自己一步一步调试解决报错，转成功之后根目录多出来一个taroConvert的文件夹这说明已经转Taro成功了，接下来就是运行以及二次开发。

进入taroConvert文件夹(二次开发就在这个文件里面，小程序代码不用管了)，执行命令 npm install 或者cnpm install 先拉取所有依赖。

可以看一下package.json文件的运行命令以及安装的依赖，我这里是要运行H5的，输入命令 npm run dev:h5打开H5开发模式，这个步骤有可能会有个nerv.js不存在的报错，可以安装一下，然后在你文件src下面的的app.js import一下。

执行命令 import Nerv from 'nervjs'，这个报错就会解决。其它的页面代码报错可以自己调试。开启成功的话浏览器中会打开127.0.0.1:8082的窗口运行项目。

---