換個(gè)方式使用C#開發(fā)微信小程序的過程
前一陣子幫朋友開發(fā)個(gè)微信小程序，一開始使用Wechat Devtools開發(fā)，實(shí)在受不了轉(zhuǎn)用uniapp開發(fā)。后來突發(fā)奇想能否將C#寫的PixUI編譯成WebAssembly，由微信小程序加載運(yùn)行。先上網(wǎng)搜了下小程序使用blazor的文章，都是用WebView包了一下blazor應(yīng)用，沒有參考價(jià)值，還是自己動(dòng)手實(shí)現(xiàn)吧。
一、運(yùn)行效果
演示使用C#寫的LiveCharts，點(diǎn)擊按鈕動(dòng)態(tài)生成一些數(shù)據(jù)。
1. Android真機(jī)運(yùn)行
2. 模擬器運(yùn)行
二、實(shí)現(xiàn)原理
原理比較簡(jiǎn)單，如下圖所示，將C#寫的PixUI應(yīng)用及C++寫的Skia引擎編譯為WebAssembly，然后通過微信小程序的WXWebAssembly加載，并在canvas(WebGL)通過skia繪制出用戶界面，監(jiān)聽微信小程序的事件傳給C#處理后重新繪制界面。
三、開發(fā)步驟
1. 創(chuàng)建wasmconsole項(xiàng)目
創(chuàng)建項(xiàng)目前請(qǐng)確認(rèn)已經(jīng)通過dotnet workload install安裝wasm-experimental及wasm-tools
dotnet new wasmconsole
2. 參考PixUI.Demo.Wasm.proj修改工程文件
3. 使用PixUI開發(fā)用戶界面
4. 編譯并分包
因微信小程序包大小限制問題，使用PixUI.WxmpPkgs工具自動(dòng)拆分生成pkgs目錄
5. 將如圖所示的目錄及文件復(fù)制進(jìn)PixUI.Demo.Wxmp/miniprogram/dotnet目錄內(nèi)
6. 修改dotnet.native.js
因微信小程序的兼容問題，以及改動(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打開PixUI.Demo.Wxmp工程即可運(yùn)行
四、優(yōu)勢(shì)與劣勢(shì)
優(yōu)勢(shì)
- 代碼復(fù)用：前后端可以統(tǒng)一開發(fā)語言，；
- 動(dòng)態(tài)加載：可以遠(yuǎn)程加載C#寫的PixUI組件；
劣勢(shì)
- 包太大： 因打包了dotnet的mono運(yùn)行時(shí)及skia引擎，目前不包含中文字體總的包大小差不多8.8MB，小程序首次加載根據(jù)網(wǎng)絡(luò)情況會(huì)稍慢。
五、IOS真機(jī)問題
目前IOS真機(jī)上運(yùn)行還有些問題，先在此記錄。
1. WebAssembly不支持Exception Handling
WXWebAssembly加載時(shí)會(huì)報(bào)invalid wasm file錯(cuò)誤, 暫編譯不支持的版本繞過此問題。
2. JSC引擎的Function.length始終返回0
可以通過修改dotnet.runtime.js來繞過此問題, 搜索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造成微信閃退
暫通過修改dotnet.runtime.js來繞過此問題，搜索.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ò)誤，暫無解。請(qǐng)哪位熟悉WebAssembly的大神指點(diǎn)一下。
六、小結(jié)
本次嘗試換種方式用自己熟悉的語言來開發(fā)微信小程序，也為AppBox快速開發(fā)框架做個(gè)用戶端拓展實(shí)驗(yàn)。感興趣的小伙伴可以直接clone https://github.com/enjoycode/PixUI.git ,用Wechat Devtools打開PixUI.Demo.Wxmp項(xiàng)目體驗(yàn)。如果感興趣的小伙伴比較多，我會(huì)繼續(xù)完善(包括將微信小程序的一些api用C#包裝一下)。作者個(gè)人能力實(shí)在有限Bug在所難免，如有問題請(qǐng)郵件聯(lián)系或Github Issue，歡迎感興趣的小伙伴們加入共同完善，當(dāng)然更歡迎贊助項(xiàng)目或給作者介紹工作（目前找工作中）。
到此這篇關(guān)于換個(gè)方式用C#開發(fā)微信小程序的文章就介紹到這了,更多相關(guān)C#開發(fā)微信小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了c#中的yield?return用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
WPF實(shí)現(xiàn)繪制扇形統(tǒng)計(jì)圖的示例代碼
這篇文章主要介紹了如何利用WPF繪制扇形統(tǒng)計(jì)圖，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以了解一下2022-09-09
C#使用位域技術(shù)進(jìn)行對(duì)象二進(jìn)制序列化優(yōu)
在操作系統(tǒng)中,進(jìn)程信息對(duì)于系統(tǒng)監(jiān)控和性能分析至關(guān)重要,這個(gè)過程中,如何將捕獲到的進(jìn)程對(duì)象轉(zhuǎn)換為二進(jìn)制數(shù)據(jù),并進(jìn)行優(yōu)化,以減小數(shù)據(jù)包的大小,成為了一個(gè)關(guān)鍵問題,下面我們就來看看如何使用位域技術(shù)對(duì)C#對(duì)象進(jìn)行二進(jìn)制序列化優(yōu)化吧2024-01-01
本篇文章介紹一下GroupBy的使用方法，包括實(shí)驗(yàn)基礎(chǔ)數(shù)據(jù)用例，通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友跟隨小編一起看看吧2021-11-11
本文詳細(xì)講解了C#中的泛型，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了C#二叉搜索樹插入算法,實(shí)例分析了C#二叉樹操作的相關(guān)技巧,需要的朋友可以參考下2015-04-04
在現(xiàn)代應(yīng)用程序中,數(shù)據(jù)加密是保護(hù)敏感信息安全的重要手段,AES（高級(jí)加密標(biāo)準(zhǔn)）是一種廣泛使用的對(duì)稱加密算法,提供強(qiáng)大的數(shù)據(jù)保護(hù)功能,今天,我將為大家展示如何使用 C# 實(shí)現(xiàn) AES 加密和解密,需要的朋友可以參考下2024-12-12
checkbox是VS2012的常用控件之一，可以方便的為某些功能取消或啟用，下面教你如何簡(jiǎn)單使用checkbox。本文通過兩種方法給大家介紹，需要的朋友一起看看吧2015-09-09
C#代碼實(shí)現(xiàn)將Excel(XLS/XLSX)文件轉(zhuǎn)為Markdown格式
將?Excel?文件轉(zhuǎn)換為?Markdown,可以方便地將結(jié)構(gòu)化數(shù)據(jù)嵌入技術(shù)文檔,本文將介紹如何使用?C#?結(jié)合Spire.XLS?for?.NET庫(kù),編程實(shí)現(xiàn)?Excel?文件到?Markdown?格式的轉(zhuǎn)換,有需要的可以了解下2026-03-03
這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)圖片切割、切圖、裁剪，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01