先說(shuō)點(diǎn)題外話，本來(lái)是寫在簡(jiǎn)書上面的文章，現(xiàn)在簡(jiǎn)書不支持發(fā)布了，只能在csdn上上傳了....
WebView對(duì)于前端開發(fā)的小伙伴來(lái)講肯定不陌生，功能是很輕大的，就是一個(gè)而普通的html界面。今天主要講一下小程序使用webview的場(chǎng)景。
一、先說(shuō)下需求背景，我們最近需要在微信小程序開發(fā)一個(gè)富文本的功能出來(lái)，如果是在傳統(tǒng)的瀏覽器開發(fā)是很簡(jiǎn)單的，因?yàn)閔tml提供了強(qiáng)大的渲染能力。我對(duì)小程序渲染富文本的方案也做了嘗試，分別使用了rich-text、wxparse、mpvue-parse、html2wxml，后三個(gè)都是第三方的渲染庫(kù)。
1.rich-text是微信提供的解析方案，渲染流暢但是效果很差勁，別說(shuō)數(shù)學(xué)公式就是某些常用的html布局都渲染不出來(lái)，更糟糕的是渲染節(jié)點(diǎn)是text格式，導(dǎo)致我們不可以使用csstree對(duì)dom進(jìn)行二次渲染和樣式優(yōu)化。
2.mpvue-parse是基于wxparse做的mpvue的擴(kuò)展，官方說(shuō)是很強(qiáng)大，擴(kuò)展了圖片預(yù)覽之類的功能，并且支持圖片尺寸設(shè)置，實(shí)際用下來(lái)還可以，渲染之后的效果也是dom結(jié)構(gòu)，樣式控制也比較簡(jiǎn)單。缺點(diǎn)：可能是需要本地動(dòng)態(tài)解析**html導(dǎo)致復(fù)雜的dom結(jié)構(gòu)會(huì)出現(xiàn)小程序界面卡死**，所以放棄了
3.html2wxml是一種服務(wù)器解析富文本的方案，這個(gè)是可以解決界面卡死的問題，他本質(zhì)就是把html解析為wxml，這個(gè)框架針對(duì)**數(shù)學(xué)題目有些是渲染不完整的**，不過它是支持自己搭建渲染庫(kù)的，不過還需要后臺(tái)人員配合維護(hù)所以也放棄了。這個(gè)是項(xiàng)目介紹html2wxml 微信小程序富文本渲染組件 HTML / Markdown 富文本解析-小程序-QwqOffice軟件工作室。可以加下作者聯(lián)系方式，因?yàn)橐恍┦褂脠?chǎng)景沒有詳細(xì)說(shuō)到，比如最新的解析地址，還有老的地址解析text格式文本會(huì)導(dǎo)致小程序view不更新的情況。
4.wxparse是對(duì)公式的渲染效果是這幾個(gè)里面最好的 ，不會(huì)丟失內(nèi)容，不過使用過程中發(fā)現(xiàn)解析效果并不會(huì)完全轉(zhuǎn)換為dom結(jié)構(gòu)，有些是直接轉(zhuǎn)化為微信的rich-text，所以樣式的控制就比較麻煩了。下面就是解析的一些rich-text的結(jié)構(gòu)：
![在這里插入圖片描述](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，這個(gè)效果就不用說(shuō)了，唯一的缺點(diǎn)就是體驗(yàn)不好了，畢竟會(huì)脫離小程序的原生界面去載入一個(gè)html鏈接，不管是加載速度還是體驗(yàn)會(huì)有些割裂感，不過一些比較大的廠商的小程序也是這樣處理的，比如拼多多的活動(dòng)頁(yè)面、騰訊文檔的內(nèi)容頁(yè)面（也必須用webview去渲染）。下面是一些渲染結(jié)果：

二、下面講一下微信小程序使用WebView的注意事項(xiàng)（只是目前發(fā)現(xiàn)的一些）

1.使用前提：管理平臺(tái)需要配置webview域名，不然真機(jī)無(wú)法進(jìn)入頁(yè)面；webview請(qǐng)求數(shù)據(jù)接口地址如果沒有加入域名訪問在小程序里面是看不到錯(cuò)誤提示的，這點(diǎn)要注意。

2.小程序打開調(diào)試并不能不獲WebView 的打印的錯(cuò)誤信息，導(dǎo)致出現(xiàn)問題不好調(diào)試，只能推消息通知給小程序：

3.沒有配置的webview域名在ios真機(jī)上面打開調(diào)試會(huì)出現(xiàn)偶發(fā)性的白屏，這個(gè)推斷應(yīng)該是網(wǎng)絡(luò)導(dǎo)致的，但是關(guān)閉掉調(diào)試之后就會(huì)好了。

4.代碼兼容性問題，由于微信webview使用的內(nèi)核特殊導(dǎo)致代碼存在兼容性問題，比如：

*{

margin:0; padding:0;

-webkit-touch-callout:none;

/系統(tǒng)默認(rèn)菜單被禁用/

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

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

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

user-select:none;

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

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

5.某些標(biāo)簽點(diǎn)擊在ios會(huì)出現(xiàn)點(diǎn)擊狀態(tài)我嘗試了好多方案還是沒有禁用掉，大家如果有好的方式可以留言…

6.webview無(wú)法自定義小程序的導(dǎo)航欄7.的屬性會(huì)導(dǎo)致ios上面活動(dòng)滾動(dòng)條不流暢，可以設(shè)置-webkit--:touch;去解決。

解決局域網(wǎng)共享問題，提示：無(wú)法訪問，你可能沒有權(quán)限使用網(wǎng)絡(luò)資源

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

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

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

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