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

背景

小程序作为移动端主流应用之一，越来越被人们使用，而其中markdown渲染也是一项很实用的功能。由于小程序语法和HTML语法有所差别，因此需要寻找一种合适的解决方案来实现小程序中的markdown渲染。

解决方案

本文介绍的解决方案是基于mpvue框架的markdown适配。mpvue框架是一个将Vue框架运行于小程序端的解决方案，使用mpvue的目的是为了让我们在小程序中可以使用Vue的语法，同时充分发挥Vue技术栈的优势来提升小程序开发的效率。

在mpvue中，可以通过marked.js来解析markdown语法，然后将解析的结果格式化为小程序标签，从而渲染出需要的样式。

实现方法

1. 安装marked.js

使用npm安装marked.js

npm install marked --save

2. 引入marked.js

将marked.js引入到编辑器的main.js文件中：

import marked from 'marked';

3. 定义markdown组件

在components目录中创建一个markdown组件，并在template标签中使用小程序的rich-text标签来渲染markdown内容：

<template>
  <rich-text :nodes="nodes"></rich-text>
</template>

4. 将markdown文本解析为小程序标签

在组件的methods中使用marked.js将markdown文本解析为小程序标签：

methods: {
  parserMarkdown(md){
    let that = this;
    marked(md, (err, content)=>{
      if (err) throw err;
      that.nodes = that.$interceptors.nodes(content);
    });
  }
}

5. 使用markdown组件

在需要使用markdown的页面中引入定义好的markdown组件，然后在方法中调用解析markdown的方法即可：

<template>
  <markdown :md="md"></markdown>
</template>

<script>
import markdown from '@/components/markdown';
export default {
  components: {markdown},
  data(){
    return {
      md: '# 标题\n\n正文内容'
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.$refs.markdown.parserMarkdown(this.md);
    })
  }
}
</script>

<style>
</style>

示例说明

下面的示例是一个使用上述解决方案的小程序页面示例，该页面呈现了一个markdown文档的样式：

<template>
  <markdown :md="md"></markdown>
</template>

<script>
import markdown from '@/components/markdown';
export default {
  components: {markdown},
  data(){
    return {
      md: '# mpvue的markdown适配方法\n\n这是一条测试数据。'
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.$refs.markdown.parserMarkdown(this.md);
    })
  }
}
</script>

<style>
</style>

页面效果：