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

去首页

看看更多热门内容

fullscreen API 接口

属性1：fullscreenElement 该属性返回当前处于全屏模式的DOM元素。

属性2：fullscreenEnabled 该属性返回当前 document 是否进入了可以请求全屏模式的状态。

方法1：requestFullscreen() 请求进入全屏模式。

方法2：exitFullscreen() 退出全屏模式。

事件1：fullscreenchange 进入/退出全屏模式切换时会触发。

事件2：fullscreenerror 进入/退出全屏模式失败时会触发。

由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理，参考代码：

跨浏览器返回正处于全屏的元素

function fullscreenElement(){

var fullscreenEle = document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement

//注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null

console.log("全屏元素："+fullscreenEle)

return fullscreenEle

}

跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态

function fullscreenEnable(){

var isFullscreen = document.fullscreenEnabled ||

window.fullScreen ||

document.webkitIsFullScreen ||

document.msFullscreenEnabled

//注意：要在用户授权全屏后才能准确获取当前的状态

if(isFullscreen){

console.log('全屏模式')

}else{

console.log('非全屏模式')

}

}

跨浏览器发动全屏

function lanchFullscreen(element){

if(element.requestFullscreen){

element.requestFullscreen()

}

else if(element.mozRequestFullScreen){

element.mozRequestFullScreen()

}

else if(element.msRequestFullscreen){

element.msRequestFullscreen()

}

else if(element.webkitRequestFullscreen){

element.webkitRequestFullScreen()

}

}

跨浏览器退出全屏

function exitFullscreen(){

if(document.exitFullscreen){

document.exitFullscreen()

}

else if(document.mozCancelFullScreen){

document.mozCancelFullScreen()

}

else if(document.msExitFullscreen){

document.msExiFullscreen()

}

else if(document.webkitCancelFullScreen){

document.webkitCancelFullScreen()

}

}

各浏览器fullscreenchange 事件处理

document.addEventListener('fullscreenchange', function(){ /*code*/ })

document.addEventListener('webkitfullscreenchange', function(){ /*code*/})

document.addEventListener('mozfullscreenchange', function(){ /*code*/})

document.addEventListener('MSFullscreenChange', function(){ /*code*/})

各浏览器fullscreenerror 事件处理

document.addEventListener('fullscreenerror', function(){ /*code*/ })

document.addEventListener('webkitfullscreenerror', function(){ /*code*/})

document.addEventListener('mozfullscreenerror', function(){ /*code*/)

document.addEventListener('MSFullscreenError', function(){ /*code*/ })

跨浏览器全屏模式下样式代码

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

function openWin(){

var targeturl="http://www.baidu.com"

newwin=window.open("","newWindow","resize=no")

if (document.all){

newwin.moveTo(0,0)

newwin.resizeTo(screen.width,screen.height)

}

newwin.location=targeturl

}

</script>

</head>

<body>

<a href="###" onclick="openWin()">dddddddddd</a>

</body>

</html>

说明：open方法的第三个参数即是设置新窗口各参数的，设置其中几项其余没设置的默认为否，open方法的很多参数在现代浏览器已经失效，ff禁止打开一个没有状态条，输入框，大小小于一定程度并被移出用户视口的新窗口，ie7的用户设置如果是链接在标签页打开的话永远会在标签页打开

---