This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Recently, I have been working on the function of displaying the details of articles, and I plan to use Markdown to display the details. However, I found that wechat small programs are not very friendly in supporting Markdown. I found a useful component, Twoxml, which perfectly supports Markdown

Towxml introduction

Towxml | github.com/sbfkcel/tow…

Towxml is a rendering library that can convert HTML and Markdown into wechat small program WXML, supporting the following functions:

Using Towxml, you can achieve the following Markdown effect

Introduce Twoxml in applets

Build Twoxml

  • Clone the project locally
git clone https://github.com/sbfkcel/towxml.git
Copy the code

  • If NPM dependencies have not been installed, install them first

    NPM install or yarnCopy the code

  • Edit the configuration file towxml/config.js

    Just keep the features you need according to your actual needs

  • Run NPM run build or YARN run build

    Copy the dist directory to the root directory of the applet project and change the name of the directory to towXML to use

Use Twoxml in applets

In the previous step we introduced the towXML folder into the applet:

1. Import library /app.js

Towxml :require('/towxml/index'),}) towxml:require('/towxml/index')Copy the code

2. Import the TWOXML component in the configuration file on the specified page

// pages/content-detail/content-detail.json
{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}
Copy the code

3. Insert components into the page

// pages/content-detail/content-detail.wxml
<view class="content-info">
  <towxml nodes="{{article}}"/>
</view>
Copy the code

4. Parse content in JS

There are two ways to analyze the content. One is the Plus free version and the other is the basic version. Let me talk about the Plus version first

Plus one version

Normally, markdown source data should be retrieved from the server, so we’ll wrap a request method first (I wrapped it in app.js).

Towxml :require('/towxml/index'), // declare a data request method getText: (url, callback) => { wx.request({ url: url, header: { 'content-type': 'application/x-www-form-urlencoded' }, success: (res) => { if (typeof callback === 'function') { callback(res); }; }}); }})Copy the code

The parsed content is then processed in the JS file of the specific page

// pages/content-detail/content-detail.js const app = getApp(); Page ({/ * * * * / data Page of the initial data: {article: {}}, function / * * * life cycle - listening Page load * / onLoad: function (options) { app.getText('https://www.vvadd.com/wxml_demo/demo.txt?v=2',res => { let obj = App.towxml (res.data,'markdown',{theme:'light', // theme dark black, light white, Tap :e => {console.log('tap',e); }, change:e => { console.log('todo',e); }}}); This.setdata ({article:obj,}); }); }})Copy the code

Here I am requesting a website www.vvadd.com/wxml_demo/d… This url will return me the markdown source data. Let’s take a look at what’s in the requested address

We get the Markdown data, we assign it, and then we display it directly on the page, and then the exciting moment comes, look at the final result

The effect is not perfect, perfect implementation of markdown display

Basic version

After the plus version, we will talk about the basic version, because you may have custom processing operations for the Markdown data source, so we will look at the basic version implementation

// pages/content-detail/content-detail.js const app = getApp(); Page ({/ * * * * / data Page of the initial data: {article: {}}, function / * * * life cycle - listening Page load * / onLoad: Function (options) {// Markdown data source let content= "< H1 > H1H1H1H1H1 </ H1 >< H2 > H2H2H2H2 </h2>< H3 >123456</h3>" let result =" App.towxml (content,'markdown',{base:'www.xxx.com', // Relative resources base path theme:'light', // theme, Tap :(e)=>{console.log('h4',e); }}}); This.setdata ({article:result}); }})Copy the code

The basic version is complete and very simple. In fact, there is not much difference between the Plus version and the plus version, which is to encapsulate the data request. Let’s take a look at the effect

conclusion

Using Towxml to implement MarkDown is actually relatively simple. It not only supports rich Markdown syntax, but also supports charts, flow charts and mathematical formulas. In real development, markdown data source is obtained from the server. The front-end fetch directly after the assignment to avoid performance problems

Learning is endless, although I am a server-side development, but the love of small program development prompted me to continue to learn, if you think I write good, please give me a thumbs up, pay attention to a wave, exchange and study together, a person can go fast, a group of people will go further