小程序 102800 以及新版 WEPT 的改動

時間 2019-12-06

標籤程序以及新版 wept 改動简体版

原文原文鏈接

上一版微信小程序 0.10.102800 帶來了許多的變化，以致於我一度覺得 WEPT 這個主打熱更新的小工具沒什麼繼續存在的必要了，然而儘管我看到了小程序團隊對於完善開發工具的不懈努力，它的體驗在不少方面仍是不那麼讓我滿意（常常性崩潰以及內存泄露）。javascript

102800 版本具體新增和修復的改動官方文檔裏面已經作了詳細的說明（雖然他們代碼未必很好，可是文檔很專業）。我來談一些內部實現上的一些變化，但願能幫你們對於小程序結構有個更好的瞭解，被坑了時候也能大概知道是怎麼回事 ?css

新的 wxss 構建方式前端

以前版本 wxss 中的 rpx 單位使用的是 rem 進行的模擬，可是微信團隊發現這種方式部分機型上會有邊框顯示不全等問題。新版中的 rpx 會經過當前頁面的 screenWidth 和 deviceRatio 動態計算出一個 px 數值，而後取整數。java

官方工具中 wxss 加載過程爲後臺編譯 wxss 生成 javscript 文件，而後前端 view 層加載並執行這個 script 生成 css 文本，最後生成 css 標籤添加到 head 元素裏。這種方式缺點在於若是咱們修改了 wxss 或者調整頁面寬度，全部頁面都須要從新刷新，而不只僅是從新加載 css 那麼簡單，另外一個問題是生成的內聯 css 沒法使用 css souremap 支持，不過官方工具提供了本身的 wxml 面板而且加入了相應 wxss 文件的跳轉功能。git

新的交互反饋 APIgithub

102800 版本加入了 wx.showToast wx.showModal wx.hideToast wx.showActionSheet 4 個交互 API，方便開發者更容易的使用組件。這幾個 API 的 UI 是由底層直接生成的，因此它的缺點就是不能使用 css 重寫樣式了，設計的時候要注意了，若是須要好看的樣式只能本身實現相應功能。json

更加完善的 wxml 面板小程序

新版的 wxml 支持屬性頁面同步、編輯元素屬性、顯示元素樣式和 Dataset 等功能，儘管沒有 Chrome 自帶的 Elements 面板那麼靈活，可是已經很是實用了。後端

WEPT 0.5.0 在兼容現有小程序 API 的基礎上，同時也作出了一些改進。微信小程序

css sourcemap 支持

WEPT 使用後端將 wxss 文件轉換爲 css 文件，而且添加了 css sourcemap 功能，開發者能夠直接從樣式面板跳轉到對應文件的對應行，若是你在 Chrome 的 devtools 中添加了「映射到本地文件」，能夠直接去編輯對應文件，由於 WEPT 支持 wxss 文件熱更新，因此保存後樣式會當即生效。

JavaScript sourcemap 支持

官方工具支持 JavaScript 的 souremap，可是目前的實現有 bug，使用本地文件映射功能會報錯：

WPET 中的 souremap 能夠映射到本地文件，開發者能夠直接在 Chrome 的 sources 面板下修改相應文件。

代理配置支持

WEPT 支持在項目目錄下的 wept.json 配置文件，開發者能夠添加該項目使用的代理服務器配置，具體使用方法請參考 wept 配置文檔。

若是你須要使用工具調整修改請求或者服務端響應，別忘了調整 app.json 裏面配置的超時時間： networkTimeout

重作了 wxml，wxss 以及 javscript 熱更新

wxml 改成由控制層發起新模板請求, 生成新的 generateFunction 全局變量到 view 層，再經過發送 appDataChange 事件讓 view 層從新渲染，避免原先修改 view 層代碼可能致使的 bug。

wxss 文件的熱更新支持新版的 rpx 計算方式，支持 window resize 後自動重刷新，支持 @import 引入文件修改後自動刷新相應 css。

javascript 文件修復了以前路徑上 query 參數沒法正確傳遞的 bug，相比於官方工具修改 js 文件後重置到項目主頁，WEPT 針對頁面 JavaScript 文件使用動態熱更新，即使是其它 js 文件，在頁面刷新後也將自動導航到以前頁面。

啓動時編譯全部文件

如今 WEPT 啓動時會將全部的 wxml、wxss 以及 JavaScript 進行解析後放入緩存對象，這有助於幫助開發者儘早發現編譯期的 bug，同時必定程度提升了頁面載入速度（每一個 wxss 文件大概 30ms 左右）