整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
言：在實際開發項目中遇到在微信小程序里需要顯示新聞內容，新聞內容是通過接口讀取的服務器中的富文本內容，是html格式的，小程序默認是不支持html格式的內容顯示的，那我們需要顯示html內容的時候，就可以通過以下三種方式來進行數據渲染。
文檔地址：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>使用方法：
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去自定義調整的
如果說直接使用文章詳情頁面，強烈建議直接加載外部網頁，這樣使用起來是去合理化的。
文檔地址：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）標簽（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>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>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還支持響應式設計，以適應不同設備和屏幕尺寸。
HTML是構建網頁結構和內容的基礎語言，它提供了豐富的標簽和屬性，使得開發者可以創建各種類型的網頁，并實現不同的功能和效果。HTML用于定義網頁的整體結構，包括標題、段落、列表、標題、導航菜單等元素。通過使用不同的HTML標簽和屬性，可以將文本、圖像、音頻、視頻等內容組織起來，并構建頁面的層次結構。HTML可以用于展示文本內容和多媒體元素，如圖像、音頻和視頻。通過使用適當的HTML標簽和屬性，可以插入和顯示各種類型的媒體內容，從而使網頁更加豐富和吸引人。HTML提供了創建表單的標簽和元素，可以用于收集用戶的輸入數據。通過使用表單元素如文本框、復選框、單選按鈕和下拉列表等，用戶可以輸入數據并提交給服務器進行處理。
參考文檔：https://www.cjavapy.com/article/3297/
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的成員，即全局變量：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
