软件: Keil esp固件烧写软件 华为云服务器(个人免费使用,每天消息上限) 二、调试过程 调试总体思路: 烧写官方的MQTT固 ...
涟谡负蛋一、运行效果
??演示使用C#写的LiveCharts,点击按钮动态生成一些数据。
1. Android真机运行
2. 模拟器运行
二、实现原理
??原理比较简单,如下图所示,将C#写的PixUI应用及C++写的Skia引擎编译为WebAssembly,然后通过微信小程序的WXWebAssembly加载,并在canvas(WebGL)通过skia绘制出用户界面,监听微信小程序的事件传给C#处理后重新绘制界面。
三、开发步骤
1. 创建wasmconsole项目
创建项目前请确认已经通过dotnet workload install安装wasm-experimental及wasm-tools
dotnet new wasmconsole
2. 参考PixUI.Demo.Wasm.proj修改工程文件
3. 使用PixUI开发用户界面
4. 编译并分包
因微信小程序包大小限制问题,使用PixUI.WxmpPkgs工具自动拆分生成pkgs目录
5. 将如图所示的目录及文件复制进PixUI.Demo.Wxmp/miniprogram/dotnet目录内
6. 修改dotnet.native.js
因微信小程序的兼容问题,以及改动了dotnet的引导代码暂需要手动修改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工程即可运行
四、优势与劣势
优势
代码复用:前后端可以统一开发语言,;
动态加载:可以远程加载C#写的PixUI组件;
劣势
包太大: 因打包了dotnet的mono运行时及skia引擎,目前不包含中文字体总的包大小差不多8.8MB,小程序首次加载根据网络情况会稍慢。
五、IOS真机问题
目前IOS真机上运行还有些问题,先在此记录。
1. WebAssembly不支持Exception Handling
WXWebAssembly加载时会报invalid wasm file错误, 暂编译不支持的版本绕过此问题。
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. 报compiling function underran the stack错误,暂无解。请哪位熟悉WebAssembly的大神指点一下。
