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

来源:https://www.cnblogs.com/jixiaohua/archive/2019/02/23/10424941.html
-Advertisement-
Play Games

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 對於經常逛商場的MM來說,哪裡有什麼商店,停車在哪裡,電梯、廁所在哪裡,找這些都是一些費力的事情,如果有一個商場地圖可以整體全局預覽,那是很方便的。目前就根據商場停車項目需求,先如何找到一個商場停車場車位的事情說起。商場停車場車位管理系統其實上是一個很大的系統,首先需要從車位是否被占用的事情說起,方... ...
  • 好久沒寫東西,博客又長草了,這段時間身心放鬆了好久,都沒什麼主題可以寫了 上周接到一個需求,優化vue的一個長列表頁面,忙活了很久也到尾聲了,記憶體使用和卡頓都做了一點點優化,還算有點收穫 寫的有點啰嗦,可以看一下我是怎麼進行這個優化的,也許有點幫助呢 這個長列表頁面,其實是一個實時日誌上報的頁面,隨 ...
  • VSCode中有一些快捷編輯HTML的方法,能大大提高工作效率,在這記錄一些。 1.輸入html:5,然後按tab鍵或enter鍵,效果如下: 2.輸入link:css引入css樣式文件,輸入script:src引入js 3.輸入標簽名自動補齊 4.隨機文本的輸入 5.使用"#"輸入id,"."輸入 ...
  • 冒泡排序的思想:我們以升序排列為例,所謂冒泡排序就是在無序數組中每執行一趟選出這一趟中最大的數放在最後面,第二趟選出次大的數放在倒數第二位上,直到完成排序。以此類推降序就是將小的數放在後面排序。代碼如下: 方法(一) 運行圖: 方法(二) 主要還是對方法一的優化,設置一個標誌,如果這一趟下來發生了交 ...
  • usuallyjs 是一個面向現代 Web 開發的 JavaScript 實用函數庫。 usuallyjs 基於 ES6 開發,拋棄了傳統 Web 開發中 DOM 和 BOM 操作部分的內容,精選了一系列 Web 開發過程中最常用的、最實用的 JavaScript 函數。與 Vue、React、A... ...
  • 在ES6中有了繼承,使用extends關鍵字就能實現。但這裡講的講的不是這種,而是ES6之前的幾種實現繼承的方式。 (一)原型繼承 ECMAScript中將原型鏈作為實現繼承的主要方法。其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。 例如: (二)借用構造函數 在解決原型中包含引 ...
  • 如今,Fetch API已經成為現在瀏覽器非同步網路請求的標準方法,但Fetch也是有弊端的,比如: Fetch還沒有方法終止一個請求,而且Fetch無法檢測上傳進度 現在我們可以通過 AbortController 和 AbortSignal 來終止,代碼如下: const controller = ...
  • JavaScript 原生提供兩個 Base64 相關的方法: btoa():任意值轉為 Base64 編碼 atob():Base64 編碼轉為原來的值 encodeURIComponent() 該方法會轉碼除了語義字元之外的所有字元,即元字元也會被轉碼。 decodeURIComponent() ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...