整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
今天為大家帶來的是一個用于在微信小程序中渲染html和Markdown的富文本組件，而且支持代碼高亮，它就是html2wxml！
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 時,隱藏標簽對象。不會為對象保留其位置空間,它下面所在的元素會被自動上移占有被隱藏標簽位置。
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 時,默認有顯示標簽的意義,同時可以將標簽轉換為塊元素顯示,這時標簽會獨占一行,并且可以設置寬高屬性。
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 時,指定對象為內聯元素,此時對象的寬高屬性不在有效,元素大小取決于實際內容大小。
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 屬性用來設置或檢索是否顯示對象。與 display 屬性不同，該屬性為隱藏的對象保留其占據的物理空間, 該屬性默認值為 visible, 設置對象可見。
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 默認值為 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時,會將超出對象尺寸的內容進行裁剪，將不出現滾動條。
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, 作用是將超出對象尺寸的內容進行裁剪，并以滾動條的方式顯示超出的內容 。
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時, 作用是在需要時剪切內容并添加滾動條，該值為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;
}效果如下:
總結:
要是在野外迷了路可千萬別慌張，北極星會指引你方向。但事實上可不是每個都知道北極星的位置哦。
在本次教程里我們使用html5+css3 來完成一個尋找北極星的動畫。
那么首先我們需要知道尋找北極星的辦法:
在星漢燦爛的北方太空，有一個勺子一樣的星座，由七顆較亮的星星組成我們正為北斗七星，也叫大熊座。它由天樞、天璇、天璣、天權、玉衡、開陽、搖光 七顆星組成。
我們將七星相連組成一個勺子，然后將最后兩顆星相連，然后把延長線外延5倍的距離，就會發現有一顆，最亮的星星，它就是北極星。
當然如果一個星座不好定位，別急還有我們的仙后座，他由五顆星組成一個W 型但這個字母隨著季節的變化開口方向也會變化，不過他中間那顆星的五倍延長線的位置，也同樣是指向北極星。好了，以后在野外再也不迷路了。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
首先我們看下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;
}
}
感興趣的同學可以加關注，私信源碼
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
