How to display html format content in WeChat mini program (graphic tutorial)

The following article mainly introduces you to the method of displaying html format content in WeChat applet. Friends who need it can refer to it. Let’s take a look together.

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 work:

First we download wxParse

github address: https:// github.com/icindy/wxParse

Local download: http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar

wxParse

After downloading, we need to use the wxParse folder in the directory and copy it to 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. When you need to load Introduce wxParse

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

3 into the js file corresponding to the page with html content. 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}}"/>

This way you can embed html content in the WeChat applet

Summary

The above is me I compiled it for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to implement the three-in-one payment code of QQ, WeChat and Alipay using PHP

PHP implementationWeChatDetailed explanation of the custom menu interface for public accounts and enterprise accounts

PHP implementation APPWeChatPayment case analysis

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