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

言：在實(shí)際開發(fā)項(xiàng)目中遇到在微信小程序里需要顯示新聞內(nèi)容，新聞內(nèi)容是通過接口讀取的服務(wù)器中的富文本內(nèi)容，是html格式的，小程序默認(rèn)是不支持html格式的內(nèi)容顯示的，那我們需要顯示html內(nèi)容的時(shí)候，就可以通過以下三種方式來進(jìn)行數(shù)據(jù)渲染。

第一種：通過小程序自帶的標(biāo)簽進(jìn)行 rich-text 數(shù)據(jù)渲染

文檔地址：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'];//對應(yīng)富文本編輯器的內(nèi)容
            that.setData({
            	content:content
            })
        }
    })
  }
})

2、在page.wxml中進(jìn)行數(shù)據(jù)輸出

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

第二種：使用插件wxParse來解析html

使用方法：

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

2、將下載后的文件夾放到小程序項(xiàng)目的根目錄

3、在需要加載html內(nèi)容的頁面對應(yīng)的js文件里引入wxParse

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

4、通過調(diào)用WxParse.wxParse方法來設(shè)置html內(nèi)容

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數(shù)據(jù)名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數(shù)據(jù)(必填)
* 4.target為Page對象,一般為this(必填)
* 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為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"/>
  
 <!--放在數(shù)據(jù)需要渲染的地方-->
<view class="wxParse">
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
 </view>

6、這樣就配置完了，具體的樣式是可以通過css去自定義調(diào)整的

第三種，通過webview來加載外部網(wǎng)頁

如果說直接使用文章詳情頁面，強(qiáng)烈建議直接加載外部網(wǎng)頁，這樣使用起來是去合理化的。

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

使用方法：

1、在所需頁面加載web-view標(biāo)簽，傳入外部訪問的路徑就可以了

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

需要注意的是個(gè)人版的微信小程序沒有這個(gè)功能，企業(yè)版的需要在控制臺中先配置相關(guān)的業(yè)務(wù)域名。

總結(jié)

以上就是小程序開發(fā)過程中對富文本編輯器中html渲染的三種常用方法。

我是小程序軟件開發(fā)，每天分享開發(fā)過程中遇到的知識點(diǎn)，如果對你有幫助的話，幫忙點(diǎn)個(gè)贊再走唄，非常感謝。

《完》

往期文章分享：

php常用的富文本編輯器，ueditor和kindeditor

HTML（HyperText Markup Language，中文：超文本標(biāo)記語言）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言。它由一系列標(biāo)簽組成，這些標(biāo)簽描述了網(wǎng)頁中的各個(gè)元素和其它相關(guān)信息。通過使用HTML標(biāo)簽和屬性，開發(fā)人員可以定義文本、圖像、鏈接、表格、表單等元素，并控制它們的外觀和行為。本文主要介紹HTML的基本概念、歷史背景和用途。

參考文檔：https://www.cjavapy.com/article/3297/

HTML實(shí)例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

HTML文檔的后綴名可以是.html或.htm，都可以使用，沒有區(qū)別。

注意：對于中文網(wǎng)頁需要使用<meta charset="utf-8"> 聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器(如 360 瀏覽器)會設(shè)置 GBK 為默認(rèn)編碼，則你需要設(shè)置為<meta charset="gbk"> 。

1、HTML的基本概念

1）標(biāo)簽（Tag）

HTML使用標(biāo)簽來定義網(wǎng)頁中的各個(gè)元素。標(biāo)簽通常以尖括號< >的形式出現(xiàn)，如<p>表示段落，<img>表示圖像等。標(biāo)簽可以包含屬性，用于提供額外的信息或控制元素的行為。

2）元素（Element）

一個(gè)完整的HTML元素由開始標(biāo)簽、內(nèi)容和結(jié)束標(biāo)簽組成。例如，<p>這是一個(gè)段落</p>就是一個(gè)完整的段落元素。

3）屬性（Attribute）

HTML標(biāo)簽可以具有屬性，用于提供元素的額外信息或控制元素的行為。屬性以鍵值對的形式出現(xiàn)，例如<img src="image.jpg">中的src屬性指定了圖像的源文件。

4）文檔結(jié)構(gòu)

一個(gè)HTML文檔由<html>、<head>和<body>等標(biāo)簽組成。其中，<html>標(biāo)簽用于定義整個(gè)HTML文檔的根元素，<head>標(biāo)簽用于定義文檔的頭部信息，如標(biāo)題和樣式表鏈接，<body>標(biāo)簽用于定義文檔的主體內(nèi)容。

5）塊級元素和內(nèi)聯(lián)元素

HTML元素可以被分類為塊級元素和內(nèi)聯(lián)元素。塊級元素以塊的形式顯示，獨(dú)占一行或一塊空間，如<p>、<div>等。內(nèi)聯(lián)元素以行內(nèi)的方式顯示，不會獨(dú)占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素內(nèi)部，形成一個(gè)層次結(jié)構(gòu)。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 聲明

HTML文檔的開頭通常會包含一個(gè)DOCTYPE聲明，用于指定文檔的HTML版本。

例如：

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

2、HTML與Web 瀏覽器

HTML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的標(biāo)記語言，而Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于顯示和解釋HTML文檔的應(yīng)用程序。Web瀏覽器通過解析HTML文檔，將其轉(zhuǎn)換為可視化的網(wǎng)頁。瀏覽器會讀取HTML文檔中的標(biāo)簽和內(nèi)容，并根據(jù)這些標(biāo)簽和內(nèi)容的定義，渲染出網(wǎng)頁的結(jié)構(gòu)和樣式。HTML提供了各種標(biāo)簽和屬性，用于定義文本、圖像、鏈接、表格、表單等在網(wǎng)頁中的展示和交互方式。瀏覽器在解析HTML時(shí)，會根據(jù)標(biāo)簽和屬性的定義，將文本顯示為段落、標(biāo)題或其他格式，顯示圖像、鏈接，并響應(yīng)用戶的交互操作。

通過HTML和Web瀏覽器的結(jié)合，用戶可以在瀏覽器中訪問和瀏覽各種網(wǎng)頁內(nèi)容，包括網(wǎng)頁文本、圖像、視頻、音頻等多媒體元素，并與網(wǎng)頁進(jìn)行交互，如點(diǎn)擊鏈接、填寫表單、提交數(shù)據(jù)等。

大部分瀏覽器中，直接輸出中文會出現(xiàn)中文亂碼的情況，需要在頭部將字符聲明為 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
頁面標(biāo)題</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

3、HTML版本及歷史背景

HTML有多個(gè)版本，每個(gè)版本都有不同的特性和改進(jìn)。

版本	發(fā)布時(shí)間
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年發(fā)布。它只包含一些基本的標(biāo)簽和屬性，用于創(chuàng)建簡單的文本和鏈接。HTML 1.0的目標(biāo)是定義一種通用的超文本標(biāo)記語言。

2）HTML 2.0

HTML 2.0于1995年發(fā)布，是對HTML 1.0的改進(jìn)和擴(kuò)展。它引入了一些新的標(biāo)簽和屬性，如圖像標(biāo)簽和表格標(biāo)簽，以支持更豐富的內(nèi)容展示。

3）HTML 3.2

HTML 3.2于1997年發(fā)布，是對HTML 2.0的進(jìn)一步改進(jìn)。它引入了一些新的標(biāo)簽和屬性，如表單標(biāo)簽和框架標(biāo)簽，以支持交互性和頁面布局。

4）HTML 4.01

HTML 4.01于1999年發(fā)布，是對HTML 3.2的修訂和擴(kuò)展。它引入了更多的標(biāo)簽和屬性，如層標(biāo)簽和樣式表，以支持更靈活的頁面設(shè)計(jì)和樣式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年發(fā)布，它嚴(yán)格遵循XML的語法規(guī)則，要求所有標(biāo)簽和屬性都要正確嵌套和閉合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式發(fā)布。HTML5引入了許多新的特性和API，如語義化標(biāo)簽、多媒體支持、Canvas繪圖、本地存儲等。HTML5還支持響應(yīng)式設(shè)計(jì)，以適應(yīng)不同設(shè)備和屏幕尺寸。

4、HTML用途

HTML是構(gòu)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容的基礎(chǔ)語言，它提供了豐富的標(biāo)簽和屬性，使得開發(fā)者可以創(chuàng)建各種類型的網(wǎng)頁，并實(shí)現(xiàn)不同的功能和效果。HTML用于定義網(wǎng)頁的整體結(jié)構(gòu)，包括標(biāo)題、段落、列表、標(biāo)題、導(dǎo)航菜單等元素。通過使用不同的HTML標(biāo)簽和屬性，可以將文本、圖像、音頻、視頻等內(nèi)容組織起來，并構(gòu)建頁面的層次結(jié)構(gòu)。HTML可以用于展示文本內(nèi)容和多媒體元素，如圖像、音頻和視頻。通過使用適當(dāng)?shù)腍TML標(biāo)簽和屬性，可以插入和顯示各種類型的媒體內(nèi)容，從而使網(wǎng)頁更加豐富和吸引人。HTML提供了創(chuàng)建表單的標(biāo)簽和元素，可以用于收集用戶的輸入數(shù)據(jù)。通過使用表單元素如文本框、復(fù)選框、單選按鈕和下拉列表等，用戶可以輸入數(shù)據(jù)并提交給服務(wù)器進(jìn)行處理。

參考文檔：https://www.cjavapy.com/article/3297/

紹

JavaScript是一種描述型的腳本語言，是一種解析語言，由瀏覽器動態(tài)解析，不同類型的瀏覽器、不同版本的瀏覽器對于JavaScript的解析有著微小的差別，不同瀏覽器的JavaScript解析引擎效率也有差異。

JavaScript的執(zhí)行過程分為兩大部分：

第一部分：解析過程，也稱為預(yù)編譯期。主要工作就是對于JavaScript的代碼中聲明的所有變量和函數(shù)進(jìn)行預(yù)處理。需要注意的是，在此進(jìn)行處理的僅是聲明函數(shù)，而對于變量的處理僅是聲明，并開辟出一塊內(nèi)存空間，不進(jìn)行賦值操作；
第二部分：執(zhí)行過程。在執(zhí)行過程中，瀏覽器的JavaScript引擎對于每個(gè)代碼塊進(jìn)行順序執(zhí)行。如果有外部引用的JavaScript，且JavaScript相互關(guān)聯(lián)，此時(shí)就要注意，不同JavaScript的引入順序。如果聲明代碼塊在調(diào)用代碼塊后調(diào)用，則將不會達(dá)到預(yù)期的效果。

總的來說，JavaScript的執(zhí)行分為兩部分：解析過程和執(zhí)行過程。解析時(shí)按照代碼塊，一段一段進(jìn)行解析，執(zhí)行時(shí)按照代碼塊順序逐行執(zhí)行，解析一個(gè)代碼塊，執(zhí)行一個(gè)代碼塊。

因?yàn)槭墙忉屝驼Z言，所以JavaScript如果在解析過程中有錯(cuò)誤，則不會提示，也可以理解為JavaScript不會出現(xiàn)編譯錯(cuò)誤，但如果出現(xiàn)了運(yùn)行時(shí)錯(cuò)誤，出現(xiàn)錯(cuò)誤以下的所有JavaScript代碼將不會繼續(xù)執(zhí)行。

全局預(yù)處理階段

預(yù)處理：創(chuàng)建一個(gè)詞法環(huán)境（LexicalEnvironment，簡寫為LE），掃描JavaScript中用聲明的方式聲明的函數(shù)，用var定義的變量并將它們加到預(yù)處理階段的詞法環(huán)境中去。

預(yù)處理階段先讀取代碼塊，不是一行一行的解析執(zhí)行定義的方法和用var定義的變量，會放到一個(gè)（不同的環(huán)境，會有對應(yīng)的詞法環(huán)境）詞法環(huán)境環(huán)境中。

 var a = 1;    // 用var定義的變量，已賦值
 var b;        // 用var定義的變量，未賦值
 c = 3;        // 未定義的變量，直接賦值
 
 // 用聲明的方式聲明的函數(shù)
 function d(){
   console.log('hello');
 }
 
 // 函數(shù)表達(dá)式
 var e = function() {
   console.log('world');
 }

詞法環(huán)境：

 LE {  // 此時(shí)的LE相當(dāng)于window
   a: undefined
   b: undefined
   d: 函數(shù)引用
   e: undefined
 }

預(yù)處理的函數(shù)必須是JavaScript中用聲明的方式聲明的函數(shù)，不是函數(shù)表達(dá)式。

示例：

 d();
 e();
 
 // 用聲明的方式聲明的函數(shù)
 function d(){
   console.log('hello');
 }
 
 // 函數(shù)表達(dá)式
 var e = function() {
   console.log('world');
 }

執(zhí)行結(jié)果：

 hello
 
 TypeError: e is not a function

命名沖突

函數(shù)優(yōu)先原則：在既有函數(shù)聲明又有變量聲明的時(shí)候，函數(shù)聲明的權(quán)重高于變量聲明，所以最終結(jié)果往往是指向函數(shù)的引用。

示例 1：

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

結(jié)果：

 [Function: f]

示例 2：

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

結(jié)果：

 [Function: f]

執(zhí)行階段

 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]

詞法環(huán)境：

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

函數(shù)沖突原則

處理函數(shù)聲明有沖突時(shí)，會覆蓋；
處理變量聲明有沖突時(shí)，會忽略。以傳入?yún)?shù)的值為準(zhǔn)。

預(yù)處理階段傳輸參數(shù)值一一對應(yīng)

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

詞法環(huán)境：

 LE {
   b: 2
   a: 指向函數(shù)的引用
   arguments: 2  // 調(diào)用函數(shù)時(shí)實(shí)際調(diào)用的參數(shù)個(gè)數(shù)
 }

運(yùn)行結(jié)果：

 [Function: f]
 2

沒有用var聲明的變量，會變成最外部LE的成員，即全局變量：

在線咨詢

上一篇：教你如何DIY布藝相框
下一篇：?Word如何轉(zhuǎn)為html格式？操作教程來了！

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

第一種：通過小程序自帶的標(biāo)簽進(jìn)行 rich-text 數(shù)據(jù)渲染

第二種：使用插件wxParse來解析html

第三種，通過webview來加載外部網(wǎng)頁

總結(jié)

1、HTML的基本概念

2、HTML與Web 瀏覽器

3、HTML版本及歷史背景

4、HTML用途

紹

全局預(yù)處理階段

命名沖突

執(zhí)行階段

函數(shù)沖突原則

您的項(xiàng)目需求