(超详细)uniapp 微信小程序使用towxml实现makDown文本展示
·
效果展示:左 默认 右 解析后


本文使用的是vue2 + Towxml实现makDown 数据渲染回显
一、克隆项目到本地
git clone https://github.com/sbfkcel/towxml.git
二、下载依赖后执行build编译代码
npm install
npm run build
下载依赖 和 build 后会生成 依赖包和dist包
三、在项目根目录新建 wxcomponents目录 并将build后的dist 改名为towxml放在wxcomponents目录下

四、修改 文件引用路径

五、在pages.json 要使用的页面进行配置
"pages": [
{
"path": "pages/index/index",
"style": {
"usingComponents": { //配置此参数
"towxml": "/wxcomponents/towxml/towxml"
}
}
}
],
六、main.js的配置
以上是放在主包中的相关配置,由于放在主包中可能会使用主包超大那么就可以将towxml移入到分包中 以下是相关配置
注意:将towxml 移入到分包中后运行项目时unpackage 分包下不会编译出wxcomponents会报错找不到towxml

一、 按照官方要求copy-webpack-plugin用5.0.0的版本
npm install -save copy-webpack-plugin@5.0.0
二、 把wxcomponents整个文件夹放到你的分包下

在项目根目录创建vue.config.js文件
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{ from: path.join(__dirname, 'subPackages/subPackC/wxcomponents'), to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', 'mp-weixin', 'subPackages/subPackC/wxcomponents') }
])
]
}
};
注解:CopyWebpackPlugin的from就是把分包subPackages/subPackC/wxcomponents里的文件自定义打包到unpackage/dist->build/dev->mp-weixin->subPackages/subPackC/wxcomponents里
pages.json也要改下引入的路径
towxml 的路径就是相对于你现在要用的页面的路径
{
"root": "subPackages/subPackC",
"pages": [{
"path": "questionPage/askPage/askPage",
"style": {
"navigationBarTitleText": "问一问",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"usingComponents": {
"towxml": "../../wxcomponents/towxml/towxml"
}
}
}]
}
以上是本人根据参考解决方案及个人在处理过程中遇到的问题的一些说明,如有不足之处希望大家多多指正
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)