相信開(kāi)發(fā)過(guò)小程序的人都知道小程序不支持直接插入dom，那么當(dāng)我們獲取到markdown數(shù)據(jù)需要渲染的時(shí)候就有麻煩。

封裝好的 mpvue-wemark 地址

因此github上有很多成熟的小程序markdown渲染方案，但是自己之前寫(xiě)mpvue的時(shí)候發(fā)現(xiàn)在mpvue上直接用這些庫(kù)是不行的，因?yàn)閣xml和vue的寫(xiě)法上是不兼容的，因此就需要對(duì)mpvue進(jìn)行適配。這里我選擇wemark這個(gè)庫(kù)。

主要做了幾步 ：1、把remarkable.js重新打包成ES版本，mpvue默認(rèn)腳手架是wepack2不支持es commonjs混用 2、把wxml和小程序js層不兼容vue的寫(xiě)法兼容了下。

demo如下

<template>
  <div>
    <wemark :mdData='mdData'/>
  </div>
</template>

<script>
import wemark  from "mpvue-wemark";
export default {
  data() {
    return {
      mdData: ''
    };
  },
  components: {
    wemark
  },
  mounted() {
     this.mdData = "## hello, world";

  }
};
</script>

這樣，就實(shí)現(xiàn)了在mpvue小程序中渲染出markdown的內(nèi)容了