简介基于C#的微信小程序在线购物商城源码是一份面向毕业设计场景的完整前后端项目适合正在准备毕设或学习C#服务端与微信小程序开发的读者。前端包含wxml、wxss、js及json等文件覆盖商品展示、购物车、订单提交等交互后端以cs、aspx、ashx文件为主实现登录、商品管理、支付回调等业务逻辑并配套sql、mdf、ldf数据库文件和config配置便于本地还原与发布部署。整个压缩包共1930个文件约26.9MB其中480个cs文件对应C#业务逻辑451个gif、162个png、108个jpg构成图片与动图素材140个js负责前端交互125个aspx和23个wxml/wxss提供Web与小程序页面另含dll、pdb依赖库及数据库、配置等文件。目前已有772人学习下载。从工程结构看该源码将小程序前端、C#后端、数据库与部署资源整合在一起可作为可运行的参考工程也能帮助读者梳理从数据库设计、服务端接口到前端渲染的完整开发链路对理解商城类项目很有价值。1. 基于C#的微信小程序在线购物商城源码先弄懂它再决定要不要下做毕业设计时导出一个“基于C#的微信小程序在线购物商城源码.zip”里面是Global.asax、upload_ajax.ashx、GetMsg.ashx、file_manager_json.ashx、admin_ajax.ashx、payinfo.ashx这些文件第一反应是“这怎么跟前端拼起来”。我最初也以为C#只能做桌面程序直到把这个包解开才发现微信小程序商城的核心后台完全可以由C#写成一组轻量HTTP接口小程序端只负责发请求、渲染列表和购物车。对于需要用C#交毕业设计的人或者想快速搭一个完整前后端分离商城做技术验证的人这份源码能解决“用什么思路把下单、上传、积分编辑串起来”的问题。它适合有一点ASP.NET基础、但不熟悉小程序后端设计的开发者今天我就按自己的拆包经验把它一层层讲清楚。2. C#后端核心从.ashx处理器看服务端逻辑2.1 为什么毕设项目会选.ashx而不是MVC看到这一堆.ashx文件很多人第一反应是“这技术是不是过时了”。实际上在微信小程序这种轻后端场景里.ashx比MVC更合适。因为小程序后端不关心页面渲染只需要返回JSON数据而.ashx作为一个HTTP处理程序能直接接收请求、操作数据库、输出字符串没有任何视图层的开销。传统ASP.NET Web Forms里每个页面有.aspx和.cs而.ashx是纯处理器只有一个文件代码路径短适合做接口。比如项目中出现的upload_ajax.ashx负责接收上传请求payinfo.ashx返回支付信息这些职责单一的处理文件对于毕业设计来说维护成本远低于一个完整MVC项目。选型上还有一个隐性原因很多高校的C#课程还停在Web Forms阶段.ashx是过渡到接口开发最自然的台阶。我一般会这么判断一个后端文件该不该拆成.ashx只要前端通过URL直接调用并拿字符串返回值就用它如果涉及表单提交和跳转页面就用.aspx。这个商城源码明显是按前者设计的。2.2 逐个拆核心文件Global.asax / upload_ajax.ashx / payinfo.ashx先看Global.asax它是整个应用的全局入口。常见写法里Application_Start负责初始化一些通用配置比如定时任务或缓存Application_Error统一捕获异常并写日志。下面这段代码是在商城项目里最常见的全局错误处理逻辑protected void Application_Error(object sender, EventArgs e) { Exception ex Server.GetLastError(); // 把异常写入文本日志方便排查线上问题 System.IO.File.AppendAllText( Server.MapPath(~/logs/error_ DateTime.Now.ToString(yyyyMMdd) .log), DateTime.Now ex.Message \r\n); Server.ClearError(); Response.Write({\code\:500,\msg\:\server error\}); }这段逻辑不难理解异常发生时它会把错误信息追加到当天的日志文件同时返回一个固定结构的JSON避免微信小程序收到乱码或超时。参数方面Server.MapPath用于定位日志目录Response.Write直接向客户端输出code字段用来让前端判断请求状态。再看upload_ajax.ashx这是商城上传商品图片或用户头像的接口。我拆过类似项目一般它会先读Request.Files里的文件保存到指定目录再把访问路径返回给前端。下面是一个简化的实现public void ProcessRequest(HttpContext context) { context.Response.ContentType text/plain; HttpPostedFile file context.Request.Files[file]; string saveDir context.Server.MapPath(~/uploads/); string fileName DateTime.Now.ToString(yyyyMMddHHmmss) _ file.FileName; file.SaveAs(saveDir fileName); context.Response.Write({\url\:\/uploads/ fileName \}); }参数说明Request.Files[file]对应前端上传时的字段名SaveAs把文件存到服务器物理路径返回的url是相对路径小程序端用这个拼接完整图片地址。注意这里没有校验文件类型和大小实际项目里必须加否则就是后面要说的坑。payinfo.ashx处理支付信息。微信小程序支付需要后端生成预支付单并返回参数这个接口一般接收前端传来的订单号拼好签名后返回给小程序。它里面最常见的代码是计算签名我挑关键片段SortedDictionarystring, string dict new SortedDictionarystring, string(); dict.Add(appid, appid); dict.Add(mch_id, mchId); dict.Add(out_trade_no, orderNo); dict.Add(total_fee, totalFee); string sign SignatureHelper.Sign(dict, apiKey);命名表不复杂关键是SortedDictionary保证参数按字典序排序然后用商户API密钥做MD5签名。这就是微信支付要求的规则前端拿到这个签名才能发起支付弹窗。GetMsg.ashx和admin_ajax.ashx类似一个负责返回商品留言或系统消息另一个处理后台管理员的增删改请求结构上都是接收参数、调用数据库、返回JSON没有太大差异。2.3 数据库连接与配置方式源码包里的web.config肯定配置了数据库连接字符串。常见做法是用ConnectionString标记比如connectionStrings add nameShopDB connectionStringData Sourcelocalhost;Initial CatalogShopDB;User IDsa;Password123456; providerNameSystem.Data.SqlClient/ /connectionStrings代码里读取时一般这样写string connStr ConfigurationManager.ConnectionStrings[ShopDB].ConnectionString; using (SqlConnection conn new SqlConnection(connStr)) { // 打开连接执行查询 }参数说明Data Source是你的SQL Server地址本地开发用localhost或. 生产环境换成公网IPUser ID和Password对应SQL Server登录凭据。我遇到过不少人在这一步翻车数据库实体名不对或者密码里有特殊字符没做转义导致后台所有接口都报510错误后面避坑章节会细说。3. 微信小程序前端对接C#接口登录、商品、下单全流程复现3.1 wx.request请求地址拼接与参数规范小程序端发HTTP请求用的API是wx.request后端这些.ashx就是它的目标。在开发阶段后端跑在本地电脑小程序开发者工具里的URL必须填局域网IP或者本地回环地址。我在实际项目中会单独写一个config.js把所有接口地址集中管理const BASE_URL http://localhost:8080; module.exports { loginUrl: ${BASE_URL}/GetMsg.ashx?actionlogin, uploadUrl: ${BASE_URL}/upload_ajax.ashx, getGoodsUrl: ${BASE_URL}/GetMsg.ashx?actiongoodslist, createOrderUrl: ${BASE_URL}/payinfo.ashx?actioncreateOrder }参数说明BASE_URL对应IIS Express的监听地址微信开发者工具必须要开启“不校验合法域名”才能访问非HTTPS接口我一般会在开发阶段直接勾选这个选项否则请求会被拦截。每个接口通过action参数区分行为这在.ashx文件里是一个固定套路代码里用Request[action]判断进入哪个分支。3.2 登录态与Session处理微信小程序没有Cookie但C#后端可以用Session来保存用户状态。首次登录时前端调用wx.login拿到code传给后端后端再调用微信官方接口换取openid。整个流程在小程序端看起来是这样wx.login({ success: res { console.log(获取微信登录code成功, res.code); wx.request({ url: ${BASE_URL}/GetMsg.ashx?actionlogin, method: POST, data: { code: res.code }, success: response { const data response.data; if (data.code 0) { wx.setStorageSync(sessionKey, data.sessionKey); wx.setStorageSync(userId, data.userId); } } }); } });代码逻辑不复杂wx.login只负责拿临时code真正的身份交换在后端完成。后端拿到code后调用微信的api.weixin.qq.com/sns/jscode2session接口用appid和secret换openid再把openid存到数据库同时生成一个sessionKey返回给小程序。这里参数顺序不能乱appid、secret、js_code、grant_type少一个都会报400错误。我平时调试这个接口时习惯先在浏览器里直接访问微信那个URL确认返回结果再回头查C#代码。3.3 商品列表与图片上传接口对接商品列表是典型的GET接口前端请求后拿到JSON数组再用setData渲染到页面上。比如请求商品列表wx.request({ url: ${BASE_URL}/GetMsg.ashx?actiongoodslist, method: GET, success: res { const goods res.data.data || []; this.setData({ goodsList: goods }); } });这里的data字段是数组每项包含id、name、price、imagePath等属性对应数据库商品表。imagePath是后端返回的相对路径前端要在渲染前拼接完整的URLconst baseImage http://localhost:8080; goods.forEach(item { item.imageUrl baseImage item.imagePath; });上传图片的场景在小程序端会稍微复杂一点wx.uploadFile专门负责这种multipart上传wx.uploadFile({ url: ${BASE_URL}/upload_ajax.ashx, filePath: tempFilePath, name: file, success: res { const data JSON.parse(res.data); this.setData({ avatarUrl: data.url }); } });参数说明name字段必须和后端代码里Request.Files[file]的键名一致否则后端取不到文件。filePath是你的图片临时路径可以通过wx.chooseImage获得。后端返回的url同样是个相对路径需要拼接host才能显示。3.4 Postman调试C#接口的实用设置小程序端调试不如Postman直观我会先把所有.ashx地址放到Postman里跑。启动项目后用Postman打开选择POST方法填URL在Body里选x-www-form-urlencoded把action参数和code参数填进去。发送后看返回结果如果返回了JSON说明接口是通的如果返回HTML错误页说明后端抛异常了。具体到调试上传接口时Postman的做法是Body里选form-data然后把key设为file类型从Text改成File再选择一个图片文件。这个操作逻辑和小程序端wx.uploadFile完全一样后端拿到文件后返回路径整个过程就验证通过。我在实际调试中发现很多接口报错是因为参数名写错了比如后端取的是action前端传的是typePostman正好能帮你快速定位这种低级问题。4. 踩坑记录C#商城源码从下载到能跑的四个典型坑4.1 坑一数据库连接失败提示用户登录失败现象小程序里点击登录后端返回code为500日志里出现“Cannot open database ShopDB requested by the login. The login failed.”。原因数据库实体没有创建或者connectionStrings里的数据库名和实际库名不一致。我碰到过一次源码包自带SQL脚本但是很多人只执行了表结构脚本没有创建数据库本身。解决先在SQL Server Management Studio里手动创建数据库ShopDB再执行源码包里的SQL脚本。如果还是失败检查web.config里的User ID和Password是否和SQL Server实例的登录名一致。我一般会在项目启动前先说清楚连接字符串里的Password如果包含特殊字符比如符号必须用双引号包裹或者转义。4.2 坑二图片上传成功但小程序页面里不显示现象上传接口返回了正常路径图片文件也确实保存在服务器uploads目录里但小程序端img标签一片空白。原因开发阶段我们用的URL是http://localhost:8080但在真机预览时手机不能访问PC的localhost而且请求域名如果是HTTP会触发微信的域名白名单校验。更深一层是上传保存时文件名带了中文导致URL编码后访问不到。解决把BASE_URL改成电脑局域网IP比如192.168.1.100:8080同时关闭开发者工具的“不校验合法域名”选项仅限开发阶段。文件名处理方面我习惯在后端代码里统一用时间戳加随机数重命名文件从根本上避免中文和空格带来的坑。从那以后我每次看上传代码第一件事就是检查文件名是否包含非ASCII字符。4.3 坑三支付接口返回签名错误现象payinfo.ashx返回给小程序端的sign参数在拉起支付时提示“签名错误”。原因签名算法和微信支付要求的规则不一致。常见错误是参数名没有按字母排序或者参与签名的参数里包含了空值又或者apiKey用的是测试key而不是商户平台上的正式key。解决严格按微信官方文档里的规则来SortedDictionary自动排序后拼接成keyvalue...key某个值最后MD5。我排查时会在C#代码里把要参与签名的字符串用Content.Write输出到接口响应里对比一眼。还有一个隐蔽点签名的字符串里不能包含transfer里的空格必须直接用原始字符串。4.4 坑四微信开发者工具真机预览时接口全部无响应现象在开发者工具里跑得好好的一到真机预览所有接口都返回超时或网络错误。原因真机不能访问PC的localhost这是最直接的。第二个原因是Windows防火墙挡住了小程序发出的入站请求IIS Express默认只在localhost端口监听。解决先查PC的局域网IP把BASE_URL改成这个IP。如果还是不通打开Windows防火墙的高级设置为对应端口添加一条入站规则。端口号在IIS Express的applicationhost.config里默认是8080或44300我一般会把项目属性里的“使用IIS Express”改成固定端口方便防火墙配置。这个问题我遇到过不止一次后来习惯在启动项目前先ping一下电脑IP确认网络畅通再调试。5. 部署验证把C#商城源码跑通并自查接口5.1 本地IIS Express接上SQL Server解压源码后用Visual Studio打开解决方案先确认引用里有System.Web和System.Configuration。在web.config里把连接字符串改成你本机的SQL Server信息然后右键项目选择“属性”把“开始执行时”改为“Web服务器”而不是“调试代码”。按F5启动后浏览器会自动打开一个URL类似http://localhost:8080这个地址就是小程序的BASE_URL。如果你跑起来发现页面报HTTP 500先检查该项目对应的应用程序池是否启用32位模式这个设置在IIS Express的applicationhost.config里一般设置为true就OK。整个过程我建议在命令行跑一次IIS Express.exe确认端口占用情况用下面这种方式启动C:\Program Files\IIS Express\iisexpress.exe /path:C:\你的项目路径 /port:8080参数说明/path指向源码目录/port指定监听端口。如果之前跑了好几个项目端口冲突概率很大这个命令能强制指定端口避免Windows提示端口被占用。5.2 接口自查清单和curl快速验证启动项目后我一般会用一组简短命令快速验证关键接口是否正常。比如登录接口返回JSON商品列表接口能拉到数据上传接口能处理文件。在命令行里用curl来测试是最快的curl -X GET http://localhost:8080/GetMsg.ashx?actiongoodslist curl -X POST http://localhost:8080/upload_ajax.ashx -F fileC:\test.jpg curl -X POST http://localhost:8080/GetMsg.ashx?actionlogin -d codetestcode123这里参数没变只是换了个前端。第一个命令用GET拉商品列表看到data数组就说明接口通第二个命令用-F参数模拟表单上传注意文件路径必须加引号防止空格分割第三个命令模拟小程序登录code字段可以先填一个假值只要后端不报异常就说明参数名对得上。5.3 验证时多留意数据库操作日志我在验证时还会打开SQL Server Management Studio执行SQL Server Profiler跟踪数据库查询。因为有些接口返回200但数据没变化这时候需要看SQL语句是不是真的执行了。如果发现查询超时或者锁冲突多半是事务没提交检查.ashx里有没有显式调用transaction.Commit()。这是我在调试这个商城源码时踩得最多也最不容易发现的点接口不报错但数据就是写不进去。把那以后的习惯分享给你每拿到一份C#后端源码第一先把连接字符串改成环境变量加载而不是写死在web.config里第二用开关控制全局错误日志的详细程度第三所有接口统一返回{code:0,data:...}格式方便小程序端统一处理。这份基于C#的微信小程序在线购物商城源码如果能按上面步骤跑通后端处理和前端对接的基本思路你就能完整掌握一遍以后换任何语言写小程序接口都心里有数。希望帮到你。本文还有配套的精品资源点击获取