摘要:是一個(gè)可將轉(zhuǎn)為微信小程序的渲染庫。用于解決在微信小程序中不能直接渲染的問題。依賴環(huán)境需要環(huán)境。已經(jīng)安裝請忽略安裝接口使用轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)數(shù)據(jù)轉(zhuǎn)數(shù)據(jù)示例將添加為小程序工程再克隆到目錄使用小程序開發(fā)工具編譯即可
Towxml
Towxml 是一個(gè)可將HTML、Markdown轉(zhuǎn)為微信小程序WXML(WeiXin Markup Language)的渲染庫。
用于解決在微信小程序中Markdown、HTML不能直接渲染的問題。
特色支持代碼語法高亮
支持emoji表情
支持上標(biāo)、下標(biāo)、下劃線、刪除線、表格、視頻、圖片(幾乎所有html元素)……
支持typographer字符替換
多主題動(dòng)態(tài)支持
極致的中文排版優(yōu)化
前后端支持
截圖以下截圖即demo目錄編譯的效果
快速上手1. 克隆TOWXML到小程序根目錄
git clone https://github.com/sbfkcel/towxml.git
2. 在小程序app.js中引入庫
//app.js const Towxml = require("/towxml/main"); //引入towxml庫 App({ onLaunch: function () { }, towxml:new Towxml() //創(chuàng)建towxml對象,供小程序頁面使用 })
3. 在小程序頁面文件中引入模版
4. 在小程序?qū)?yīng)的js中請求數(shù)據(jù)
//pages/index.js const app = getApp(); Page({ data: { //article將用來存儲(chǔ)towxml數(shù)據(jù) article:{} }, onLoad: function () { const _ts = this; //請求markdown文件,并轉(zhuǎn)換為內(nèi)容 wx.request({ url: "http://xxx/doc.md", header: { "content-type": "application/x-www-form-urlencoded" }, success: (res) => { //將markdown內(nèi)容轉(zhuǎn)換為towxml數(shù)據(jù) let data = app.towxml.toJson(res.data,"markdown"); //設(shè)置文檔顯示主題,默認(rèn)"light" data.theme = "dark"; //設(shè)置數(shù)據(jù) _ts.setData({ article: data }); } }); } })
5. 引入對應(yīng)的WXSS
/**pages/index.wxss**/ /**基礎(chǔ)風(fēng)格樣式**/ @import "/towxml/style/main.wxss"; /**如果頁面有動(dòng)態(tài)主題切換,則需要將使用到的樣式全部引入**/ /**主題配色(淺色樣式)**/ @import "/towxml/style/theme/light.wxss"; /**主題配色(深色樣式)**/ @import "/towxml/style/theme/dark.wxss";
OK,大功告成~~
API如果為了追求極致的體驗(yàn),建議將markdown、html轉(zhuǎn)換為towxml數(shù)據(jù)的過程放在服務(wù)器上,在小程序中直接請求數(shù)據(jù)即可。
1. 依賴環(huán)境
需要 Node.js 環(huán)境。(已經(jīng)安裝請忽略)
2. 安裝towxml
npm install towxml
3. 接口使用
const Towxml = require("towxml"); const towxml = new Towxml(); //Markdown轉(zhuǎn)WXML let wxml = towxml.md2wxml("# Article title"); //html轉(zhuǎn)WXML let wxml = towxml.html2wxml("Demo示例Article title
"); //Markdown轉(zhuǎn)towxml數(shù)據(jù) let data = towxml.toJson("# Article title","markdown"); //htm轉(zhuǎn)towxml數(shù)據(jù) let data = towxml.toJson("# Article title");
將towxml/demo添加為小程序工程
再克隆towxml到demo目錄
使用小程序開發(fā)工具編譯即可
LicenseMIT
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/94551.html
摘要:是一個(gè)可將轉(zhuǎn)為微信小程序的渲染庫。用于解決在微信小程序中不能直接渲染的問題。依賴環(huán)境需要環(huán)境。已經(jīng)安裝請忽略安裝接口使用轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)數(shù)據(jù)轉(zhuǎn)數(shù)據(jù)示例將添加為小程序工程再克隆到目錄使用小程序開發(fā)工具編譯即可 Towxml Towxml 是一個(gè)可將HTML、Markdown轉(zhuǎn)為微信小程序WXML(WeiXin Markup Language)的渲染庫。 用于解決在微信小程序中Markdown、HT...
摘要:本項(xiàng)目由微信小程序開發(fā)論壇會(huì)員開發(fā)原文地址垂直微信小程序開發(fā)交流社區(qū)加載慢,等等微信小程序富文本解析自定義組件,支持及解析可能是第一個(gè)微信小程序富文本解析組件代碼庫地址示例版使用地址現(xiàn)狀版本號目前還不太適合直接使用目前項(xiàng)目不 本項(xiàng)目由微信小程序開發(fā)論壇-WeAppDev http://weappdev.com/ 會(huì)員開發(fā) 原文地址: http://weappdev.com/t/wxp...
摘要:上一篇小程序開發(fā)第一篇注冊獲取同步企業(yè)項(xiàng)目數(shù)據(jù)微信小程序開發(fā)者工具下載小程序開發(fā)者工具使用小程序原生開發(fā)直接使用小程序開發(fā)者工具打開項(xiàng)目即可小程序框架開發(fā)首選官方提供類開發(fā)框架,備選。 上一篇:小程序開發(fā) 第一篇:注冊、獲取unionid同步企業(yè)項(xiàng)目數(shù)據(jù) 1.微信小程序開發(fā)者工具 下載:小程序開發(fā)者工具 使用: 小程序原生開發(fā):直接使用小程序開發(fā)者工具打開項(xiàng)目即可 小程序框架開發(fā):...
閱讀 1751·2021-09-27 14:02
閱讀 3100·2021-09-27 13:36
閱讀 1046·2019-08-30 12:46
閱讀 1834·2019-08-30 10:51
閱讀 3571·2019-08-29 17:02
閱讀 941·2019-08-29 16:38
閱讀 1846·2019-08-29 16:37
閱讀 3004·2019-08-26 10:32