Use of Baidu applet rich text parsing tool bdParse

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">拼多多开店，付费推广是有门路和讲究的。不论你是过早把钱花完，还是花不完，都是不利我们商品流量推广的。今天，
  带大家了解一下分时折扣的概念和调整方法。</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">免费领取。
  `
  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!