摘要:是一個可將轉為微信小程序的渲染庫。用于解決在微信小程序中不能直接渲染的問題。依賴環境需要環境。已經安裝請忽略安裝接口使用轉轉轉數據轉數據示例將添加為小程序工程再克隆到目錄使用小程序開發工具編譯即可
Towxml
Towxml 是一個可將HTML、Markdown轉為微信小程序WXML(WeiXin Markup Language)的渲染庫。
用于解決在微信小程序中Markdown、HTML不能直接渲染的問題。
特色支持代碼語法高亮
支持emoji表情
支持上標、下標、下劃線、刪除線、表格、視頻、圖片(幾乎所有html元素)……
支持typographer字符替換
多主題動態支持
極致的中文排版優化
前后端支持
截圖以下截圖即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() //創建towxml對象,供小程序頁面使用 })
3. 在小程序頁面文件中引入模版
4. 在小程序對應的js中請求數據
//pages/index.js const app = getApp(); Page({ data: { //article將用來存儲towxml數據 article:{} }, onLoad: function () { const _ts = this; //請求markdown文件,并轉換為內容 wx.request({ url: "http://xxx/doc.md", header: { "content-type": "application/x-www-form-urlencoded" }, success: (res) => { //將markdown內容轉換為towxml數據 let data = app.towxml.toJson(res.data,"markdown"); //設置文檔顯示主題,默認"light" data.theme = "dark"; //設置數據 _ts.setData({ article: data }); } }); } })
5. 引入對應的WXSS
/**pages/index.wxss**/ /**基礎風格樣式**/ @import "/towxml/style/main.wxss"; /**如果頁面有動態主題切換,則需要將使用到的樣式全部引入**/ /**主題配色(淺色樣式)**/ @import "/towxml/style/theme/light.wxss"; /**主題配色(深色樣式)**/ @import "/towxml/style/theme/dark.wxss";
OK,大功告成~~
API如果為了追求極致的體驗,建議將markdown、html轉換為towxml數據的過程放在服務器上,在小程序中直接請求數據即可。
1. 依賴環境
需要 Node.js 環境。(已經安裝請忽略)
2. 安裝towxml
npm install towxml
3. 接口使用
const Towxml = require("towxml"); const towxml = new Towxml(); //Markdown轉WXML let wxml = towxml.md2wxml("# Article title"); //html轉WXML let wxml = towxml.html2wxml("Demo示例Article title
"); //Markdown轉towxml數據 let data = towxml.toJson("# Article title","markdown"); //htm轉towxml數據 let data = towxml.toJson("# Article title");
將towxml/demo添加為小程序工程
再克隆towxml到demo目錄
使用小程序開發工具編譯即可
LicenseMIT
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/113143.html
摘要:是一個可將轉為微信小程序的渲染庫。用于解決在微信小程序中不能直接渲染的問題。依賴環境需要環境。已經安裝請忽略安裝接口使用轉轉轉數據轉數據示例將添加為小程序工程再克隆到目錄使用小程序開發工具編譯即可 Towxml Towxml 是一個可將HTML、Markdown轉為微信小程序WXML(WeiXin Markup Language)的渲染庫。 用于解決在微信小程序中Markdown、HT...
摘要:本項目由微信小程序開發論壇會員開發原文地址垂直微信小程序開發交流社區加載慢,等等微信小程序富文本解析自定義組件,支持及解析可能是第一個微信小程序富文本解析組件代碼庫地址示例版使用地址現狀版本號目前還不太適合直接使用目前項目不 本項目由微信小程序開發論壇-WeAppDev http://weappdev.com/ 會員開發 原文地址: http://weappdev.com/t/wxp...
摘要:上一篇小程序開發第一篇注冊獲取同步企業項目數據微信小程序開發者工具下載小程序開發者工具使用小程序原生開發直接使用小程序開發者工具打開項目即可小程序框架開發首選官方提供類開發框架,備選。 上一篇:小程序開發 第一篇:注冊、獲取unionid同步企業項目數據 1.微信小程序開發者工具 下載:小程序開發者工具 使用: 小程序原生開發:直接使用小程序開發者工具打開項目即可 小程序框架開發:...
閱讀 2572·2023-04-25 20:05
閱讀 2902·2023-04-25 17:56
閱讀 2212·2021-10-14 09:49
閱讀 2699·2019-08-29 15:10
閱讀 2931·2019-08-29 12:25
閱讀 429·2019-08-28 18:23
閱讀 766·2019-08-26 13:26
閱讀 1383·2019-08-23 18:21