首先,不論是在Windows、Linux還是Mac上,Webassembly的編譯都是主要依賴於Emscripten SDK這個工具的。但是,在這裡必須要吐槽一下,不論是WebAssembly官網、WebAssembly中文網還是Emscriptem官網安裝文檔上給出的安裝方式基本都是這樣的(中文網 ...
首先,不論是在Windows、Linux還是Mac上,Webassembly的編譯都是主要依賴於Emscripten SDK這個工具的。但是,在這裡必須要吐槽一下,不論是WebAssembly官網、WebAssembly中文網還是Emscriptem官網安裝文檔上給出的安裝方式基本都是這樣的(中文網主要是Windows上的安裝,更簡單一些):
1、準備好git,cmake(這個好像可以沒有)、python2.7這三樣
2、使用git從GitHub上clone下來一個48k的emsdk工程到本地、或者直接去下載壓縮包也行,地址在官網(三家居然不一樣,不過是同一個東西)
3、下載下來之後,在這個emsdk工程裡面遠程安裝真正的Emscripten工具鏈(install,active、env三步,看官網)
以上三步就完成了開發環境的搭建,看起來So easy,然而最好不要這麼做,說多了都是淚。一二兩步還沒什麼問題,但是第三步遠程下載由於是從國外的網址(亞馬遜)上下載資源,本來訪問這種國外網站速度就慢,並且這個上百M的資源好像被放在某個犄角旮旯里,下載速度更是比蝸牛還慢,鏡像資源又無處去找,穩定的dns也沒有,然後在cmd黑視窗上下著下著,失敗了。。。又失敗了。。。又又失敗了。或者完成了兩步,又提示缺了個llvm,clang,python不識別等等依賴問題,簡直無fu可說,官網說的Win10的Ubuntu子系統上安裝更勝一籌。
所以,這種線上安裝步驟並不適合廣大的中國開發者。只好另尋它路,即下載離線安裝包到本地再安裝,雖然Emscripten官網上說不再推薦,然而也沒辦法,下載最新版emsdk-1.35.0-full-64bit.exe安裝包,一路next就好了,這個雖然下載起來也慢,但還是可以成功的,並且它是一個完整的full包,包含了clang、java、node、python等一堆東西,不會有依賴問題。這裡貼個我的網盤地址,提取碼:frte ,裡面有git2.2,python2.7、cmake3.11、emsdk1.35,有需要的可以直接下載(如果還能用的話)。
安裝好了之後運行emsdk_env.bat會自動配置相關的環境變數,註意這步操作可能會被殺毒軟體攔截,記得放行,或者手動配置也行,反正結果是這樣:
然後檢驗一下有沒有成功
安裝好了環境,就可以愉快的寫個Hello World嘗試一下了。
C代碼:
1 #include<stdio.h>
2
3 int main(int argc, char ** argv){
4 printf("Hello, world!");
5 }
為了保險起見,安裝個開發C/C++環境的VS2017,然後直接用VsCode/VS2017等編輯器寫好保存為.c文件就可以了,按官網的echo寫法又報c頭文件找不到錯誤( ̄_ ̄|||)
然後按官網編譯命令,開始編譯:
emcc hello.c -s WASM=1 -o hello.html
時間可能有點長,並且又報了幾個警告,好在有驚無險的完成了,結果是這樣的:
一個hello world居然有480k,包含了那些沒用的東西,還需要研究一下。
然後按官網的啟動服務命令,起個http服務,就可以自己訪問一下了:
emrun --no_browser --port 8080 C:\Users\JiXiaoHua\Desktop\hellowasm\hello.html
註意後面要加參數為具體的hello.html文件路徑,不然用 http://localhost:8080/hello.html 訪問會404,資源找不到,預設會從桌面路徑去找。
啟動服務時報了個No module named win32api錯誤,解決方法:在Python中使用Win32api報錯的問題,No module named win32api。
服務啟動成功頁面:
然後 http://localhost:8080/hello.html 訪問結果是這樣的:
瀏覽器控制台輸出
看起來好像把原本的hello.exe嵌入到了網頁中,很神奇有木有,這便是WebAssembly說的在Web端運行C/C++程式了。
當然,這是運行編譯為WebAssembly的程式的一種方法。另一個選擇通過js來調用,參考文章使用JavaScript調用WebAssembly函數部分。
然後後臺有條警告:
The html page you are running is not emrun-capable. Stdout, stderr and exit(returncode) capture will not work. Recompile the application with the --emrun linker flag to enable this, or pass --no_emrun_detect to emrun to hide this check.
您運行的html頁面不支持emrun。 stdout,stderr和exit(returncode)捕獲將無法正常工作。 使用--emrun鏈接器標誌重新編譯應用程式以啟用此功能,或者將--no_emrun_detect傳遞給emrun以隱藏此檢查。
好像並不影響,OK,到此結束。