换个方式用C#开发微信小程序

换个方式用C#开发微信小程序在传统认知中微信小程序开发几乎被 JavaScript 和 WXML 垄断开发者需要学习一套全新的语法体系。但如果你是一名 C# 开发者是否能用熟悉的语言来开发小程序答案是肯定的。本文将介绍如何通过Blazor Hybrid结合微信小程序云开发用 C# 替代 JavaScript 构建小程序逻辑层实现“换个方式”的开发体验。## 为什么需要换个方式-技术栈统一如果团队后端是 .NET Core前端用 C# 开发小程序可以减少语言切换成本。-代码复用业务逻辑层如数据处理、接口调用可共享给 Web 端Blazor和移动端MAUI。-强类型优势C# 的编译时检查能避免 JavaScript 的动态类型错误尤其适合复杂业务场景。## 核心思路Blazor Hybrid 微信小程序云开发Blazor Hybrid 允许在原生应用中嵌入 Web UI而微信小程序本质上也是一个 WebView 容器。我们可以将 Blazor 编译后的 WebAssembly 文件部署到小程序云托管中让小程序加载 Blazor 渲染的页面。同时通过 JSBridge 调用微信原生 API如登录、支付。### 技术架构图微信小程序壳 → 加载 Blazor WebAssembly → 调用 C# 逻辑 ↓ 云开发 SDKJS → 通过 JSBridge 返回给 C### 准备工作1. 安装 .NET 8 SDK 和 Blazor WebAssembly 模板。2. 注册微信小程序并开通云开发功能。3. 创建一个小程序空白项目仅作为壳。## 第一步创建 Blazor 项目bashdotnet new blazorwasm -n WeChatMiniAppBlazorcd WeChatMiniAppBlazor修改wwwroot/index.html添加微信 JS-SDK 引用用于调用原生能力htmlscript srchttps://res.wx.qq.com/open/js/jweixin-1.6.0.js/script## 第二步用 C# 编写业务逻辑在Pages/Index.razor中我们用 C# 处理用户登录和云数据库查询csharppage /using Microsoft.JSInteropinject IJSRuntime JSRuntimeh3换个方式开发的微信小程序/h3button onclickLogin微信登录/buttonif (!string.IsNullOrEmpty(userInfo)){ div用户信息userInfo/div}code { private string? userInfo; private async Task Login() { // 1. 通过 JSBridge 调用微信原生 wx.login 获取 code var code await JSRuntime.InvokeAsyncstring(wxLogin); // 2. 调用云函数获取 openid实际应通过后端 API var openid await JSRuntime.InvokeAsyncstring(callCloudFunction, getOpenId, code); // 3. 模拟数据绑定实际应调用云数据库 userInfo $用户 {openid} 登录成功; StateHasChanged(); }}注意wxLogin和callCloudFunction需要在 JavaScript 中实现见下一步。## 第三步编写 JSBridge 适配层在wwwroot/js/app.js中编写 JavaScript 桥接函数让 C# 能调用微信原生 APIjavascript// 微信登录桥接window.wxLogin function () { return new Promise((resolve, reject) { wx.login({ success: res resolve(res.code), fail: err reject(err.errMsg) }); });};// 调用云函数桥接window.callCloudFunction function (name, data) { return new Promise((resolve, reject) { wx.cloud.callFunction({ name: name, data: { code: data }, success: res resolve(res.result.openid), fail: err reject(err.errMsg) }); });};## 第四步发布并部署到小程序云托管1. 编译 Blazor 项目bash dotnet publish -c Release -o publish2. 将publish/wwwroot文件夹内容上传到微信云开发平台的静态网站托管。3. 在小程序项目中创建一个 WebView 页面加载云托管地址xml !-- pages/webview/webview.wxml -- web-view srchttps://你的云托管域名/index.html/web-view4. 配置小程序白名单在云开发控制台设置 WebView 域名。## 第五步处理小程序原生能力以分享为例在 Blazor 中通过InvokeAsync调用微信分享 APIcsharpcode { private async Task ShareToMoments() { // 调用 JS 中的 wxShare 函数 await JSRuntime.InvokeVoidAsync(wxShare, new { title 用C#开发的小程序, path /pages/webview/webview, imageUrl https://example.com/share.jpg }); }}对应 JavaScriptjavascriptwindow.wxShare function (options) { wx.updateAppMessageShareData({ title: options.title, path: options.path, imageUrl: options.imageUrl, success: () console.log(分享成功) });};## 注意事项1.性能考虑Blazor WebAssembly 首次加载需要下载 .NET 运行时约 2MB建议启用压缩和预加载。2.API 限制部分微信 API如蓝牙、NFC无法通过 WebView 调用需通过小程序原生页面中转。3.调试方式使用微信开发者工具时需在 WebView 中开启调试模式https://debugx5.qq.com。## 完整示例云数据库查询下面演示如何用 C# 查询微信云数据库中的商品列表csharppage /productsinject IJSRuntime JSRuntimeh3商品列表/h3if (products null){ p加载中.../p}else{ ul foreach (var item in products) { liitem.Name - ¥item.Price/li } /ul}button onclickLoadProducts刷新数据/buttoncode { private ListProduct? products; private async Task LoadProducts() { // 调用云函数查询数据库对应云函数代码见后 var result await JSRuntime.InvokeAsyncstring(queryDatabase, products); products System.Text.Json.JsonSerializer.DeserializeListProduct(result); } public class Product { public string Name { get; set; } public decimal Price { get; set; } }}云函数queryDatabaseNode.js部署在云开发中javascript// 云函数入口文件const cloud require(wx-server-sdk)cloud.init()const db cloud.database()exports.main async (event, context) { const collection event.collection try { const res await db.collection(collection).get() return res.data } catch (err) { return err }}## 总结通过 Blazor Hybrid 微信小程序云托管的方式C# 开发者可以1.零学习成本用熟悉的 C# 语法和 Razor 组件构建小程序界面与逻辑。2.共享代码库将业务逻辑封装成 .NET 库同时用于 Web 端和小程序端。3.强类型安全编译时发现类型错误减少运行时崩溃。当然这种方式并非万能——你需要额外维护 JSBridge 层且无法使用所有微信原生 API。但对于中后台管理、数据展示类小程序它提供了一种高效且优雅的开发路径。现在打开你的 .NET 环境尝试用 C# 书写你的第一个微信小程序吧