⼀位⼩程序萌新的学渣笔记（五）towxml的⼩⽩教程——简单⾼效的将md
⽂档转化为wxml⽹页
前⾔
将md⽂档的内容转化为wxml⽹页 减少wxml的书写 使⽤的是towxml⼯具
实在是太太太⼩⽩了 ⼩⽩到⽤了两天的时间去实现这个功能呜呜呜 ⼜⽩⼜菜 简称⼩⽩菜 写个博客记录⼀下
本篇博客将讲述如何简单的将md⽂档储存在云开发上再转化为wxml页⾯
towxml的介绍
Towxml 是⼀个可将HTML、Markdown转为⼩程序WXML(WeiXin Markup Language)的渲染库。
⽤于解决在⼩程序中Markdown、HTML不能直接渲染的问题。
特⾊
可控制的⾳频播放器（可⾃⾏调节样式，解决原⽣audio在部分iPhone上不能⾃动播放的情况）
⽀持代码语法⾼亮
⽀持emoji表情
⽀持上标、下标、下划线、删除线、表格、视频、图⽚（⼏乎所有html元素）……
⽀持typographer字符替换
多主题动态⽀持
极致的中⽂排版优化
Markdown TodoList
⽀持事件绑定（这样允许⾃⾏扩展功能哟，例如：点击页⾯中的某个元素，更新当前页⾯内容等…）
前后端⽀持
⾳频播放器播放状态设定为每5秒更新⼀次，否则内容过多会导致性能下降
towxml⽂件分享
百度云分享地址
快速上⼿
1. 将TOWXML⽂件夹复制到⼩程序的根⽬录下注意：主要是与app.js和pages同⼀个层级
2. 在⼩程序app.js中引⼊库
//app.js
const Towxml =require('/towxml/main');
App({
onLaunch:function()
{
},
//创建⼀个towxml对象，供其它页⾯调⽤
towxml :new Towxml(),
// //声明Markdown⽂件⽬录路径
docDir:'b.qcloud.la/',
/
/xxx中的内容是云开发库名
//声明⼀个数据请求⽅法
getText:(url, callback)=>{
url: url,
header:{
'content-type':'application/octet-stream'
},
success:(res)=>{
if(typeof callback ==='function'){
callback(res);
};
}
});
},
})
框住的地⽅被我马赛克了！！⼩伙伴不要太懒了 要⾃⼰动⼿去看看哦
3. 创建你需要转化md⽂档⽹页
例如创建⼀个demo的⽂件夹
⾥⾯有4个基础配置⽂件index
4. 在云开发存储md⽂档
举例⼦ proposal.md⽂档内容
第七届提案征集⼤赛（学术）
本⼤赛作为学校“青研杯”调研⽐赛的⼀个专项竞赛，将由提案申报、校区初赛、校区复赛与总决赛四个环节，推选出2019-2020年度校园”⼗⼤优秀提案“。
活动时间
2020年3⽉-2020年5⽉
活动地点
华南师范⼤学全校
⾯向对象
华南师范⼤学全⽇制本科⽣与研究⽣
选题范围
教务管理类，如教学质量、学分设置等。
⽣活服务类，如垃圾分类、⽇常缴费等。
校园发展类，如设施建设、校园⽂化等。
科研学术类，如培养机制、特⾊课程等。
我在云开发创建了⼀个university⽂件夹
上传了⼀个proposal.md到university⽂件夹
这⾥可以随意！主要是看⾃⼰的需求
5. index.wxml中的代码
<!--miniprogram/pages/demo/index.wxml-->
<!--使⽤towxml-->
<view class="text">
<import src="/towxml/entry.wxml"/>
<template is="entry"data="{{...article}}"/>
</view>
<!--使⽤towxml end-->
6. index.js中的内容
// miniprogram/pages/demo/index.js
const app =getApp();
Page({
data:{
article:{},
},
/**********************  ⽂件转换部分js start  ***********************/
onLoad:function(options){
let that =this
wx.showToast({title:'加载中', icon:'loading', duration:10000});
//将markdown内容转换为towxml数据
let articleData = Json(res.data,'markdown');
//设置⽂章数据，并清除页⾯loading
//设置⽂章数据
that.setData({
article: articleData,
});
wx.hideToast();//清除页⾯loading
};
});
}
})
7. index.json中的内容
{
代码转换"usingComponents":{}
}
8. index.wxss中的内容
/* miniprogram/pages/demo/index.wxss */
/**主题配⾊**/
@import '/towxml/style/main.wxss';
/
**如果页⾯有动态主题切换，则需要将使⽤到的样式全部引⼊**/
/**主题配⾊（浅⾊样式）**/
@import '/towxml/style/theme/light.wxss';
/**主题配⾊（深⾊样式）**/
@import '/towxml/style/theme/dark.wxss';
9. 编译成功
基于该基础的修改与运⽤
md图⽚的上传
如果在md⽂档上放了⼀张图⽚，需要将图⽚上传到云开发上才可以显⽰
例如我在university⽂件夹中建⽴⼀个img⽂件夹，其中储存了⼀张photo.jpg的图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。