Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to render the markdown content in mpvue Mini Program" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, I hope that this "how to render the markdown content in mpvue Mini Program" article can help you solve the problem.

Mpvue is a front-end framework for developing Mini Program using Vue.js. Using this framework, developers will get a complete Vue.js development experience, while providing code reuse capabilities for H5 and Mini Program. If you want to transform the H5 project into Mini Program, or develop Mini Program and hope to convert it into H5Magnempvue, it will be a very suitable solution.

The core goal of mpvue is to improve development efficiency and enhance development experience. Using this framework, developers only need to have a preliminary understanding of Mini Program development specifications and be familiar with the basic syntax of Vue.js. The framework provides a complete Vue.js development experience, developers write Vue.js code, mpvue parses it into Mini Program and ensures that it runs correctly. In addition, the framework provides quick start sample code to developers through vue-cli tools, and developers only need to execute a simple command to get a runnable project.

Main features:

Thorough component-based development capabilities: improving code

Complete Vue.js development experience

Convenient Vuex data management solution: convenient for building complex applications

Quick webpack construction mechanism: custom build strategy, development phase hotReload

Support for using npm external dependencies

Quickly initialize a project using the Vue.js command line tool vue-cli

H5 code conversion ability to compile into Mini Program object code

The principle of implementation:

Vue code

Write the Mini Program page as a Vue.js implementation

Implementation of parent-child component association based on Vue.js development specification

Mini Program Code

Write the view layer template with Mini Program development specification

Configuration lifecycle function, associated data update call

Mapping Vue.js data to Mini Program data Model

And on this basis, the following mechanisms are added

Establish association between Vue.js instance and Mini Program Page instance

The mapping relationship between Mini Program and Vue.js life cycle is established, which can trigger the Vue.js life cycle in Mini Program life cycle.

Mini Program event establishes a proxy mechanism to trigger the corresponding Vue.js component event response in the event proxy function.

It is reported that the mpvue framework has been practiced and verified in business projects and is currently being widely used within Meituan Dianping. Mpvue is based on Vue.js source code for secondary development, which not only increases the implementation of Mini Program platform, but also retains the ability to upgrade with the Vue.js version.

I believe anyone who has developed Mini Program knows that Mini Program does not support direct insertion into dom, so we will have trouble when we get the markdown data that needs to be rendered.

Encapsulated mpvue-wemark address

Therefore, there are many mature Mini Program markdown rendering schemes on github, but when I wrote mpvue before, I found that it is not possible to use these libraries directly on mpvue, because the writing of wxml and vue are incompatible, so I need to adapt to mpvue. Here I choose wemark as a library.

Mainly done a few steps: 1, repackage remarkable.js into ES version, mpvue default scaffolding is wepack2 does not support es commonjs mixing 2, the wxml and Mini Program js layer is not compatible with vue writing.

Demo is as follows

Import wemark from "mpvue-wemark"; export default {data () {return {mdData:''};}, components: {wemark}, mounted () {this.mdData = "# # hello, world";}}; that's all for "how to render markdown content in mpvue Mini Program". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.