How to display html format content in WeChat mini program

This article mainly introduces the method of displaying html format content in WeChat applet. It has certain reference value. Now I share it with you. Friends in need can refer to it.

I encountered something at work recently. I came across a requirement to display content in html format in a WeChat applet that cannot display html format. By searching for relevant information, I found that wxParse can be used to achieve this. The following article mainly introduces how to display html format in a WeChat applet. Friends who need it can refer to the method of content. Let’s take a look below.

Preface

In a recent project, I encountered the need to display news content in the WeChat applet. The news content is read from the server through the interface. The rich text content is in html format. The applet does not support the display of content in html format by default. When we need to display html content, we can use wxParse to achieve it.

Preparation:

First we download wxParse

##github Address: https://github.com/icindy/wxParse

wxParse

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

The following are the specific usage steps

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

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

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

var WxParse = require('../../wxParse/wxParse.js');

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

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

Page({
 data: {
 },
 onLoad: function () {
 var that = this;
 wx.request({
 url: '', 
 method: 'POST',
 data: {
 'id':13
 },
 header: {
 'content-type': 'application/json'
 },
 success: function(res) {
 var article = res.data[0].post;
 WxParse.wxParse('article', 'html', article, that,5);
 }
 })
 }
})

4. Reference the template in the page

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

In this way, html content can be embedded in the WeChat applet

#The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to PHP Chinese website!

Related recommendations:

How to use LESS with WebStorm in WeChat mini programs

About WeChat mini program Redux binding Analysis

The above is the detailed content of How to display html format content in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!