摘要:是一個(gè)可將轉(zhuǎn)為微信小程序的渲染庫(kù)。用于解決在微信小程序中不能直接渲染的問(wèn)題。依賴環(huán)境需要環(huán)境。已經(jīng)安裝請(qǐng)忽略安裝接口使用轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)數(shù)據(jù)轉(zhuǎn)數(shù)據(jù)示例將添加為小程序工程再克隆到目錄使用小程序開(kāi)發(fā)工具編譯即可
Towxml
Towxml 是一個(gè)可將HTML、Markdown轉(zhuǎn)為微信小程序WXML(WeiXin Markup Language)的渲染庫(kù)。
用于解決在微信小程序中Markdown、HTML不能直接渲染的問(wèn)題。
特色支持代碼語(yǔ)法高亮
支持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中引入庫(kù)
//app.js const Towxml = require("/towxml/main"); //引入towxml庫(kù) App({ onLaunch: function () { }, towxml:new Towxml() //創(chuàng)建towxml對(duì)象,供小程序頁(yè)面使用 })
3. 在小程序頁(yè)面文件中引入模版
4. 在小程序?qū)?yīng)的js中請(qǐng)求數(shù)據(jù)
//pages/index.js const app = getApp(); Page({ data: { //article將用來(lái)存儲(chǔ)towxml數(shù)據(jù) article:{} }, onLoad: function () { const _ts = this; //請(qǐng)求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. 引入對(duì)應(yīng)的WXSS
/**pages/index.wxss**/ /**基礎(chǔ)風(fēng)格樣式**/ @import "/towxml/style/main.wxss"; /**如果頁(yè)面有動(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ù)的過(guò)程放在服務(wù)器上,在小程序中直接請(qǐng)求數(shù)據(jù)即可。
1. 依賴環(huán)境
需要 Node.js 環(huán)境。(已經(jīng)安裝請(qǐ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目錄
使用小程序開(kāi)發(fā)工具編譯即可
LicenseMIT
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/113143.html
摘要:是一個(gè)可將轉(zhuǎn)為微信小程序的渲染庫(kù)。用于解決在微信小程序中不能直接渲染的問(wèn)題。依賴環(huán)境需要環(huán)境。已經(jīng)安裝請(qǐng)忽略安裝接口使用轉(zhuǎn)轉(zhuǎn)轉(zhuǎn)數(shù)據(jù)轉(zhuǎn)數(shù)據(jù)示例將添加為小程序工程再克隆到目錄使用小程序開(kāi)發(fā)工具編譯即可 Towxml Towxml 是一個(gè)可將HTML、Markdown轉(zhuǎn)為微信小程序WXML(WeiXin Markup Language)的渲染庫(kù)。 用于解決在微信小程序中Markdown、HT...
awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開(kāi)源項(xiàng)目庫(kù)集合。我們會(huì)定期同步上的項(xiàng)目到這里,也歡迎各位 UI組件開(kāi)發(fā)框架實(shí)用庫(kù)開(kāi)發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫(kù)wx-charts ★449 - 微信小程...
摘要:本項(xiàng)目由微信小程序開(kāi)發(fā)論壇會(huì)員開(kāi)發(fā)原文地址垂直微信小程序開(kāi)發(fā)交流社區(qū)加載慢,等等微信小程序富文本解析自定義組件,支持及解析可能是第一個(gè)微信小程序富文本解析組件代碼庫(kù)地址示例版使用地址現(xiàn)狀版本號(hào)目前還不太適合直接使用目前項(xiàng)目不 本項(xiàng)目由微信小程序開(kāi)發(fā)論壇-WeAppDev http://weappdev.com/ 會(huì)員開(kāi)發(fā) 原文地址: http://weappdev.com/t/wxp...
摘要:上一篇小程序開(kāi)發(fā)第一篇注冊(cè)獲取同步企業(yè)項(xiàng)目數(shù)據(jù)微信小程序開(kāi)發(fā)者工具下載小程序開(kāi)發(fā)者工具使用小程序原生開(kāi)發(fā)直接使用小程序開(kāi)發(fā)者工具打開(kāi)項(xiàng)目即可小程序框架開(kāi)發(fā)首選官方提供類開(kāi)發(fā)框架,備選。 上一篇:小程序開(kāi)發(fā) 第一篇:注冊(cè)、獲取unionid同步企業(yè)項(xiàng)目數(shù)據(jù) 1.微信小程序開(kāi)發(fā)者工具 下載:小程序開(kāi)發(fā)者工具 使用: 小程序原生開(kāi)發(fā):直接使用小程序開(kāi)發(fā)者工具打開(kāi)項(xiàng)目即可 小程序框架開(kāi)發(fā):...
閱讀 2556·2023-04-25 20:05
閱讀 2885·2023-04-25 17:56
閱讀 2195·2021-10-14 09:49
閱讀 2680·2019-08-29 15:10
閱讀 2922·2019-08-29 12:25
閱讀 416·2019-08-28 18:23
閱讀 756·2019-08-26 13:26
閱讀 1370·2019-08-23 18:21