基於mpvue的小程式markdown適配解決方案

flytam發表於2019-02-01
Vue

相信開發過小程式的人都知道小程式不支援直接插入dom，那麼當我們獲取到markdown資料需要渲染的時候就有麻煩。

封裝好的mpvue-wemark地址

因此github上有很多成熟的小程式markdown渲染方案，但是自己之前寫mpvue的時候發現在mpvue上直接用這些庫是不行的，因為wxml和vue的寫法上是不相容的，因此就需要對mpvue進行適配。這裡我選擇wemark這個庫。

主要做了幾步
：1、把remarkable.js重新打包成ES版本，mpvue預設腳手架是wepack2不支援es commonjs混用
2、把wxml和小程式js層不相容vue的寫法相容了下。

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>
複製程式碼

這樣，就實現了在mpvue小程式中渲染出markdown的內容了

相關文章