微信小程序常用的三种解析html方法，你了解多少

言：在实际开发项目中遇到在微信小程序里需要显示新闻内容，新闻内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过以下三种方式来进行数据渲染。

第一种：通过小程序自带的标签进行 rich-text 数据渲染

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

使用方法：

1、在page.js中将从接口中获取的值传给content

Page({
  data: {
    content:''
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {
            'id':15
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var content = res.data['content'];//对应富文本编辑器的内容
            that.setData({
            	content:content
            })
        }
    })
  }
})

2、在page.wxml中进行数据输出

<rich-text nodes="{{content}}" bindtap="tap"></rich-text>

第二种：使用插件wxParse来解析html

使用方法：

1、插件下载地址：https://github.com/icindy/wxParse

2、将下载后的文件夹放到小程序项目的根目录

3、在需要加载html内容的页面对应的js文件里引入wxParse

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

4、通过调用WxParse.wxParse方法来设置html内容

/**
* 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':15
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var article = res.data['content'];
            WxParse.wxParse('article', 'html', article, that,5);
        }
    })
  }
})

5、在页面中引用模板

<!--放在底部-->
<import src="../../wxParse/wxParse.wxml"/>
  
 <!--放在数据需要渲染的地方-->
<view class="wxParse">
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
 </view>

6、这样就配置完了，具体的样式是可以通过css去自定义调整的

第三种，通过webview来加载外部网页

如果说直接使用文章详情页面，强烈建议直接加载外部网页，这样使用起来是去合理化的。

文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

使用方法：

1、在所需页面加载web-view标签，传入外部访问的路径就可以了

<web-view bindload="finish" src="http://www.baidu.com"></web-view>

需要注意的是个人版的微信小程序没有这个功能，企业版的需要在控制台中先配置相关的业务域名。

总结

以上就是小程序开发过程中对富文本编辑器中html渲染的三种常用方法。

我是小程序软件开发，每天分享开发过程中遇到的知识点，如果对你有帮助的话，帮忙点个赞再走呗，非常感谢。

《完》

往期文章分享：

php常用的富文本编辑器，ueditor和kindeditor

HTML（HyperText Markup Language，中文：超文本标记语言）是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性，开发人员可以定义文本、图像、链接、表格、表单等元素，并控制它们的外观和行为。本文主要介绍HTML的基本概念、历史背景和用途。

参考文档：https://www.cjavapy.com/article/3297/

HTML实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML文档的后缀名可以是.html或.htm，都可以使用，没有区别。

注意：对于中文网页需要使用<meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为<meta charset="gbk"> 。

1、HTML的基本概念

1）标签（Tag）

HTML使用标签来定义网页中的各个元素。标签通常以尖括号< >的形式出现，如<p>表示段落，<img>表示图像等。标签可以包含属性，用于提供额外的信息或控制元素的行为。

2）元素（Element）

一个完整的HTML元素由开始标签、内容和结束标签组成。例如，<p>这是一个段落</p>就是一个完整的段落元素。

3）属性（Attribute）

HTML标签可以具有属性，用于提供元素的额外信息或控制元素的行为。属性以键值对的形式出现，例如<img src="image.jpg">中的src属性指定了图像的源文件。

4）文档结构

一个HTML文档由<html>、<head>和<body>等标签组成。其中，<html>标签用于定义整个HTML文档的根元素，<head>标签用于定义文档的头部信息，如标题和样式表链接，<body>标签用于定义文档的主体内容。

5）块级元素和内联元素

HTML元素可以被分类为块级元素和内联元素。块级元素以块的形式显示，独占一行或一块空间，如<p>、<div>等。内联元素以行内的方式显示，不会独占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素内部，形成一个层次结构。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 声明

HTML文档的开头通常会包含一个DOCTYPE声明，用于指定文档的HTML版本。

例如：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2、HTML与Web 浏览器

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言，而Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于显示和解释HTML文档的应用程序。Web浏览器通过解析HTML文档，将其转换为可视化的网页。浏览器会读取HTML文档中的标签和内容，并根据这些标签和内容的定义，渲染出网页的结构和样式。HTML提供了各种标签和属性，用于定义文本、图像、链接、表格、表单等在网页中的展示和交互方式。浏览器在解析HTML时，会根据标签和属性的定义，将文本显示为段落、标题或其他格式，显示图像、链接，并响应用户的交互操作。

通过HTML和Web浏览器的结合，用户可以在浏览器中访问和浏览各种网页内容，包括网页文本、图像、视频、音频等多媒体元素，并与网页进行交互，如点击链接、填写表单、提交数据等。

大部分浏览器中，直接输出中文会出现中文乱码的情况，需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3、HTML版本及历史背景

HTML有多个版本，每个版本都有不同的特性和改进。

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014

1）HTML 1.0

HTML 1.0是最早的HTML版本，于1993年发布。它只包含一些基本的标签和属性，用于创建简单的文本和链接。HTML 1.0的目标是定义一种通用的超文本标记语言。

2）HTML 2.0

HTML 2.0于1995年发布，是对HTML 1.0的改进和扩展。它引入了一些新的标签和属性，如图像标签和表格标签，以支持更丰富的内容展示。

3）HTML 3.2

HTML 3.2于1997年发布，是对HTML 2.0的进一步改进。它引入了一些新的标签和属性，如表单标签和框架标签，以支持交互性和页面布局。

4）HTML 4.01

HTML 4.01于1999年发布，是对HTML 3.2的修订和扩展。它引入了更多的标签和属性，如层标签和样式表，以支持更灵活的页面设计和样式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年发布，它严格遵循XML的语法规则，要求所有标签和属性都要正确嵌套和闭合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式发布。HTML5引入了许多新的特性和API，如语义化标签、多媒体支持、Canvas绘图、本地存储等。HTML5还支持响应式设计，以适应不同设备和屏幕尺寸。

4、HTML用途

HTML是构建网页结构和内容的基础语言，它提供了丰富的标签和属性，使得开发者可以创建各种类型的网页，并实现不同的功能和效果。HTML用于定义网页的整体结构，包括标题、段落、列表、标题、导航菜单等元素。通过使用不同的HTML标签和属性，可以将文本、图像、音频、视频等内容组织起来，并构建页面的层次结构。HTML可以用于展示文本内容和多媒体元素，如图像、音频和视频。通过使用适当的HTML标签和属性，可以插入和显示各种类型的媒体内容，从而使网页更加丰富和吸引人。HTML提供了创建表单的标签和元素，可以用于收集用户的输入数据。通过使用表单元素如文本框、复选框、单选按钮和下拉列表等，用户可以输入数据并提交给服务器进行处理。

参考文档：https://www.cjavapy.com/article/3297/

绍

JavaScript是一种描述型的脚本语言，是一种解析语言，由浏览器动态解析，不同类型的浏览器、不同版本的浏览器对于JavaScript的解析有着微小的差别，不同浏览器的JavaScript解析引擎效率也有差异。

JavaScript的执行过程分为两大部分：

第一部分：解析过程，也称为预编译期。主要工作就是对于JavaScript的代码中声明的所有变量和函数进行预处理。需要注意的是，在此进行处理的仅是声明函数，而对于变量的处理仅是声明，并开辟出一块内存空间，不进行赋值操作；
第二部分：执行过程。在执行过程中，浏览器的JavaScript引擎对于每个代码块进行顺序执行。如果有外部引用的JavaScript，且JavaScript相互关联，此时就要注意，不同JavaScript的引入顺序。如果声明代码块在调用代码块后调用，则将不会达到预期的效果。

总的来说，JavaScript的执行分为两部分：解析过程和执行过程。解析时按照代码块，一段一段进行解析，执行时按照代码块顺序逐行执行，解析一个代码块，执行一个代码块。

因为是解释型语言，所以JavaScript如果在解析过程中有错误，则不会提示，也可以理解为JavaScript不会出现编译错误，但如果出现了运行时错误，出现错误以下的所有JavaScript代码将不会继续执行。

全局预处理阶段

预处理：创建一个词法环境（LexicalEnvironment，简写为LE），扫描JavaScript中用声明的方式声明的函数，用var定义的变量并将它们加到预处理阶段的词法环境中去。

预处理阶段先读取代码块，不是一行一行的解析执行定义的方法和用var定义的变量，会放到一个（不同的环境，会有对应的词法环境）词法环境环境中。

 var a = 1;    // 用var定义的变量，已赋值
 var b;        // 用var定义的变量，未赋值
 c = 3;        // 未定义的变量，直接赋值
 
 // 用声明的方式声明的函数
 function d(){
   console.log('hello');
 }
 
 // 函数表达式
 var e = function() {
   console.log('world');
 }

词法环境：

 LE {  // 此时的LE相当于window
   a: undefined
   b: undefined
   d: 函数引用
   e: undefined
 }

预处理的函数必须是JavaScript中用声明的方式声明的函数，不是函数表达式。

示例：

 d();
 e();
 
 // 用声明的方式声明的函数
 function d(){
   console.log('hello');
 }
 
 // 函数表达式
 var e = function() {
   console.log('world');
 }

执行结果：

 hello
 
 TypeError: e is not a function

命名冲突

函数优先原则：在既有函数声明又有变量声明的时候，函数声明的权重高于变量声明，所以最终结果往往是指向函数的引用。

示例 1：

 console.log(f);
 
 var f = 1;
 
 function f() {
   console.log('func');
 }

结果：

 [Function: f]

示例 2：

 console.log(f);
 
 function f() {
   console.log('func');
 }
 
 var f = 1;

结果：

 [Function: f]

执行阶段

 console.log(a); //  undefined
 console.log(b); //  TypeError: b is not a function
 console.log(c); //  [Function: f]
 console.log(d); //  undefined
 
 var a=1;
 b=2;
 console.log(b); // 2
 function c(){
   console.log('c');
 }
 
 var d = function(){
   console.log('d');
 }
 
 console.log(d); //  [Function: f]

词法环境：

 LE {
   a: undefined
   c: [Function: f]
   d: undefined
 }

函数冲突原则

处理函数声明有冲突时，会覆盖；
处理变量声明有冲突时，会忽略。以传入参数的值为准。

预处理阶段传输参数值一一对应

 function func(a, b) {
   console.log(a);
   console.log(b);
   
   var b = 100;
   function a{}
 }
 
 func(1, 2);

词法环境：

 LE {
   b: 2
   a: 指向函数的引用
   arguments: 2  // 调用函数时实际调用的参数个数
 }

运行结果：

 [Function: f]
 2

没有用var声明的变量，会变成最外部LE的成员，即全局变量：

在线咨询

上一篇：教你如何DIY布艺相框
下一篇：Word如何转为html格式？操作教程来了！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

微信小程序常用的三种解析html方法，你了解多少

第一种：通过小程序自带的标签进行 rich-text 数据渲染

第二种：使用插件wxParse来解析html

第三种，通过webview来加载外部网页

总结

1、HTML的基本概念

2、HTML与Web 浏览器

3、HTML版本及历史背景

4、HTML用途

绍

全局预处理阶段

命名冲突

执行阶段

函数冲突原则

您的项目需求