微信小程序webview、渲染富文本

先說點題外話，本來是寫在簡書上面的文章，現在簡書不支持發布了，只能在csdn上上傳了....
WebView對于前端開發的小伙伴來講肯定不陌生，功能是很輕大的，就是一個而普通的html界面。今天主要講一下小程序使用webview的場景。
一、先說下需求背景，我們最近需要在微信小程序開發一個富文本的功能出來，如果是在傳統的瀏覽器開發是很簡單的，因為html提供了強大的渲染能力。我對小程序渲染富文本的方案也做了嘗試，分別使用了rich-text、wxparse、mpvue-parse、html2wxml，后三個都是第三方的渲染庫。
1.rich-text是微信提供的解析方案，渲染流暢但是效果很差勁，別說數學公式就是某些常用的html布局都渲染不出來，更糟糕的是渲染節點是text格式，導致我們不可以使用csstree對dom進行二次渲染和樣式優化。
2.mpvue-parse是基于wxparse做的mpvue的擴展，官方說是很強大，擴展了圖片預覽之類的功能，并且支持圖片尺寸設置，實際用下來還可以，渲染之后的效果也是dom結構，樣式控制也比較簡單。缺點：可能是需要本地動態解析**html導致復雜的dom結構會出現小程序界面卡死**，所以放棄了
3.html2wxml是一種服務器解析富文本的方案，這個是可以解決界面卡死的問題，他本質就是把html解析為wxml，這個框架針對**數學題目有些是渲染不完整的**，不過它是支持自己搭建渲染庫的，不過還需要后臺人員配合維護所以也放棄了。這個是項目介紹html2wxml 微信小程序富文本渲染組件 HTML / Markdown 富文本解析-小程序-QwqOffice軟件工作室?？梢约酉伦髡呗撓捣绞剑驗橐恍┦褂脠鼍皼]有詳細說到，比如最新的解析地址，還有老的地址解析text格式文本會導致小程序view不更新的情況。
4.wxparse是對公式的渲染效果是這幾個里面最好的 ，不會丟失內容，不過使用過程中發現解析效果并不會完全轉換為dom結構，有些是直接轉化為微信的rich-text，所以樣式的控制就比較麻煩了。下面就是解析的一些rich-text的結構：
![在這里插入圖片描述](https://img-blog.csdnimg.cn/201909121213266.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTU1NzE4,size_16,color_FFFFFF,t_70)

最終選擇了WebView，這個效果就不用說了，唯一的缺點就是體驗不好了，畢竟會脫離小程序的原生界面去載入一個html鏈接，不管是加載速度還是體驗會有些割裂感，不過一些比較大的廠商的小程序也是這樣處理的，比如拼多多的活動頁面、騰訊文檔的內容頁面（也必須用webview去渲染）。下面是一些渲染結果：

在這里插入圖片描述

小程序富文本解決方案_文本和富文本的區別_富文本類型

二、下面講一下微信小程序使用WebView的注意事項（只是目前發現的一些）

1.使用前提：管理平臺需要配置webview域名，不然真機無法進入頁面；webview請求數據接口地址如果沒有加入域名訪問在小程序里面是看不到錯誤提示的，這點要注意。

2.小程序打開調試并不能不獲WebView 的打印的錯誤信息，導致出現問題不好調試，只能推消息通知給小程序：

在這里插入圖片描述

3.沒有配置的webview域名在ios真機上面打開調試會出現偶發性的白屏，這個推斷應該是網絡導致的，但是關閉掉調試之后就會好了。

4.代碼兼容性問題，由于微信webview使用的內核特殊導致代碼存在兼容性問題，比如：

margin:0; padding:0;

-webkit-touch-callout:none;

/系統默認菜單被禁用/

小程序富文本解決方案_富文本類型_文本和富文本的區別

-webkit-user-select:none; /webkit瀏覽器/

-khtml-user-select:none; /早期瀏覽器/

-moz-user-select:none;/火狐/ -ms-user-select:none; /IE10/

user-select:none;

以上是禁用瀏覽器復制文本的css屬性，這個在小程序webview上面是沒效果的，只能通過js去設置了：..style. = “none”; //禁止彈出菜單

..style. = “none”;//禁止選中

5.某些標簽點擊在ios會出現點擊狀態我嘗試了好多方案還是沒有禁用掉，大家如果有好的方式可以留言…

6.webview無法自定義小程序的導航欄7.的屬性會導致ios上面活動滾動條不流暢，可以設置-webkit--:touch;去解決。

解決局域網共享問題，提示：無法訪問，你可能沒有權限使用網絡資源

一、啟用guest來賓帳戶；二、控制面板→管理工具→本地安全策略→本地策略→用戶權利指派里，“從網絡訪問此計算機”中加入guest帳戶，而“拒絕從網絡訪問這臺計算機”中刪除guest帳戶；三、我的電腦→工具→文件夾選項→查看→去掉“使用簡單文件共享（推薦）”前的勾；四、設置共享文件夾；五、控制面板→管理工具→本地安全策略→本地策略→安全選項里，把“網絡訪問：本地帳戶的共享和安全模式”設為“僅來賓-本地用戶以來賓的身份驗證”（可選，此項設置可去除訪問時要求輸入密碼的對話框，也可視情況設為“經典-本地用戶以自己的身份驗證”）；六、右擊“我的電腦”→“屬性”→“計算機名”，該選項卡中有沒有出現你的局域網工作組名稱，如“work”等。然后單擊“網絡 ID”按鈕，開始“網絡標識向導”：單擊“下一步”，選擇“本機是商業網絡的一部分，用它連接到其他工作著的計算機”；單擊“下一步”，選擇“公司使用沒有域的網絡”；單擊“下一步”按鈕，然后輸入你的局域網的工作組名，如“work”，再次單擊“下一步”按鈕，最后單擊“完成”按鈕完成設置。訪問網上鄰居時顯示:" windows xp系統訪問局域網時顯示 "無法訪問．您可能沒有權限使用網絡資源．請與這臺服務器的管理員聯系以查明您是否有訪問權限．此工作組的服務器的列表當前無法使用."我用的是xp系統我也遇到過這樣的情況，當時也是著急得不輕，后來看到了以下的內容，照著一步步的做了做，真的好了。

win10無權限使用網絡資源_win10沒有權限使用網絡資源_沒我權限使用網絡資源

內容不少，但是仍然希望你能耐住性子，仔細的看看自己屬于那種情況，應該會有所收獲。局域網互訪 - [ 網絡 ]我也是類似問題。以前一個局域網10多臺機子互訪問。安了蕃茄花園v2.3，感覺主題漂亮，桌面壁紙自動換，很爽。訪問局域網計算機沒問題?？删W內其它機子在工作組內能看到我的機子，但打不開。說什么“沒有權限”。所有設置都作了如下改動（網上找的），依然無效，何故？但求高手指點?！熬W上鄰居”無法互訪問題解決方法大全“網上鄰居”無法互訪的問題實在是太常見了，無論在學校，網吧還是家里多臺電腦聯機，都有可能遇到網上鄰居無法互訪的故展?！熬W上鄰居”無法訪問的故障多種多樣，總結起來基本上有下面的幾個：1，沒有共享資源/共享服務未啟用。癥狀：電腦與電腦間可以Ping通，但無法訪問共享資源，在“計算機管理”中查看“本地共享”后會彈出“沒有啟動服務器服務”的錯誤對話框。解決：在控制面板－管理工具－服務中啟動Server服務。并設置“啟動類型”為“自動”。2，IP設置有誤。癥狀：雙機之間無法互Ping，連接用的雙絞線經過測試沒有問題，沒有安裝防火墻。解決：檢查兩臺電腦的IP是否處在同一網段，還有子掩碼是否相同。

3，WINXP默認設置不正確。癥狀：從WIN98/2000/2003上無法訪問另一臺WINXP的機器。解決：在“控制面板”中的“用戶帳戶”啟用Guest帳號。然后在運行中輸入secpol.msc啟動“本地安全策略”。本地策略 -> 用戶權利指派，打開“從網絡訪問此計算機”，添加Guest帳戶本地策略 -> 安全選項，禁止"帳戶：使用空白密碼的本地帳戶只允許進行控制臺登陸"。另外有時還會遇到另外一種情況：訪問XP的時候，登錄對話框中的用戶名是灰的,始終是Guest用戶，不能輸入別的用戶帳號。解決：本地策略 -> 安全選項 -> "網絡訪問：本地帳戶的共享和安全模式"，修改為"經典-本地用戶以自己的身份驗證"4，系統漏洞修補軟件修改了安全策略。癥狀：在“網上鄰居”中可以看到對方的計算機，但是訪問共享時卻提示“沒有權限訪問網絡”解決：在開始菜單運行中輸入secpol.msc啟動“本地安全策略”，本地策略 -> 用戶權利分配，打開“拒絕從網絡訪問這臺計算機”，刪除guest用戶。5，防火墻規則。癥狀：安裝了防火墻（包括WINXP系統自帶的防火墻），出現無法Ping通，或者是訪問共享資源的時候提示"XXX無法訪問"、"您可能沒有權限使用網絡資源"、"請與這臺服務器的管理員聯系以查明您是否有訪問權限"、"找不到網絡路徑"等類似的提示。

win10沒有權限使用網絡資源_沒我權限使用網絡資源_win10無權限使用網絡資源

解決：停止防火墻或者添加局域網的訪問規則。WINXP自帶的防火墻：打開控制面板 -> 網絡和連接 -> Windows防火墻 -> 例外，勾選“文件和打印機共享”。6，Win2000/XP與Win98互訪癥狀：Ping命令可以通過，但無法在“網上鄰居”中實現互訪。解決：在WIN2000/XP系統中：控制面板 -> 管理工具 -> 計算機管理 -> 本地用戶和組 -> 用戶，在Guest帳戶上點擊鼠標右鍵，選擇屬性，在常規項里取消

在線咨詢

上一篇：OBS快速入門基礎使用教程
下一篇：微信小程序富文本插件全面對比

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

微信小程序webview、渲染富文本

您的項目需求