??前一陣子幫朋友開(kāi)發(fā)個(gè)微信小程序，一開(kāi)始使用Wechat Devtools開(kāi)發(fā)，實(shí)在受不了轉(zhuǎn)用uniapp開(kāi)發(fā)。后來(lái)突發(fā)奇想能否將C#寫(xiě)的PixUI編譯成WebAssembly，由微信小程序加載運(yùn)行。先上網(wǎng)搜了下小程序使用blazor的文章，都是用WebView包了一下blazor應(yīng)用，沒(méi)有參考價(jià)值，還是自己動(dòng)手實(shí)現(xiàn)吧。

一、運(yùn)行效果

??演示使用C#寫(xiě)的LiveCharts，點(diǎn)擊按鈕動(dòng)態(tài)生成一些數(shù)據(jù)。

1. Android真機(jī)運(yùn)行

2. 模擬器運(yùn)行

二、實(shí)現(xiàn)原理

??原理比較簡(jiǎn)單，如下圖所示，將C#寫(xiě)的PixUI應(yīng)用及C++寫(xiě)的Skia引擎編譯為WebAssembly，然后通過(guò)微信小程序的WXWebAssembly加載，并在canvas(WebGL)通過(guò)skia繪制出用戶界面，監(jiān)聽(tīng)微信小程序的事件傳給C#處理后重新繪制界面。

三、開(kāi)發(fā)步驟

1. 創(chuàng)建wasmconsole項(xiàng)目

創(chuàng)建項(xiàng)目前請(qǐng)確認(rèn)已經(jīng)通過(guò)dotnet workload install安裝wasm-experimental及wasm-tools

dotnet new wasmconsole

2. 參考PixUI.Demo.Wasm.proj修改工程文件

3. 使用PixUI開(kāi)發(fā)用戶界面

4. 編譯并分包

因微信小程序包大小限制問(wèn)題，使用PixUI.WxmpPkgs工具自動(dòng)拆分生成pkgs目錄

5. 將如圖所示的目錄及文件復(fù)制進(jìn)PixUI.Demo.Wxmp/miniprogram/dotnet目錄內(nèi)

6. 修改dotnet.native.js

因微信小程序的兼容問(wèn)題，以及改動(dòng)了dotnet的引導(dǎo)代碼暫需要手動(dòng)修改emcc編譯生成的js。

• 替換所有import.meta.url為globalThis.bootUrl;
• 搜索receiveInstace，將function receiveInstance(instance,module){wasmExports=instance.exports;替換為function receiveInstance(instance,module){wasmExports=instance.instance.exports;

7. 用Wechat Devtools打開(kāi)PixUI.Demo.Wxmp工程即可運(yùn)行

四、優(yōu)勢(shì)與劣勢(shì)

優(yōu)勢(shì)

• 代碼復(fù)用：前后端可以統(tǒng)一開(kāi)發(fā)語(yǔ)言，；
• 動(dòng)態(tài)加載：可以遠(yuǎn)程加載C#寫(xiě)的PixUI組件；

劣勢(shì)

• 包太大： 因打包了dotnet的mono運(yùn)行時(shí)及skia引擎，目前不包含中文字體總的包大小差不多8.8MB，小程序首次加載根據(jù)網(wǎng)絡(luò)情況會(huì)稍慢。

五、IOS真機(jī)問(wèn)題

目前IOS真機(jī)上運(yùn)行還有些問(wèn)題，先在此記錄。

1. WebAssembly不支持Exception Handling

WXWebAssembly加載時(shí)會(huì)報(bào)invalid wasm file錯(cuò)誤, 暫編譯不支持的版本繞過(guò)此問(wèn)題。

2. JSC引擎的Function.length始終返回0

可以通過(guò)修改dotnet.runtime.js來(lái)繞過(guò)此問(wèn)題, 搜索argument count mismatch for cwrap，將

if(o&&n&&o.length!==n.length&&(Pe(`argument count mismatch for cwrap ${e}`),o=void 0),"function"!=typeof o&&(o=Xe.cwrap(e,t,n,r))

替換為

if("function"!=typeof o&&(o=Xe.cwrap(e,t,n,r))

3. Jiterpreter造成微信閃退

暫通過(guò)修改dotnet.runtime.js來(lái)繞過(guò)此問(wèn)題，搜索.tableSize，將

function(){if(ds)return;ds=!0;const e=ps(),t=e.tableSize,n=ot.emscriptenBuildOptions.runAOTCompilation?e.tableSize:1,

替換為

function(){return;if(ds)return;ds=!0;const e=ps(),t=e.tableSize,n=ot.emscriptenBuildOptions.runAOTCompilation?e.tableSize:1,

4. 報(bào)compiling function underran the stack錯(cuò)誤，暫無(wú)解。請(qǐng)哪位熟悉WebAssembly的大神指點(diǎn)一下。

六、小結(jié)

??本次嘗試換種方式用自己熟悉的語(yǔ)言來(lái)開(kāi)發(fā)微信小程序，也為AppBox快速開(kāi)發(fā)框架做個(gè)用戶端拓展實(shí)驗(yàn)。感興趣的小伙伴可以直接clone https://github.com/enjoycode/PixUI.git ,用Wechat Devtools打開(kāi)PixUI.Demo.Wxmp項(xiàng)目體驗(yàn)。

?轉(zhuǎn)自https://www.cnblogs.com/BaiCai/p/18877189