Based on MPVUE small program Markdown adaptation solution

Those of you who have developed applets know that they don’t support direct DOM insertion, so we’re in trouble when we get markdown data and need to render it.

Encapsulated MPvue-wemark address

Therefore, there are many mature markdown rendering schemes on Github, but when I wrote MPVue before, I found that it was not possible to use these libraries directly on MPVue, because WXML and VUE were not compatible, so I needed to adapt mpVue. I’m going to choose wemark.

The main steps are: 1) Repackage remarkable. Js into the ES version, the default scaffolding of MPVue is that Wepack2 does not support ES CommonJS mixing, and 2) make WXML and small program JS layers compatible with vUE writing.

The demo is as follows

<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>Copy the code

In this way, you can render markdown’s content in the MPvue applet