小程序的HTML和Markdown格式的富文本渲染组件，支持代码高亮！

绍

今天为大家带来的是一个用于在微信小程序中渲染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，添加引用模板的声明，并使用模板，注意路径和绑定的数据名

 <import src="path/to/html2wxml-template/html2wxml.wxml" />
 <template is="html2wxml" data="{{wxmlData:article}}" />

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格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代码高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代码行号显示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 代码高亮样式改为tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 设置代码高亮检测语言 (最多6个，自行搭建服务不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 对HTML数据中的img标签的相对路径补全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用加载中动画
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 将Page中的text数据作为Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 直接渲染Page中的已经过解析的obj数据
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

服务端用法

富文本的解析默认是由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>H1标题</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 );

可用的代码高亮语言

多人在使用 CSS 时,对 Display, Visibility 和 Overflow 三个属性的理解并不是很清晰,这里就对这三个属性做一下分析,对应三个属性在使用时的区别.

Display

display 用来设置或检索对象是否及如何显示。

display: none

display 属性为 none 时,隐藏标签对象。不会为对象保留其位置空间,它下面所在的元素会被自动上移占有被隐藏标签位置。

HTML 代码:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代码:

div{
    width: 200px;
    height: 100px;
}
#a{
    background-color: red;
}
#b{
    
    background-color: green;
    display: none;
}
#c{
    background-color: blue;
}

效果如下:

display: block

display 属性为 block 时,默认有显示标签的意义,同时可以将标签转换为块元素显示,这时标签会独占一行,并且可以设置宽高属性。

HTML 代码:

<span id="a">A</span>
<span id="b">B</span>
<span id="c">C</span>

CSS代码:

span{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
}
#a{
    background-color: red;
}
#b{
    
    background-color: green;
}
#c{
    background-color: blue;
    display: block;
}

效果如下:

display: inline

display 属性为 inline 时,指定对象为内联元素,此时对象的宽高属性不在有效,元素大小取决于实际内容大小。

HTML 代码:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代码:

div{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
    display: inline;
}
#a{
    background-color: red;
}
#b{
    background-color: green;
}
#c{
    background-color: blue;
}

效果如下:

Visibility

visibility 属性用来设置或检索是否显示对象。与 display 属性不同，该属性为隐藏的对象保留其占据的物理空间, 该属性默认值为 visible, 设置对象可见。

visibility: hidden

visibility 属性为 hidden 时,隐藏标签对象。但该对象所占用的位置空间会被保留。

HTML代码:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

CSS代码:

div{
    width: 200px;
    height: 100px;
    font-size: 50px;
    color: gray;
}
#a{
    background-color: red;
}
#b{
    background-color: green;
    visibility: hidden;
}
#c{
    background-color: blue;
}

效果如下:

Overflow

overflow 属性用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

overflow: visible

overflow 默认值为 visible, 作用是按实际效果显示 ,不剪切超出范围的内容。

HTML 代码:

<div id="a">
    <div id="b"></div>
</div>

CSS代码:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: visible;

}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: hidden

overflow 值为 hidden时,会将超出对象尺寸的内容进行裁剪，将不出现滚动条。

HTML 代码:

<div id="a">
    <div id="b"></div>
</div>

CSS代码:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: hidden;

}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: scroll

overflow 值为 scroll, 作用是将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容。

HTML 代码:

<div id="a">
    <div id="b"></div>
</div>

CSS代码:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow:  scroll;

}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

overflow: auto

overflow 值为 auto时, 作用是在需要时剪切内容并添加滚动条，该值为body对象和textarea的默认值。

HTML 代码:

<div id="a">
    <div id="b"></div>
</div>

CSS代码:

#a{
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: auto;

}
#b{
    width: 200px;
    height: 300px;
    background-color: blue;
}

效果如下:

总结:

display 和 visibility 属性都是用来设置或检索对象是否及如何显示。
使用diplay 隐藏对象时,在文档流中不占空间.后续对象会占据隐藏对象位置。
使用 visibility 隐藏对象时,在文档流中会保留隐藏对象所占用的空间。
overflow 主要用来检索或设置当对象的内容超过其指定高度及宽度时如何管理内容显示。

要是在野外迷了路可千万别慌张，北极星会指引你方向。但事实上可不是每个都知道北极星的位置哦。

在本次教程里我们使用html5+css3 来完成一个寻找北极星的动画。

那么首先我们需要知道寻找北极星的办法:

在星汉灿烂的北方太空，有一个勺子一样的星座，由七颗较亮的星星组成我们正为北斗七星，也叫大熊座。它由天枢、天璇、天玑、天权、玉衡、开阳、摇光七颗星组成。

我们将七星相连组成一个勺子，然后将最后两颗星相连，然后把延长线外延5倍的距离，就会发现有一颗，最亮的星星，它就是北极星。

当然如果一个星座不好定位，别急还有我们的仙后座，他由五颗星组成一个W 型但这个字母随着季节的变化开口方向也会变化，不过他中间那颗星的五倍延长线的位置，也同样是指向北极星。好了，以后在野外再也不迷路了。

首先我们看下html：

	<body>
		<!--big-dipper -->
		<div class="big-dipper">
			<div class="one">
				<span></span>
			</div>
			<div class="tow">
				<span></span>
			</div>
			<div class="three">
				<span></span>
			</div>
			<div class="four">
				<span></span>
			</div>
			<div class="five">
				<span></span>
			</div>
			<div class="six">
				<span></span>
			</div>
			<div class="seven">
				<span></span>
			</div>
		</div>
		<!-- north-start -->
		<div id="north-start"></div>
		<!-- Cassiopeia -->
		<div class="cassiopeia">
			<div class="one">
				<span></span>
			</div>
			<div class="tow">
				<span></span>
			</div>
			<div class="three">
				<span></span>
				<span></span>
			</div>
			<div class="four">	
				<span></span>
			</div>
			<div class="five">			
			</div>
		</div>	
</body>

big-dipper：是北斗星

<div class="one">
				<span></span>
</div>

同样的方式建立了七颗星，里面的span标签就是线条。通过transform动画延迟宽度，实现连线效果。

通过角度旋转实现仙后座的转动，同时连线也是通过这样的方式调整角度。但要注意设置连线的旋转点。

transform: rotate(xxxdeg);
transform-origin:0% 0%;

限于篇幅最后附上北斗星的css样式代码：

.big-dipper div{
				position: absolute;
				width:10px;
				height:10px;
				background: #fff;
				border-radius: 50%;
				box-shadow:0px 0px 5px 3px cornflowerblue; 
			}
			.big-dipper .one{
				top:20px;		
			}
			.big-dipper .tow{
				top:32px;
				left:70px;
			}
			.big-dipper .three{
				top:70px;
				left:140px;
			}
			.big-dipper .four{
				top:95px;
				left:220px;
			}
			.big-dipper .five{
				top:160px;
				left:240px;
			}
			.big-dipper .six{
				top:160px;
				left:320px;
			}
			.big-dipper .seven{
				top:90px;
				left:350px;
			}
			.big-dipper span,.cassiopeia span{
				display: block;
				width:0px;		
				height:1px;
				position: absolute;
				top:50%;
				left:11px;
				background: #fff;
				box-shadow: 0 0 3px 1px #529DFF;
			}	
	
	.big-dipper .one span {		
		transform: rotate(10deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 1s linear forwards;
	}
	.big-dipper .tow span {		
		transform: rotate(28deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 1.8s linear forwards;
	}
	.big-dipper .three span {		
		transform: rotate(20deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 2.6s linear forwards;
	}
	.big-dipper .four span {
		top:100%;
		transform: rotate(75deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 3.4s linear forwards;
	}
	.big-dipper .five span {
		transform: rotate(0deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 4.2s linear forwards;
	}
	.big-dipper .six span {
		left:7px;
		top:-1px;
		transform: rotate(-66deg);
		transform-origin:0% 0%;
		animation: enttxt_effect .8s 5s linear forwards;
	}
	.big-dipper .seven span {
		left:7px;
		top:-1px;
		width:1px;
		background: none;
		transform: rotate(-66deg);
		transform-origin:0% 0%;
		animation: enttxt_effect2 .8s 5.8s linear forwards;
	}	
	@keyframes enttxt_effect {
		0% {
			 width:0px;
		}
	
		100% {
			width:70px;
		}
	}
	@keyframes enttxt_effect2 {
		0% {
			 width:0px;
		}
	
		100% {
			width:350px;
		}
	}

感兴趣的同学可以加关注，私信源码

在线咨询

上一篇：HTML编码规范
下一篇：HTML中button标签点击实现页面跳转的三种方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

小程序的HTML和Markdown格式的富文本渲染组件，支持代码高亮！

绍

Github

三种版本介绍

组件使用

可用的代码高亮语言

Visibility

Overflow

您的项目需求