微信小程序动态渲染Markdown教程：Towxml库集成与实战

// clone仓库
git clone https://github.com/sbfkcel/towxml.git
// 进入文件夹
cd towxml
// 安装依赖
npm install
// 构建
npm run build

/**
 * app.ts
 * TS小程序的App泛型可能和引入的组件不兼容，可以改成any
 */
App<any>({ 
  globalData: {},
  towxml:require('/towxml/index'),
  onLaunch() {
  },
})

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

<!--index.wxml-->
<view class="container">
    <towxml nodes="{{article}}"/>
</view>

//获取应用实例
const app = getApp();
// data中添加两个变量
Page({
  data: {
    isLoading: true,                // 判断是否尚在加载中
    article: {}                        // 内容数据
  },
})

onLoad: function () {
    let result = app.towxml('# Markdown', 'markdown',{
      base:'https://xxx.com',                // 相对资源的base路径
      theme:'light',                    // 主题，默认`light`
      events:{                    // 为元素绑定的事件方法
        tap:(e)=>{
          console.log('tap',e);
        }
      }
    });
    // 更新解析数据
    this.setData({
      article:result,
      isLoading: false
    });
  }

// 获取markdown文本
  getText: (url, callback) => {
    wx.request({
      url: url,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        if (typeof callback === 'function') {
          callback(res);
        };
      }
    });
  },

onLoad: function () {
    // 获取文本，第一个参数指向后端的文件地址（你需要起一个后端）
    this.getText('http://127.0.0.1:8080/test.md', res => {
      // 回调函数中完成更新数据的逻辑
      let result = app.towxml(res.data, 'markdown',{
        base:'https://xxx.com',            
        theme:'light',                    
        events:{                    
          tap:(e)=>{
            console.log('tap',e);
          }
        }
      });
      // 更新解析数据
      this.setData({
        article:result,
        isLoading: false
      });
    })
  }