网站名称和网址,宣化网站建设,上海网站建设优,广东惠州最新消息今天使用的库是towxml
第一步#xff1a;下载源文件#xff0c;那么可以git clone#xff0c;也可以直接下载压缩包 git clone https://github.com/sbfkcel/towxml.git
第二步#xff1a;设置文件夹内的config.js#xff0c;可以选择自己需要的格式
第三步#xff1a;安装…使用的库是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 towxmlreturn {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 :nodestestData classtowxml-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支持网页和小程序 参考了CSDN文章uni-app中使用towxml
