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

去首页

看看更多热门内容

1、首先要下载微信官方的微信Web开发者工具。打开微信公众平台，找到右下方的小程序模块，点击「开发」按钮

2、点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版本。可根据实际情况，选择适合自己电脑的开发工具。

3、安装后，就可以直接启动开发者工具。如果是首次启动开发者工具，需要使用开发者的微信号扫码登录。登陆后，点击「添加项目」按钮，填写 AppID(如果没有，则点击无 AppID)和项目名称。接着，在项目目录中点击「选择」，新建一个文件夹作为新的项目目录。然后再次点击「添加项目」，就可以新建出一个微信小程序项目了。

4、微信开发者工具共分成「编辑」、「调试」和「项目」三个部分。

编辑：编辑和修改小程序的代码。

调试：显示小程序代码错误和警告，便于调试代码错误。

项目：用于查看小程序的属性、修改小程序配置，以及提交小程序代码至微信服务器。

开发工具还提供简单的模拟器(页面左侧)，开发者可以使用模拟器在电脑上模拟用户点击及使用，提供后台情况模拟、多媒体播放器调试、缓存数据处理等功能。

5、懂技术的程序员到这一步就可以自己开发了。而不懂编程的小白，可以登录微信小程序制作平台「即速应用」官方网站进行小程序的制作。里面有大量的小程序模板，根据自己的需求选择一个模板进行制作即可。

6、制作完成后，点击「生成」按钮。然后选择「小程序打包」，下载小程序的标准代码包。

7、回到在微信Web开发工具中，在「项目目录」这一栏选择下载好的代码包，打开后就可以看到小程序的预览效果了。

8、在「项目」页面中，开发者可以查看小程序的基本属性，也可以进行真机预览调试，或向微信服务器提交一个新版本的小程序代码。服务器收到代码后，管理员就可以通过公众平台，将新版本提交审核了。

以上就是微信小程序开发工具的具体使用方法。磨刀不误砍材工，只有认真了解过微信小程序开发工具如何使用，才能才微信小程序推出的关键时期抓住机会，尽快进入市场，拿下小程序的第一波红利。

微信小程序用以下语言开发：

一、HTML语言

html是超文本标识语言的缩写，html它是网页开发的前端之一，主要负责网页的框架，就像动物的框架一样，html语言也是支持网页布局的框架。

二、CSS

css，前三剑客之二是分层风格表。主冶网页风格、网页如何遍布、版块背景、色彩等外观问题都会出现CSS控制。

三、JavaScript

简称js，前三剑客，是一种动态脚本语言。js只是一种Web随着脚本语言的交互，Googlev8模块，angular，react等待前端框架越来越分离前端和后端，以及node.js等技术的发展，js也开始在服务端焕发出惊人的活力，成为目前非常活跃的语言之一。

四、服务器语言

如果没有专业的后端开发人员，后端可能很难学习曲线。但建议开发人员学习后端语言，至少要了解后端框架的基本原理和代码逻辑，这样不仅可以完成前端和后端的合作，还可以发生在小程序中bug时扯皮用。

服务端语言有很多常用的技术，比如PHP，ava，Python，ASP，建议开发人员根据公司内部使用的技术选择学习。

五、数据库语言

如果公司信息量小，结构不复杂，数据库语言相对简单，一般可以通过学习一些常用的指令和常见的问题来处理。经常使用的数据库是免费的MySQL，msSQL，MongoDB，Oracle等等。

---