WebAssembly學習(二):Windows10下WebAssembly C/C++編譯環境的搭建與Hello World嘗試


首先,不論是在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,到此結束。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM