How to display html format content in WeChat mini program-Mini Program Development-php.cn

How to display html format content in WeChat mini program

不言

Release： 2018-06-26 16:42:38

Original

8726 people have browsed it

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";

Copy after login

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

var WxParse = require(&#39;../../wxParse/wxParse.js&#39;);

Copy after login

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,可选)
*/

Copy after login

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

Copy after login

4. Reference the template in the page

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

Copy after login

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!