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

前端：使用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 连接

1. 在解决方案资源管理器中右键点击项目，选择「管理 NuGet 包」

2. 搜索并安装以下包：

   • MySqlConnector
   • Microsoft.EntityFrameworkCore
   • Pomelo.EntityFrameworkCore.MySql

3. 在 appsettings.json 中添加数据库连接字符串：

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

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

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

2. 在 Models 文件夹中创建 User 类：

   

   namespace Shop_Wx.Models
   
   public 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;
   }

3. 在 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>();
      
       }
   }

4. 在 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

1. 点击运行

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

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

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

在微信开发者工具中

1. 创建小程序项目

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

2. 配置项目

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

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

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

3. 创建网络请求工具

1. 在项目中创建 utils 文件夹

2. 在 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. 实现登录页面

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

login.wxml:

<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>

login.wxss:

.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;
}

login.js:

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);
    }
  }
});

login.json:

{
  "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");

五、调试与运行

1. 运行后端 API

1. 在 Visual Studio 中按 F5 启动后端项目
2. 记录 API 的访问地址（如https://localhost:5001）

2. 运行微信小程序

1. 在 HBuilder X 中右键点击项目根目录
2. 选择「运行」->「运行到小程序模拟器」->「微信开发者工具」
3. 微信开发者工具会自动打开并加载项目
4. 在微信开发者工具中点击「编译」按钮运行小程序
5. 测试登录功能和获取用户列表功能