WeChat applet uses wxParse to parse and render html code snippets

        One of the recent needs in the project is that in the WeChat applet, the content of html code snippets needs to be displayed. The content is the rich text content in the server read through the interface. It is an html code snippet. The applet does not support the html format by default. The content displayed will be considered as Object and cannot be rendered normally. When we need to display html content, we can use wxParse to achieve it. First, we download wxParse
        on github . Although wxParse is currently out of maintenance, it can still meet daily needs. Later, we will introduce the wxParse-based version used to render small program html code snippets. To respect the original work, please check here for details.

 

After downloading, we need to use the wxParse folder in the directory and copy it to our project directory　　

The following are the specific steps to use

1. In the app.wxss global style file, you need to introduce the wxParse style sheet

@import "../wxParse/wxParse.wxss";

 It can also be introduced separately on a designated page.

2. Introduce wxParse into the js file corresponding to the page that needs to load html content

import wxParse from '../../wxParse/wxParse.js';

3. Set the html content by calling the WxParse.wxParse method

Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '你的接口地址', 
        method: 'POST',
        data: { 你的提交数据 },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            //主要关注这里
            var htmlPart = res.data;
            WxParse.wxParse('tips', 'html', htmlPart, that,5);
        }
    })
  }
})

4. Reference the template in the page

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{
   
   {wxParseData:tips.nodes}}"/>

        It should be noted here that other positions are written in a fixed way. Only tips is the name of the first parameter when calling parsing. This is defined by yourself. Following this wave of operations, you should be able to see the rendering effect in one wave. If it works, please check the introduction status of each page to see if it is successfully introduced. Pay attention to using ../../ when this method should be used. hierarchical relationship.

        Regarding rich-text, web-view, and WePY to realize the rendering of html code snippets, please move here , and I will not go into details here.

        

        I hope it helps you and I wish you success in achieving your goal.