经常有人问我“我完全不懂代码能做微信商城小程序吗”“自己弄一个商城小程序到底要走哪些流程”这类问题我收到过太多很多人刷了几条短视频就去搜“微信商城小程序怎么弄”结果要么被一堆SaaS销售私信轰炸要么自己打开微信公众平台一脸懵连该点哪里都不知道。这篇文章我不站任何平台、不推销任何工具纯粹以亲手做过商城小程序的角度把“怎么做一个自己的商城”这件事的来龙去脉讲清楚。你会知道有哪些路线可选、每条路线的成本和技术含量是多少、如果自己动手应该按什么顺序推进、哪些环节最容易卡住你一个星期。文章里不会有“你只需要傻瓜式操作”之类的话因为我做过的项目里就没有一个环节是纯傻瓜式的尤其是支付和审核这两关坑比想象中多。先说清楚这篇文章主要面向打算“自己动手”或“找外包不被坑”的人我会把技术路线、功能拆解、支付接入、上线审核和常见翻车现场一次讲透。1. 先搞清楚商城小程序到底有哪几条路分别该选谁很多人一上来就问“怎么做”但实际上“怎么做”这件事不同背景的人答案完全不同。我先把主流的三条路线摆出来你对号入座一下。路线一直接用第三方SaaS商城平台。比如各类“小程序商城”模板服务商你注册账号、选模板、传商品、绑定小程序对方帮你托管。这条路最快短的半天就能上线适合没有技术基础、预算在几千块钱以内、对功能没有特殊要求的小商家。优点是省心缺点是功能被平台锁死你很难做个性化改造而且数据和流量规则都在对方手里后期想迁移很麻烦。路线二买一套开源商城源码部署到自己的服务器。市面上有不少开源或半开源的商城系统比如基于PHP的、基于Java的、基于Node.js的下载代码、准备服务器和域名、部署上线。这条路比SaaS自由你可以改代码、接自己的支付、完全掌控数据。但需要你会Linux操作、数据库配置至少能跑通命令行否则光是部署环境就能劝退一大半人。路线三用微信小程序原生开发自己从零写商城。这也是我推荐有长期打算、想真正做好商城的个人或团队认真考虑的路。你下载微信开发者工具用JavaScript、WXML、WXSS写前端页面后端可以搭配微信云开发也可以自建后端接口。这条路学习周期最长但可控性最强也是本篇真正想展开讲的核心路线。我的建议很直接如果你只是想试试水、验证一下商品能不能卖选路线一。如果你确认自己要把商城当成长期生意且愿意花两到四周学习选路线三。路线二卡在中间适合本身就会服务器的技术人不太适合纯小白。2. 从零开工前的硬性准备账号、资质、工具一个都不能少2.1 注册小程序账号个人主体还是企业主体这一点直接决定你能不能收款做商城小程序第一步是去微信公众平台注册一个小程序账号。这里有个关键决策点用个人身份注册还是企业身份注册。个人主体的小程序可以注册也能上线但不能开通微信支付——你卖不了东西只能做展示。所以只要你有真实的商品交易需求就必须用营业执照注册企业主体小程序个体户执照也可以。注册时选“小程序”不要选“订阅号”或“服务号”这两个是公众号和商城小程序不是一回事。企业主体注册需要准备的东西有营业执照照片、法人身份证信息、企业对公账户信息用于微信认证和支付签约、管理员微信扫码绑定。微信认证需要支付300元认证费按年支付。如果你是个体户流程一样但部分行业可能需要额外资质比如食品类需要食品经营许可证这个提前准备好否则后续类目审核过不去。2.2 下载微信开发者工具第一个能跑起来的小程序页面账号注册完之后去微信官网下载“微信开发者工具”。这个工具就是写小程序代码的IDE支持Windows和macOS建议下载稳定版。打开工具后你会有两种创建项目的方式一种是使用测试号不需要AppID适合先练手一种是使用自己注册的AppID适合正式开发。我建议第一件事先用测试号创建一个空白项目看到模拟器里出现“Hello World”页面把工具的基本布局搞熟这一步比什么教程都重要。开发者工具界面主要分三块左侧是模拟器显示小程序真实效果中间是代码编辑区右侧是调试器类似于浏览器的开发者控制台。你的所有页面都会在这里调试预览。注意这个工具每年都在更新界面细节可能有变化但核心逻辑不变你写代码、点编译、看效果。2.3 服务器与数据库用微信云开发可以省掉一大笔初期开销传统开发模式里你需要一台云服务器、一个数据库、一个备案过的域名再配置HTTPS证书。光是这一套流程新手的安装配置成本就非常劝退。好消息是微信官方提供了“云开发”能力你可以理解为一个“托管在微信生态里的后端”你不需要自己买服务器不需要管域名备案直接用官方提供的云数据库、云函数、云存储来支撑商城业务。做商城小程序数据量不大、初期访问量不高云开发的免费额度基本够用超过额度再按量付费一个月几十块钱就能跑起来。我用云开发做过几个商城项目说实话它最大的价值不是便宜而是省掉了一堆环境配置的坑。传统模式下你问“为什么Request请求发不出去”排查下来大概率是域名没备案、没配HTTPS或者后台没加白名单这三个问题在云开发里根本不存在因为接口天然就是合法的。2.4 合法域名如果你的商城要请求后端接口这一步早晚要配如果你没有选择云开发而是自建后端API那有一件事必须提前知道微信小程序在真机上访问网络接口域名必须满足两个条件一是已在微信公众平台后台配置为“request合法域名”二是该域名必须支持HTTPS且ICP备案完成。这个配置位置在小程序管理后台 - 开发 - 开发设置 - 服务器域名。你至少要配置request合法域名如果有文件上传下载还需要uploadFile合法域名和downloadFile合法域名。而且这个域名配置修改后有一定生效时间不是立刻就能用我第一次配的时候在开发者工具里死活不生效后来才发现要等几分钟并且真机调试时必须打开“不校验合法域名”选项这是个小白最容易忽略的点。3. 商城核心功能拆解一个能卖货的小程序到底要写哪些页面有了账号、工具和数据库的认知接下来就是最核心的部分商城的代码怎么写。我按照一个标准商城的最小可用版本来讲不做花哨功能只讲能完成交易闭环需要的页面模块。3.1 小程序目录结构与页面划分小程序原生开发的代码结构很清晰app.js是入口配置app.json注册所有页面和全局窗口样式pages目录下放各个页面目录。一个商城小程序最基础的页面包括index首页用于展示推荐商品、轮播图、分类入口category分类页按商品类目展示goods_list商品列表页可通过分类参数筛选goods_detail商品详情页展示商品图片、价格、详情、加入购物车和购买按钮cart购物车页管理选中商品、修改数量order_confirm确认订单页填写收货地址、选择优惠券、查看商品清单order_list / order_detail订单列表和订单详情页user个人中心页展示头像昵称、我的订单、收货地址管理login登录授权页如果要做个性化用户体系在这些页面里首页用到了自定义导航和轮播组件goods_detail涉及SKU选择比如颜色、尺码order_confirm涉及地址管理每个页面都不算简单但都有微信官方组件和基础API可以做支撑。3.2 数据库如何设计商品表、订单表、购物车表在云开发数据库里每一张“表”在官方术语中叫“集合”。你需要在云开发控制台里创建几个核心集合商品集合 products核心字段包括_id商品ID、title标题、price价格单位建议用分为单位存储避免浮点误差、images商品图片数组、category所属分类、stock库存、sales销量、detail富文本详情、status上下架状态。订单集合 orders商家用来管理订单的核心集合字段包括order_id订单号、user_openid买家openid云开发里从云函数拿当前用户身份很方便、goods_list包含商品快照的数组、total_price、status待付款/待发货/待收货/已完成/退款中等、address收货地址快照、create_time。购物车集合 cart严格来说购物车可以不落库用本地缓存storage存就行但如果你想让用户换手机后购物车还在就需要存数据库。字段相对简单user_openid、goods_id、sku信息、数量。这里有一个我踩过的坑价格一律以“分”为单位存储不要直接用浮点数保存元。浮点数在JavaScript里的精度问题会带来支付金额对不上的情况比如0.1 0.2不等于0.3在订单计算时非常致命。用整数分存储页面上展示时再除以100支付时直接传分给微信支付API全程无精度坑。3.3 购物车到订单的完整流程小程序实现加购并不复杂用户在商品详情页点击“加入购物车”前端先检查本地缓存或数据库里是否存在同一件商品存在就数量1否则新增一条记录。购物车页面支持勾选、全选、修改数量、删除然后点击“结算”跳到确认订单页。确认订单页要做的计算包括商品金额合计、运费如果启用、优惠减免、应付总额。提交订单时前端调用云函数创建一条订单记录状态为“待付款”。创建完订单后接着调起微信支付用户支付成功后微信会向你的服务器或云函数发送支付结果回调你收到回调后把订单状态更新为“待发货”。这一条链路上最容易被忽略的是“订单快照”。用户在提交订单后到商家发货前商品可能会改价、下架所以订单里存的goods_list不能只存商品ID一定要在提交那一刻把商品名称、价格、图片、SKU信息完整复制到订单记录里。否则商品改了价格你的历史订单金额会跟着乱套。3.4 用户登录与获取手机号自2021年起微信小程序获取用户信息的规则调整了很多次。开发者工具里常见的“获取登录后的微信用户失败”报错很多就是因为还在用旧的wx.getUserInfo接口而这个接口现在已经不会直接返回头像昵称了。现在的规范做法是用户点击“登录”按钮时用wx.login获取临时code传给后端换取openid获取头像和昵称则使用button的open-typechooseAvatar和input的typenickname这两个专属组件用户确认后你可以拿到最新的头像和昵称并保存。手机号获取则通过button的open-typegetPhoneNumber需要企业主体且完成认证用户点同意后将code传到云函数后端换取手机号。这些听起来麻烦实际上换成新规范之后反而是好事用户不用每次都点“授权”弹窗隐私声明也更清晰。你只需要在个人中心页面做好前端收集和存储把头像昵称绑定到users集合里的用户记录上即可。4. 微信支付接入这是拦住绝大多数人的关键一关支付是所有商城小程序绕不开的环节。这一节我讲两条路线一是能力最全、控制力最强的传统微信支付接入方式二是适合个人开发者和中小商家的云开发支付方式。两种方式我都在实际项目中跑通过各有利弊。4.1 微信支付商户号申请与API证书要接入微信支付首先要有微信支付商户号。商户号申请入口在pay.weixin.qq.com用公司的营业执照和法人信息提交通过后你会得到商户号mch_id以及用于API请求的API密钥。这里必须注意商户号申请时填写的AppID要与你的小程序AppID绑定登录小程序后台 - 微信支付 - 关联商户号两个平台打通后支付能力才生效。传统后端支付流程是前端拿到商品信息调用你的后端接口创建预支付订单你的后端调用微信支付的“统一下单”接口携带金额、商品描述、用户的openid、回调通知地址这些参数微信会返回一个prepay_id后台拿着prepay_id生成签名好的支付参数返回给前端前端通过wx.requestPayment拉起收银台用户输入密码完成支付支付成功后微信服务器会向你的回调地址发送通知你的后端必须在回调里验证签名确认订单金额无误后更新订单状态。这条路需要你有一台服务器、一个备案过的HTTPS域名并且需要妥善保管API证书文件。我见过不少人卡在“支付回调收不到通知”排查下来发现是回调地址没写外网可访问的HTTPS地址本地调试用内网ngrok穿透虽然测试可以收消息但正式环境必须用线上域名而且域名必须在小程序后台配置为“支付回调域名”之一。4.2 云开发支付用云函数免服务器接入微信支付如果你选择了云开发微信提供了一体化的“云开发微信支付”能力你在云函数里调用cloud.cloudPay.unifiedOrder传入body、outTradeNo、spbillCreateIp、subMchId、totalFee、envId等参数即可发起统一下单。整个过程不需要自己部署服务器回调也是通过云函数接收官方会自动处理签名和验签逻辑。云开发支付有一个要求必须使用你已关联小程序AppID的微信支付商户号。操作流程是在云开发控制台 - 更多能力 - 微信支付里绑定商户号然后填写支付服务所在的云环境ID配置好支付回调的云函数路径就可以在云函数里直接调用了。我实测下来云开发支付对个人开发者非常友好省掉了传统模式下“证书管理”“签名算法”这些容易出错的环节。需要注意一点云开发的支付能力对前端拉起支付时的参数格式有要求支付参数字段必须符合微信官方文档否则会出现同样的“统一下单”在传统后端能通、在云函数里报错的情况调试时优先检查返回的错误码和提示语。4.3 支付回调与订单状态更新这个动作必须幂等支付回调是整个支付环节里最容易出bug的地方。用户付款成功后微信会往你配置的回调地址发送一个POST请求携带支付结果。这里有两个经验第一回调处理必须先验证签名不能直接信任请求内容第二处理逻辑必须幂等——同一笔订单的同一个支付结果可能会被微信多次通知你的更新语句必须判断如果订单已经是已支付状态就不要再重复发货或重复加短信提醒。尤其在云开发里云函数被触发多次是常见现象因为官方会做失败重试。如果回调逻辑没有做到幂等用户付了一笔钱收到三条发货短信都是轻的严重的话会重复发放积分或重复推送给仓储系统。正确的做法是进入回调云函数后先通过order_id查询订单当前状态只有状态为待付款时才更新为已支付否则直接返回成功应答。5. 上线发布全流程从代码到微信用户能搜到中间还隔着好几道审核很多人在开发者工具里把商城页面写得漂漂亮亮点“预览”能在自己手机跑起来就觉得大功告成。实际上离“上线”还差得远。一个微信商城小程序从开发完成到正式可访问至少要经过真机调试、版本上传、类目审核、备案这一系列步骤。5.1 真机调试不要在模拟器里自欺欺人开发者工具里的iOS和Android模拟器用来做页面布局和功能逻辑调试是可以的但网络请求、支付、授权这些能力必须真机测试。操作方法是在开发者工具点击“预览”手机会生成一个二维码用微信扫开就能在真实环境里访问开发版小程序。真机调试阶段常见的报错包括net::ERR_CONNECTION_RESET、fail url not in domain list、request:fail ssl hand shake error等。第一个大概率是域名配置问题或者请求超时第二个是合法域名没配好第三个是HTTPS证书有问题或过期。遇到这类报错优先检查你配置的服务器域名是否在微信后台正确添加、证书链是否完整排查顺序是域名备案 - HTTPS证书 - 后台服务器域名白名单 - 代码里的请求URL是否写错。5.2 小程序备案与提交审核一条龙操作别漏步自2023年9月起中国大陆地区的小程序在发布前必须完成ICP备案。这个备案不是可选项而是硬性要求。你在微信小程序后台提交版本之后系统会引导你进入备案流程填写主办者信息、上传相关资料、拍摄人脸核验。备案一般需要几天到几周不等审核通过后你的小程序才能进入代码审核环节。代码审核本身由微信官方审核团队人工机审结合。常见的被拒原因包括类目选择与产品实际不符比如你做的是食品商城但选了“生活服务”类目、首页存在诱导分享或诱导关注内容、未提供完整的用户协议和隐私保护指引、部分页面存在空白或功能不可用。被拒后系统会给出修改意见你按意见修改后重新提交即可。这里的小技巧是在提交审核之前自己先用体验版把核心流程走一遍重点测试登录、商品浏览、下单选地址、支付、订单查看这些环节避免审核人员点开你的支付页面时直接白屏。5.3 发布后的小程序搜索与分享如何让用户找到你的商城发布之后用户可以通过微信“搜一搜”搜索你的小程序名称来找到你的商城。搜索排名跟小程序名称、主营类目、用户使用频率都有关系如果你做的是“某某严选商城”名称里包含核心关键词搜索到的概率会更高。你还可以把小程序挂在公众号菜单栏、关联公众号文章、生成小程序码放在线下物料上这些入口都能带来流量。有一点需要提醒小程序名称不是随便起的同名会被拒绝如果你注册时提示名称被占用可以尝试加地域名或品牌名。小程序简介里关联的关键词也会影响搜索权重填写时要自然合理地包含你的主营业务词不要堆砌无关热词否则审核容易不通过。6. 运营期必踩的坑头像、跳转、分包、营销工具一个比一个隐蔽商城上线只是开始运营阶段会遇到很多“不踩不知道一踩吓一跳”的问题。这一节我挑几个大多数人都会碰到的场景来讲每一件都是我或我身边的开发者真实遇到过的。6.1 头像昵称获取规则又变了必须用官方新的button组件很多之前写好的商城小程序在2022年之后突然发现用户头像变成灰色小人了、用户昵称变成“微信用户”了。原因就是微信调整了用户信息授权策略wx.getUserInfo和wx.getProfile接口拿不到真实的头像昵称了。解决方案是在“个人中心”页面和“登录”页面用官方提供的头像昵称填写能力。具体来说头像使用button组件设置open-typechooseAvatar用户点击后会弹出头像选择昵称使用input输入框设置typenickname。当用户填写或选择后你把这些数据收集起来再结合wx.login的code换取的openid存储到用户集合中。这样既符合平台要求也能稳定拿到用户信息。6.2 小程序里打不开公众号文章web-view域名限制与业务域名配置我接过很多“商城小程序需要发布营销内容”的需求常见做法是在小程序里嵌H5文章或跳转到公众号文章。但很多人在web-view组件里加载公众号文章时发现白屏这是因为它要求配置业务域名。所谓业务域名就是你web-view要加载的H5页面的域名这个域名必须在小程序后台 - 开发管理 - 开发设置 - 业务域名里添加并校验。校验方式是在你网站根目录放一个微信提供的校验文件。如果你要加载的是别人的公众号文章比如mp.weixin.qq.com的链接这个域名你是没法配置的所以小程序web-view直接打开公众号文章通常会被拦截解决办法要么是把文章内容同步到自己的域名下要么用小程序自身的富文本渲染能力展示内容。6.3 主包大小超过2MB分包加载和图片压缩是标配小程序主包不能超过2MB如果你商城里的图片较多、图标文件较大很容易超限。解决办法有两个图片全部使用云存储或CDN外链不要放在代码包内功能模块使用分包加载在app.json里配置subpackages比如订单、售后、个人设置这些次级页面单独打包成子包主包只保留首页、商品列表、商品详情等核心页面。我见过一个项目因为页面里放了太多本地图片主包达到3.7MB提交时直接被拒。后来把所有icon图标换成了阿里的iconfont在线字体图标商品图片全部走云存储URL整体包体降到1.4MB一次通过审核。所以开发商城小程序一开始就养成“资源全部走外链”的习惯能省很多麻烦。6.4 头部标题与顶部导航栏自定义导航时注意状态栏高度小程序默认的顶部导航栏是白色的系统导航上面显示页面标题。如果你觉得难看想自定义一个带背景色和定制按钮的导航栏需要在页面json里设置navigationStyle: custom然后自己计算状态栏高度和导航栏高度。这个高度的计算方式是用wx.getWindowInfo获取statusBarHeight状态栏高度用wx.getMenuButtonBoundingClientRect获取右上角胶囊按钮的位置和高度通过这两个参数推算出自定义导航栏的合适高度。直接写死一个数值是不行的因为不同手机的刘海屏高度不一样写死之后总会有某个机型布局错乱。我自己写过一个公共方法在app.js里同步计算并存储到globalData所有页面直接用这样整套界面的顶栏统一且适配。6.5 营销与消息推送优惠券、秒杀和订阅消息是商城提转化的三件套商城上线之后纯靠自然流量很难持续出单要做营销活动。第一是优惠券要么在订单确认页根据用户手头的优惠券自动抵扣要么在首页做领取入口第二是秒杀或限时折扣核心字段是秒杀开始时间和结束时间前端倒计时提醒到点自动切换价格和按钮状态第三是订阅消息通知比如发货通知、到货提醒这些是小程序向用户发送服务通知的合法方式。订阅消息不是你有用户openid就可以随时发的它要求用户主动触发订阅动作你才能发给用户一次消息。所以要在适当位置引导用户点击“订阅通知”按钮比如下单成功页引导订阅发货通知这是合规的做法。用微信官方提供的“订阅消息”能力在小程序后台申请模板然后在代码里调用requestSubscribeMessage获得用户授权后在云函数里用云调用发送订阅消息。商城里面发货通知和订单完成通知的触达率直接影响用户的复购体验务必要加这个功能。7. 做商城之前最后劝你冷静想清楚的几件事整个流程走下来你会发现做一个能跑起来的商城小程序其实门槛不高但做好做稳定涉及的面很大页面开发、数据库设计、支付安全、审核规范、运营配置每一个环节都需要花时间打磨。如果你完全没有编程基础我的建议是先别急着买服务器、买源码先用云开发按本文的流程走一遍MVP——用模板创建一个简单商城把商品列表、详情、下单、支付跑通再考虑扩展功能。这个过程本身就是最好的学习方式很多概念你在实际操作中自然就理解了。如果你已经找了外包团队开发把本文提到的这些环节作为验收清单去检查支付回调有没有做幂等、价格是不是按分存储、主包是否超限、头像昵称是否走了新组件、域名是否全白名单。这些点既决定项目能否正常上线也决定你后续维护会不会半夜被用户投诉。做自己的商城这件事说难也难说简单也简单前期把账号资质准备好中期沉下心把购物、支付链路摸透后期把审核规范当回事。按这个顺序走下来你的商城大概率能顺利上线而不是卡在某个莫名其妙的报错里和我当年一样干瞪眼。