使用的库是towxml
第一步:下载源文件,那么可以git clone
,也可以直接下载压缩包git clone https://github.com/sbfkcel/towxml.git
第二步:设置文件夹内的config.js
,可以选择自己需要的格式
第三步:安装依赖和打包npm i
npm run build
打包完成后会生成一个dist
文件夹,改名字为towxml
第四步:在uniapp项目的src
目录下新建wxcomponents
目录(需要注意的是这个文件名是有要求的),然后将towxml
放到wxcomponents
下
第五步:修改towxml
里的decode.json
,将里面的前缀改为相对路径./
"decode": "/towxml/decode",
改为
"decode": "./decode",
第六步:在全局挂载towxml
,代码如下:
const towxml = require('./wxcomponents/towxml/index');
export function createApp() {
const app = createSSRApp(App);
app.config.globalProperties.$towxml = towxml
return {
app,
};
}
这里使用的commonjs
,所以需要安装@types/node
,并且在tsconfig.json
的types
添加node
,代码如下:
"types": ["@dcloudio/types","nutui-uniapp/global.d.ts","node"]
第七步:在pages.json
里需要的页面的style
属性里使用组件
{
"path": "pages/question_detail/index",
"style": {
"navigationBarTitleText": "面试题",
"usingComponents": {
"towxml": "/wxcomponents/towxml/towxml"
}
}
},
第八步:在页面使用towxml
<towxml :nodes="testData" class="towxml-content" />
import { reactive, ref, getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const appContext = instance?.appContext
const testData = appContext?.config.globalProperties.$towxml('``111``', 'markdown')
第九步:由于该组件默认带有边距,所以需要在towxml/style/main.scss
里进行手动修改,代码如下:
// towxml/style/main.scss
.h2w__main {
margin: 0;
padding-top: 0;
}
在组件里使用class
和! important
是无效的
实现效果:
参考了知乎文章:uniapp中解析markdown支持网页和小程序
参考了****文章:uni-app中使用towxml