换个方式用C#开发微信小程序
<style>pre { overflow-y: auto; max-height: 300px }</style><p> 前一阵子帮朋友开发个微信小程序，一开始使用Wechat Devtools开发，实在受不了转用uniapp开发。后来突发奇想能否将C#写的PixUI编译成WebAssembly，由微信小程序加载运行。先上网搜了下小程序使用blazor的文章，都是用WebView包了一下blazor应用，没有参考价值，还是自己动手实现吧。</p>
<h1 id="一运行效果">一、运行效果</h1>
<p> 演示使用C#写的LiveCharts，点击按钮动态生成一些数据。</p>
<h2 id="1-android真机运行">1. Android真机运行</h2>
<p><img src="https://img2024.cnblogs.com/blog/4928/202505/4928-20250515094945117-683198749.gif" alt="" loading="lazy"></p>
<h2 id="2-模拟器运行">2. 模拟器运行</h2>
<p><img src="https://img2024.cnblogs.com/blog/4928/202505/4928-20250515094958828-1634807891.png" alt="" loading="lazy"></p>
<h1 id="二实现原理">二、实现原理</h1>
<p> 原理比较简单，如下图所示，将C#写的PixUI应用及C++写的Skia引擎编译为WebAssembly，然后通过微信小程序的WXWebAssembly加载，并在canvas(WebGL)通过skia绘制出用户界面，监听微信小程序的事件传给C#处理后重新绘制界面。<br>
<img src="https://img2024.cnblogs.com/blog/4928/202505/4928-20250515095030776-268938832.png" alt="" loading="lazy"></p>
<h1 id="三开发步骤">三、开发步骤</h1>
<h3 id="1-创建wasmconsole项目">1. 创建wasmconsole项目</h3>
<p>创建项目前请确认已经通过<code>dotnet workload install</code>安装<code>wasm-experimental</code>及<code>wasm-tools</code></p>
<pre><code class="language-shell">dotnet new wasmconsole
</code></pre>
<h3 id="2-参考pixuidemowasmproj修改工程文件">2. 参考PixUI.Demo.Wasm.proj修改工程文件</h3>
<h3 id="3-使用pixui开发用户界面">3. 使用PixUI开发用户界面</h3>
<h3 id="4-编译并分包">4. 编译并分包</h3>
<p>因微信小程序包大小限制问题，使用<code>PixUI.WxmpPkgs</code>工具自动拆分生成pkgs目录</p>
<h3 id="5-将如图所示的目录及文件复制进pixuidemowxmpminiprogramdotnet目录内">5. 将如图所示的目录及文件复制进<code>PixUI.Demo.Wxmp/miniprogram/dotnet目录内</code></h3>
<p><img src="https://img2024.cnblogs.com/blog/4928/202505/4928-20250515095106693-1321934073.png" alt="" loading="lazy"></p>
<h3 id="6-修改dotnetnativejs">6. 修改dotnet.native.js</h3>
<p>因微信小程序的兼容问题，以及改动了dotnet的引导代码暂需要手动修改emcc编译生成的js。</p>
<ul>
<li>替换所有<code>import.meta.url</code>为<code>globalThis.bootUrl</code>;</li>
<li>搜索<code>receiveInstace</code>，将<code>function receiveInstance(instance,module){wasmExports=instance.exports;</code>替换为<code>function receiveInstance(instance,module){wasmExports=instance.instance.exports;</code></li>
</ul>
<h3 id="7-用wechat-devtools打开pixuidemowxmp工程即可运行">7. 用Wechat Devtools打开<code>PixUI.Demo.Wxmp</code>工程即可运行</h3>
<h1 id="四优势与劣势">四、优势与劣势</h1>
<h2 id="优势">优势</h2>
<ul>
<li>代码复用：前后端可以统一开发语言，；</li>
<li>动态加载：可以远程加载C#写的PixUI组件；</li>
</ul>
<h2 id="劣势">劣势</h2>
<ul>
<li>包太大： 因打包了dotnet的mono运行时及skia引擎，目前不包含中文字体总的包大小差不多8.8MB，小程序首次加载根据网络情况会稍慢。</li>
</ul>
<h1 id="五ios真机问题">五、IOS真机问题</h1>
<p>目前IOS真机上运行还有些问题，先在此记录。</p>
<h3 id="1-webassembly不支持exception-handling">1. WebAssembly不支持Exception Handling</h3>
<p>WXWebAssembly加载时会报<code>invalid wasm file</code>错误, 暂编译不支持的版本绕过此问题。</p>
<h3 id="2-jsc引擎的functionlength始终返回0">2. JSC引擎的Function.length始终返回0</h3>
<p>可以通过修改dotnet.runtime.js来绕过此问题, 搜索<code>argument count mismatch for cwrap</code>，将</p>
<pre><code class="language-js">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))
</code></pre>
<p>替换为</p>
<pre><code class="language-js">if("function"!=typeof o&&(o=Xe.cwrap(e,t,n,r))
</code></pre>
<h3 id="3-jiterpreter造成微信闪退">3. Jiterpreter造成微信闪退</h3>
<p>暂通过修改dotnet.runtime.js来绕过此问题，搜索<code>.tableSize</code>，将</p>
<pre><code class="language-js">function(){if(ds)return;ds=!0;const e=ps(),t=e.tableSize,n=ot.emscriptenBuildOptions.runAOTCompilation?e.tableSize:1,
</code></pre>
<p>替换为</p>
<pre><code class="language-js">function(){return;if(ds)return;ds=!0;const e=ps(),t=e.tableSize,n=ot.emscriptenBuildOptions.runAOTCompilation?e.tableSize:1,
</code></pre>
<h3 id="4-报compiling-function-underran-the-stack错误暂无解请哪位熟悉webassembly的大神指点一下">4. 报<code>compiling function underran the stack</code>错误，暂无解。<strong>请哪位熟悉WebAssembly的大神指点一下</strong>。</h3>
<h1 id="六小结">六、小结</h1>
<p> 本次尝试换种方式用自己熟悉的语言来开发微信小程序，也为AppBox快速开发框架做个用户端拓展实验。感兴趣的小伙伴可以直接clone https://github.com/enjoycode/PixUI.git ,用Wechat Devtools打开PixUI.Demo.Wxmp项目体验。如果感兴趣的小伙伴比较多，我会继续完善(包括将微信小程序的一些api用C#包装一下)。作者个人能力实在有限Bug在所难免，如有问题请邮件联系或Github Issue，欢迎感兴趣的小伙伴们加入共同完善，当然更欢迎赞助项目或给作者介绍工作（目前找工作中）。</p><br><br>
来源：https://www.cnblogs.com/BaiCai/p/18877189
頁:
[1]