Recently I am working on a Baidu applet project. My requirement is that the backend returns the html structure data of the article, and the front-end applet needs to display the page synchronously. The first thing that comes to mind is that it must parse the html structure data;

So you need to use the rich text parsing function. Although the applet provides the rich-text rich text component function, this effect may not satisfy the function you want, so you need to parse and process it.

So I went to Baidu for a look, and sure enough, an expert has written the component and can use it directly (Baidu applet rich text parsing tool bdParse, modified from wxparse,

Of course, if you have the ability to You can write one on your own page), record the specific steps here as follows:

Step 1: Baidu finds the download address of the bdparse component; the download address is https://gitee.com/sootou/bdparse, download the entire Put all the files in the root directory of your mini program

Step 2: Directly introduce the code into the js file of the mini program page

const bdParse = require('../../bdParse/bdParse.js')

Introduce it into the corresponding css

@import "../../bdParse/bdParse.css";

Step 3: Call in the js file; use baparse in the required fields, which can be quoted in the onLoad method

onLoad: function (options) {
  let content = `
  <p style="line-height:nullpx;text-indent:2em;text-align:left"><font face="宋體">
  <font size="4"><font color="#000000">拼多多開店，付費推廣是有門路和講究的。不論你是過早把錢花完，還是花不完，都是不利我們商品流量推廣的。今天，
  帶大家了解一下分時折扣的概念和調(diào)整方法。</font></font></font></p><p style="line-height:nullpx;text-indent:2em;text-align:left"><strong>
  <font face="宋體"><font size="4"><font color="#000000">我這邊給大家整理一份拼多多店鋪運營的實操干貨和資料，需要的朋友可以
  </font><font color="#ff0000">掃描底部二維碼</font><font color="#000000">免費領(lǐng)取。
  `
  this.setData({
    content:bdParse.bdParse(&#39;article&#39;, &#39;html&#39;,result, that, 10)
  })
}

Step 4: Introduce the template file into the swan page and fill in the following code

<import src="../../bdParse/bdParse.swan" />
<template is="bdParse" data="{{{bdParseData: article.nodes}}}" />

Summary: On the basis of experts, you can learn faster and quickly realize the functions you want. This is also a way of learning. Learning is a process of gradual accumulation, and communication is an important way of learning.

The above is the use of Baidu applet rich text parsing tool bdParse. For more information, please pay attention to other related articles on the PHP Chinese website!

The above is the detailed content of Use of Baidu applet rich text parsing tool bdParse. For more information, please follow other related articles on the PHP Chinese website!