当前位置：首页 > news >正文

使用C#写微信小程序后端——电商微信小程序

news 2025/10/15 9:54:35

前端：使用vue3语言，用Hbuilder联动微信小程序的前端代码编写

后端：使用C#语言，在Visual Studio2022中

数据库：采用MySql数据库

一、配置好mysql数据库和navicat数据库可视化软件

1、在navicat premium中创建一个新的数据库，并设计数据表，插入测试数据

右键MiniProgramDB->找到“命令行界面”，一行行输入代码，并回车

CREATE DATABASE MiniProgramDB;
USE MiniProgramDB;CREATE TABLE Users (Id INT PRIMARY KEY AUTO_INCREMENT,Username VARCHAR(50) NOT NULL UNIQUE,Password VARCHAR(100) NOT NULL,Nickname VARCHAR(50),CreateTime DATETIME DEFAULT CURRENT_TIMESTAMP
);-- 插入测试数据
INSERT INTO Users (Username, Password, Nickname) 
VALUES ('testuser', '123456', '测试用户');

效果如下图所示，然后再右键右键MiniProgramDB->刷新，即可发现多了一个miniprogramdb（mysql语句不区分大小写），找到user表，并打开，即可找到刚刚插入的测试数据

二、在Visual Studio2022中创建后端项目

1、找到ASP.NET Core Web API项目，并进行创建

注意区别：

（1）是否使用顶级语句？

顶级语句（Top-level statements）是 C# 9.0+ 引入的语法特性，允许你在代码文件中直接写可执行语句，无需包裹在 class 或 namespace 中。

勾选 “不使用顶级语句”：项目会采用传统代码组织方式，将程序入口（Main 方法）放在 Program 类内部。例如 Program.cs 会是这样的结构：

namespace MyWebApi
{public class Program{public static void Main(string[] args){var builder = WebApplication.CreateBuilder(args);// 配置服务、中间件、端点等var app = builder.Build();app.Run();}}
}

不勾选（使用顶级语句）：项目会采用简洁的 “顶级语句” 风格，Program.cs 无需显式定义 class 和 Main 方法，直接写代码：
```
var builder = WebApplication.CreateBuilder(args);
// 配置服务、中间件、端点等
var app = builder.Build();
app.Run();
```
两种方式功能等价，仅代码组织形式不同。顶级语句让小型项目的代码更简洁，而传统方式更符合 “类和方法包裹代码” 的经典认知。

（2）是否使用控制器？

这是选择 ASP.NET Core Web API 的编程模型：

勾选 “使用控制器”：项目采用 **“基于控制器的 MVC 风格”** 开发 API。会自动生成 Controllers 文件夹，并创建示例控制器（如 WeatherForecastController）。

控制器是继承 ControllerBase 的类，通过 [Route]、[HttpGet] 等特性定义 API 端点，适合复杂业务逻辑、分层架构的项目（依赖注入、模型验证、过滤器等功能更易组织）。

示例控制器结构：
```
[ApiController]
[Route("api/[controller]")]
public class UserController : ControllerBase
{[HttpGet("{id}")]public IActionResult GetUser(int id){// 业务逻辑return Ok(new User { Id = id, Name = "Test" });}
}
```

不勾选（使用 “最小 API”）：项目采用 **“最小 API（Minimal APIs）”风格开发。无需控制器类，直接在 Program.cs 中通过 app.MapGet、app.MapPost 等方法定义 API 端点，适合轻量、简单的 API 服务 **（代码更紧凑，启动速度可能更快）。

示例最小 API 定义：

var app = WebApplication.CreateBuilder(args).Build();
app.MapGet("/api/users/{id}", (int id) => new User { Id = id, Name = "Test" });
app.Run();

创建成功后如下图所示：

2. 配置 MySQL 连接

在解决方案资源管理器中右键点击项目，选择「管理 NuGet 包」
搜索并安装以下包：
- MySqlConnector
- Microsoft.EntityFrameworkCore
- Pomelo.EntityFrameworkCore.MySql
在 appsettings.json 中添加数据库连接字符串：

"ConnectionStrings": {"MySqlConnection": "Server=localhost;Database=MiniProgramDB;User=root;Password=你的密码;Port=3306;SslMode=None;"
}

3. 创建数据模型和数据库上下文

在项目中创建 Models和Data 文件夹

在 Models 文件夹中创建 User 类：

namespace Shop_Wx.Modelspublic class User
{public int Id { get; set; }public string Username { get; set; } = string.Empty;public string Password { get; set; } = string.Empty;public string? Nickname { get; set; }public DateTime CreateTime { get; set; } = DateTime.Now;
}

在 Data文件夹下，创建数据库上下文类 AppDbContext.js，用于管理数据库连接和实体映射：

using Microsoft.EntityFrameworkCore;
using Shop_Wx.Models;namespace Shop_Wx.Data
{public class AppDbContext:DbContext{public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }public DbSet<User> Users => Set<User>();}
}

在 Program.cs 中配置数据库上下文：

builder.Services.AddDbContext<AppDbContext>(options =>options.UseMySql(builder.Configuration.GetConnectionString("MySqlConnection"),new MySqlServerVersion(new Version(8, 0, 23))));

4. 实现 API 接口

在 Program.cs 中添加以下 API 端点：

// 获取所有用户
app.MapGet("/api/users", async (AppDbContext db) =>
{return await db.Users.ToListAsync();
});// 根据ID获取用户
app.MapGet("/api/users/{id}", async (int id, AppDbContext db) =>
{return await db.Users.FindAsync(id)is User user? Results.Ok(user): Results.NotFound();
});// 添加用户
app.MapPost("/api/users", async (User user, AppDbContext db) =>
{db.Users.Add(user);await db.SaveChangesAsync();return Results.Created($"/api/users/{user.Id}", user);
});// 用户登录
app.MapPost("/api/login", async (User loginUser, AppDbContext db) =>
{var user = await db.Users.FirstOrDefaultAsync(u => u.Username == loginUser.Username && u.Password == loginUser.Password);if (user != null){return Results.Ok(new { Success = true, Message = "登录成功", User = user });}else{return Results.Ok(new { Success = false, Message = "用户名或密码错误" });}
});

5. 测试后端 API

点击运行

2.系统会自动打开 Swagger 文档页面（默认地址：https://localhost: 端口号 /swagger）

3.在 Swagger 页面测试各个 API 接口是否正常工作

三、微信小程序前端开发（使用 HBuilder X）

在微信开发者工具中

1. 创建小程序项目

打开 HBuilder X
点击菜单栏「文件」->「新建」->「项目」
选择「微信小程序」->「默认模板」
输入项目名称（如 MiniProgram_WX），点击创建

2. 配置项目

在项目根目录找到 manifest.json 文件，点击「微信小程序配置」
填写微信小程序 AppID（测试阶段可使用测试号）
配置基础路径等信息

【注意】如何获取微信小程序AppID：

1、前往微信公众平台首页，进行小程序的注册，一个邮箱只能注册一个账号。填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱

3. 创建网络请求工具

在项目中创建 utils 文件夹

在 utils 文件夹中创建 request.js 文件：

// 配置请求基地址
const baseUrl = 'http://localhost:端口号/api'; // 替换为你的后端API地址// 封装请求方法
export const request = (options) => {return new Promise((resolve, reject) => {wx.request({url: baseUrl + options.url,method: options.method || 'GET',data: options.data || {},header: {'Content-Type': 'application/json'},success: (res) => {resolve(res.data);},fail: (err) => {reject(err);}})})
}// 封装GET请求
export const get = (url, data) => {return request({ url, method: 'GET', data });
}// 封装POST请求
export const post = (url, data) => {return request({ url, method: 'POST', data });
}

4. 实现登录页面

在 pages 文件夹中创建 login 文件夹
在 login 文件夹中创建以下文件：

<view class="container"><view class="title">用户登录</view><view class="input-group"><input type="text" placeholder="请输入用户名" bindinput="onUsernameChange" /></view><view class="input-group"><input type="password" placeholder="请输入密码" bindinput="onPasswordChange" /></view><button class="login-btn" bindtap="login">登录</button>
</view>

.container {display: flex;flex-direction: column;padding: 40rpx;
}.title {font-size: 36rpx;text-align: center;margin: 60rpx 0;
}.input-group {margin-bottom: 30rpx;
}.input-group input {border: 1px solid #eee;padding: 20rpx;border-radius: 8rpx;
}.login-btn {background-color: #07c160;color: white;margin-top: 40rpx;
}

import { post } from '../../utils/request';Page({data: {username: '',password: ''},onUsernameChange(e) {this.setData({username: e.detail.value});},onPasswordChange(e) {this.setData({password: e.detail.value});},async login() {const { username, password } = this.data;if (!username || !password) {wx.showToast({title: '请输入用户名和密码',icon: 'none'});return;}try {const result = await post('/login', {username,password});if (result.Success) {wx.showToast({title: '登录成功',icon: 'success'});// 保存用户信息到本地存储wx.setStorageSync('userInfo', result.User);// 跳转到首页setTimeout(() => {wx.navigateTo({url: '/pages/index/index'});}, 1500);} else {wx.showToast({title: result.Message,icon: 'none'});}} catch (error) {wx.showToast({title: '网络错误',icon: 'none'});console.error(error);}}
});

{"navigationBarTitleText": "登录"
}

5. 实现首页

修改 pages/index/index.wxml:

<view class="container"><view class="welcome">欢迎回来，{{userInfo.Nickname}}</view><button bindtap="getUsers">获取用户列表</button><view class="user-list"><view class="user-item" wx:for="{{users}}" wx:key="Id"><view>用户名：{{item.Username}}</view><view>昵称：{{item.Nickname}}</view></view></view>
</view>

修改 pages/index/index.js:

import { get } from '../../utils/request';Page({data: {userInfo: {},users: []},onLoad() {// 获取本地存储的用户信息const userInfo = wx.getStorageSync('userInfo');if (userInfo) {this.setData({userInfo});} else {// 如果没有登录信息，跳转到登录页wx.navigateTo({url: '/pages/login/login'});}},async getUsers() {try {const users = await get('/users');this.setData({users});} catch (error) {wx.showToast({title: '获取用户失败',icon: 'none'});console.error(error);}}
});

6. 配置小程序入口

修改 app.json，将登录页设置为入口页面：

{"pages": ["pages/login/login","pages/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "小程序示例","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

7. 解决跨域问题

在 C# 后端项目的 Program.cs 中添加跨域配置：

// 配置跨域
builder.Services.AddCors(options =>
{options.AddPolicy("AllowMiniProgram", policy =>{policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();});
});// 启用跨域中间件
app.UseCors("AllowMiniProgram");