大家好，我是江辰，這篇文章記錄一次在真實的線上環境中，關於 web-view 的問題，大家可以跟隨作者一起看看心路歷程。
本文首發於微信公眾號：野生程序猿江辰
歡迎大家點贊，收藏，關注
問題背景
上半年最開始做的一版是展業大廳頁面和互動白板頁面（以下統稱 web-view）分離，後面由於騰訊那邊對交互方式不滿意，強調一定要展業大廳頁面和白板頁面在同一個頁面進行交互，最開始我們沒有思路，因為在小程序官方中的描述，web-view 頁面不允許疊加任何組件，後面是產品找到一個 demo，發現可以疊加，我這邊去翻了下他們的源碼（renderingMode: 'seperated'），最終解決了該問題，也就導致後面很多問題的產生。
現存問題
web-view 存在的情況
- 安卓更新組件不生效，比如 tab 切換，tab1 切換到 tab2 ，不生效，內容不會更新
- 安卓更新圖片不生效
- 安卓更新樣式不生效
- cover-view 文字消失
- 按鈕響應慢，機型性能低的手機比較明顯
針對問題 2，目前的 hack 方案，先渲染一張透明的圖片，然後再渲染其他圖片，可以生效
針對問題 1、2、3，僅在安卓端出現，蘋果手機上沒有發現，目前有一個比較 hack 的方案，通過卸載組件，重新渲染，可以達到目的，但是產生的性能損耗比較大，對交互體驗不友好，而且也導致了第四點問題的產生
針對問題 4 安卓復現頻率比較高，蘋果出現過一次
針對問題 5 安卓跟蘋果都存在
web-view 不存在的情況
都正常
嘗試過的方案
針對 cover-view 文字消失
- 設置組件寬高
- 設置字體顏色和背景顏色
- 刷新
以上方案，都不行，也沒法在開發者工具上查看 DOM 視圖
Console
元素的寬高都在，偏移位置也正常，就是文字消失
DOM
無法在開發者工具上查看 DOM 視圖
現象
正常
文字消失
這個元素的寬高都在，就是文字消失
微信小程序架構圖
展業小程序架構圖
解決方案
- 所有人的視頻流不再全部獲取，而是隻顯示四路視頻流，其他人員要顯示，在成員列表進行切換顯示
- 重點⼯作中花費精⼒最多的是模塊化解耦的重構、我簡單説下背景。因為之前我們代碼共建的、 但是因為客户這邊定製化的需求有很多，並且不是那麼簡單的能⽤抽象的⽅式把這些⾮通⽤功能的功能實現的、所以我們想出來的⽅案是：把⼩程序代碼⾥劃分重點模塊，把每個模塊都做成可插拔的，這樣我們只需要把差異化很多的部分抽出來完全獨⽴交給⾃⼰開發即可。同時這個⽅案實現好後，如果後續我們要開發新形態的應⽤，可以通過實現模塊的⽅式實現⼀套新的應⽤形態
這些優化工作總共時間大概花了一個月左右，完成之後，目前我們的產品能夠支持到 20+ 人同時進行音視頻，這塊實際測試過。對我們的產品穩定性越來越好！
