欢迎光临,了解微信小程序开发,就上易用通!

基于mpvue的小程序markdown适配解决方案

发布:2018-05-09 15:47浏览: 来源:网络 作者:cola

相信开发过小程序的人都知道小程序不支持直接插入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的内容了





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。