天天看點

奇思妙想:小程式wxapkg包一鍵運作至浏覽器?

如題所示,本文探讨的是如何将 wxapkg 小程式代碼包運作至浏覽器,也就是wxappUnpacker + wept 兩個工具組合在一起會産生什麼效果。

老粉絲應該都清楚前面一個是什麼了,對于後面一個工具可能不太了解。

那麼我們先來說說 wept 吧

緣起

記得之前一段時間曾經集中推過幾篇文章,即:實作小程式編譯運作環境系列。

而 wept 項目則是這個實作的一個典型方案,對于想要開發一個小程式運作時的公司或者個人(個人?能不能 hold 住 ಥ_ಥ) 來說是極具參考價值的。

這裡先簡要介紹一下 WEPT 項目(在部落客剛開始接觸小程式開發的時候就有耳聞,覺得挺厲害的)。

WEPT 是一個微信小程式實時開發環境,它的目标是為小程式開發提供高效、穩定、友好、無限制的運作環境。項目背景使用 node 提供服務完全動态生成小程式,前端實作了 view 層、service 層和控制層之間的相關通訊邏輯。支援 iOS Android Mac, Window 以及 Linux。

WEPT2.0 版本,支援運作微信小程式 小遊戲基礎庫 2.9 後版本功能,同時支援實作 ios Android 三端統一運作環境。

總之就是很叼的樣子~

有一次偶然在 wept 的 issue 裡看到一個有意思的問題,就是有個同學問,可不可以支援小程式直接從 wxapkg 包啟動運作,這個想法挺有意思的,簡要說一下效果就是:拿到小程式的 wxapkg 源碼包,執行一個指令之後,就可以直接在浏覽器裡看到小程式的界面,聽上去就蠻好玩的吧。

奇思妙想:小程式wxapkg包一鍵運作至浏覽器?

下面我們來說一說如何實作吧。

實作思路

要說如何去實作這個一鍵從包運作到浏覽器的效果其實也是可行的,說白了就是兩個過程:

反向編譯 + 正向編譯

反向就不用多說了,主要是為了得到可以在開發者工具裡正常編譯的代碼。正向呢,對于小程式的編譯産物來說其實也不算是正向,因為目的是要運作到浏覽器,是以這裡的正向指的是把小程式源碼編譯為浏覽器環境可識别的代碼。

最終達到如下的編譯目的:

小程式代碼包->小程式源碼->浏覽器可識别的源碼

因為兩個過程都有工具,是以我們隻要做個調包俠就可以了。。。下面我們就來試一試,簡單寫下就是分别調用兩個工具。

我們可以預先安裝好 wept:

npm i wept -g           

然後就可以通過分包調用反編譯及 wept 指令來實作從 wxapkg 包直接啟動至浏覽器端預覽小程式界面了,是不是很酷。

至于效果呢,大部分内容其實還好,有些編譯錯誤,不過不影響觀賞。

效果示範

下面看看部落客錄制的示範視訊吧。這裡選用了微信官方的示例小程式。有興趣的同學可以嘗試其它小程式看看。

奇思妙想:小程式wxapkg包一鍵運作至浏覽器?

參考資料

繼續閱讀