整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
bs與cs架構(gòu)是中文的bs與cs架構(gòu)。它們是兩種不同類(lèi)型的軟件系統(tǒng)架構(gòu)，具有不同的優(yōu)缺點(diǎn)。
BS體系結(jié)構(gòu)是指瀏覽器/服務(wù)器架構(gòu)，這意味著軟件運(yùn)行在網(wǎng)絡(luò)瀏覽器上，并與服務(wù)器通信。這種架構(gòu)的一些好處是：
可以實(shí)現(xiàn)跨平臺(tái)兼容，在客戶(hù)端實(shí)現(xiàn)零維護(hù)，而且部署和更新都很方便。
它可以使用豐富多樣的網(wǎng)絡(luò)技術(shù)和語(yǔ)言來(lái)創(chuàng)建用戶(hù)界面和功能。
它可以通過(guò)到達(dá)一個(gè)廣泛的和未知的用戶(hù)組。
這種架構(gòu)的一些缺點(diǎn)是：
個(gè)性化能力低，響應(yīng)速度慢，安全隱患大。
它在很大程度上依賴(lài)于服務(wù)器的性能和網(wǎng)絡(luò)帶寬。
它不能實(shí)現(xiàn)一些需要客戶(hù)端處理的復(fù)雜或特殊功能。
CS體系結(jié)構(gòu)代表客戶(hù)機(jī)/服務(wù)器體系結(jié)構(gòu)，這意味著軟件運(yùn)行在專(zhuān)用的客戶(hù)機(jī)程序上，并與服務(wù)器通信。這種架構(gòu)的一些好處是：
可以利用客戶(hù)端的計(jì)算能力，減輕服務(wù)器負(fù)載，達(dá)到較快的響應(yīng)速度。
它可以提供美觀、多樣、個(gè)性化的用戶(hù)界面和功能。
它可以處理復(fù)雜的業(yè)務(wù)流程，并確保高度的安全性和數(shù)據(jù)保護(hù)。
這種架構(gòu)的一些缺點(diǎn)是：
它需要在每臺(tái)客戶(hù)機(jī)上安裝、配置和維護(hù)專(zhuān)門(mén)的客戶(hù)機(jī)軟件。
對(duì)不同平臺(tái)和工具的兼容性和靈活性較低。
它的開(kāi)發(fā)和維護(hù)成本高，難度大。
小程序富文本能力的深入研究與應(yīng)用
前言
在開(kāi)發(fā)小程序的過(guò)程中，很多時(shí)候會(huì)需要使用富文本內(nèi)容，然而現(xiàn)有的方案都有著或多或少的缺陷，如何更好的顯示富文本將是一個(gè)值得繼續(xù)探索的問(wèn)題。
現(xiàn)有方案WxParse
WxParse 作為一個(gè)應(yīng)用最為應(yīng)用最廣泛的富文本插件，在很多時(shí)候是大家的首選，但其也明顯的存在許多問(wèn)題。
rich-text
rich-text 組件作為官方的富文本組件，也是很多人選擇的方案，但也存在著一些不足之處
共同問(wèn)題
方案構(gòu)建
因此要解決上述問(wèn)題，就得構(gòu)建一個(gè)新的方案來(lái)實(shí)現(xiàn)
渲染方式
對(duì)于該節(jié)點(diǎn)下沒(méi)有圖片、視頻、鏈接等的，直接使用 rich-text 顯示（可以減少標(biāo)簽數(shù)，提高渲染效果），否則則繼續(xù)進(jìn)行深入迭代，例如：
對(duì)于迭代的方式，有以下兩種方案：
解析腳本
從 包進(jìn)行改寫(xiě)，其通過(guò)狀態(tài)機(jī)的方式取代了正則匹配，有效的解決了容錯(cuò)性問(wèn)題，且大大提升了解析效率
//不同狀態(tài)各通過(guò)一個(gè)函數(shù)進(jìn)行判斷和狀態(tài)跳轉(zhuǎn)
for (; this._index < this._buffer.length; this._index++)
this[this._state](this._buffer[this._index]);
處理style標(biāo)簽解析方式匹配方式遇到的問(wèn)題
圖片顯示的問(wèn)題
在 html 中，若 img 標(biāo)簽沒(méi)有設(shè)置寬高，則會(huì)按照原大小顯示；設(shè)置了寬或高，則按比例進(jìn)行縮放；同時(shí)設(shè)置了寬高，則按設(shè)置的寬高進(jìn)行顯示；在小程序中，若通過(guò) image 組件模擬，需要通過(guò) 來(lái)獲取圖片寬高，再進(jìn)行 setData，當(dāng)圖片數(shù)量較大時(shí)，會(huì)大大降低性能；另外，許多圖片的寬度會(huì)超出屏幕寬度，需要加以限制
解決方案
用 rich-text 中的 img 替代 image 組件，實(shí)現(xiàn)更加貼近 html 的方式 ；對(duì) img 組件設(shè)置默認(rèn)的效果 max-width:100%;
視頻顯示的問(wèn)題
當(dāng)一個(gè)頁(yè)面出現(xiàn)過(guò)多的視頻時(shí)，同時(shí)進(jìn)行加載可能導(dǎo)致頁(yè)面卡死
解決方案
在解析過(guò)程中進(jìn)行計(jì)數(shù)，若視頻數(shù)量超過(guò)3個(gè)，則用一個(gè) wxss 繪制的圖片替代 video 組件，當(dāng)受到點(diǎn)擊時(shí)，再切換到 video 組件并設(shè)置 以模擬正常效果，實(shí)現(xiàn)了一個(gè)類(lèi)似懶加載的功能
<view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo">
<view class="triangle_border_right">view>
view>
<video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" />
文本復(fù)制的問(wèn)題
小程序中只有 text 組件可以通過(guò)設(shè)置 屬性來(lái)實(shí)現(xiàn)長(zhǎng)按復(fù)制，在富文本組件中實(shí)現(xiàn)這一功能就存在困難
解決方案
在頂層標(biāo)簽上加上 user-select:text;-webkit-user-select
實(shí)現(xiàn)更加豐富的功能
在此基礎(chǔ)上，還可以實(shí)現(xiàn)更多有用的功能
最終效果
經(jīng)過(guò)一個(gè)多月的改進(jìn)，目前實(shí)現(xiàn)了這個(gè)功能豐富，無(wú)層數(shù)限制，渲染效果好，輕量化（30.0KB），效率高，前后端通用的富文本插件，體驗(yàn)小程序的用戶(hù)數(shù)已經(jīng)突破1k啦，歡迎使用和體驗(yàn)
github 地址
npm 地址
總結(jié)
以上就是我在開(kāi)發(fā)這樣一個(gè)富文本插件的過(guò)程大致介紹，希望對(duì)大家有所幫助；本人在校學(xué)生，水平所限，不足之處歡迎提意見(jiàn)啦！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
