H5网站

H5商城开发报价指南

详解H5商城费用构成与各类型预算参考

标准商品、会员、分销和装修，直接看月费套餐（基础版 500 元/月起）。本页只写本平台定制报价的差异。通用费用构成见小程序商城费用构成，立项范围与周期见定制开发。

H5商城是一套跑在手机浏览器与微信内置浏览器里的响应式Web应用，它的报价逻辑与需要提交平台审核的形态不同：省掉了提审与返工的时间成本，也不需要适配平台自有的开发语法，但多了ICP备案、HTTPS证书、CDN、多浏览器真机兼容测试这几项。本文把H5商城的费用拆成一次性开发投入与持续运行成本两部分，给出可对照的区间和影响因素，帮您在拿到报价单时知道每一项钱花在哪。

一、H5商城的费用构成

一个完整的H5商城项目通常包含七块工作量：产品原型与需求规格文档、响应式UI设计（移动优先，按需增加平板与桌面断点）、前端开发（Vue、React等技术栈）、后端接口与数据库、商品与订单与会员与营销四大业务模块、支付接入（微信JSAPI、微信H5支付、支付宝手机网站支付）、以及测试与部署上线。工作量的典型分布是：开发与第三方集成占65%-75%，设计占15%-20%，测试与项目管理占10%-15%。

与需要提审的形态相比，H5有两处省钱、一处更贵。省钱的地方：一是没有提审排队与被驳回重提的隐性成本，发布节奏完全自己掌控；二是可以直接复用成熟的Web组件库与开源生态，不必为平台专有语法重写一遍界面层。更贵的地方是兼容性测试——同样的页面要在iOS Safari、Android各家内核、微信与支付宝内置浏览器里都跑通，测试人天通常比单一封闭环境高出30%-50%。综合下来，同等功能的H5商城报价一般比小程序低10%-20%。

1.1 一次性配套支出

这几项金额不大但必须列进预算，否则上线前会临时加钱：域名年费约50-100元（建议用公司主体注册并自己持有）；HTTPS证书，免费DV证书可满足多数商城场景但需配置自动续期，OV/EV证书年费约数百至数千元；ICP备案本身不收费，但要计入7-20个工作日的时间成本，各省要求略有差异，部分省份经营性站点还需公安联网备案；微信与支付宝商户号开户不收费，但需3-10个工作日走资质审核与域名报备。

1.2 持续运行成本

云服务器与数据库：中小商城月均200-800元，日活上万或数据量大的月均1000-3000元；CDN与对象存储：按流量计费，中小商城月均几十到几百元；短信验证码与通知：约0.03-0.05元/条，注意H5用不了微信订阅消息，订单通知更依赖短信，这项的用量通常比小程序项目高；支付手续费：微信支付与支付宝标准费率通常为交易额0.6%（以签约合同为准）；安全防护：交易型站点建议配WAF与基础DDoS防护，云厂商基础版月均数百元。

二、各类型H5商城预算参考

类型	轻量版	标准版	定制版	典型工期
品牌展示 + 表单留资	0.8-1.5万	1.5-3万	3万以上	2-3周
标准响应式商城	2.5-4万	4-6万	6-15万	3-6周
活动/秒杀专题页	1-2万	2-4万	4万以上	1-3周
多端共用中台（H5 + 小程序）	—	6-12万	12万以上	8-14周

表中「标准响应式商城」指包含商品与多规格、购物车、订单、会员、优惠券、按环境接入的支付（微信内JSAPI、微信外H5支付、支付宝手机网站支付）、基础数据看板与管理后台的完整交易闭环。不宜把微信支付写成H5的唯一通道。「定制版」的价差主要来自多门店、二级分销、复杂促销规则叠加、ERP或CRM对接数量。区间是市场常见水平的参考，具体报价仍需按功能清单逐项核算。

三、影响报价的关键因素

• 响应式深度：只做移动端一套断点，与同时适配平板和桌面商城布局，设计稿数量和前端调试量可差出一倍
• 支付场景数量：只做微信内JSAPI，与同时覆盖微信H5支付、支付宝手机网站支付，联调与真机验证成本明显不同，每增加一条通道约增加0.3-0.8万
• 营销模块：满减与叠加规则、拼团、砍价、分销、积分商城，单项通常增加0.5-2.5万，规则越是「叠加生效」逻辑越贵
• SEO与性能专项：服务端渲染或预渲染改造、结构化数据、首屏性能优化，作为专项通常增加0.8-2.5万；若商城要靠自然搜索获客，这笔钱不建议省
• 兼容范围：要求覆盖到哪些机型与内核版本、是否需要兼容旧版Android内核，直接决定测试人天
• 第三方集成：ERP、CRM、电子发票、企业微信、物流面单，按接口数量与对方文档完备度计价，单个接口常见0.3-1.5万
• 数据迁移：从旧商城搬商品、会员、历史订单，需要单独评估清洗与去重工作量

四、怎么看一份H5报价单

报价单最容易出问题的不是单价，而是范围写得含糊。建议要求服务商把下面几项在合同附件里写清楚：①功能清单要到「可验收」的粒度，例如「优惠券」要拆成券类型、发放方式、叠加规则、失效提醒，而不是一行「营销模块」；②设计稿页数上限与免费修改轮次；③兼容机型与浏览器清单，这是H5项目最容易事后扯皮的地方，应明确列出需要通过验收的机型与内核版本；④支付通道范围（是否含支付宝、是否含退款与对账）；⑤是否包含备案协办、服务器初始化、CDN与证书配置；⑥源码与设计稿交付方式，以及知识产权归属；⑦上线后的免费保修期长度与响应时效。

关于明显低价的报价，需要核实三件事：是否用了后续无法二次开发的封闭模板、源码是否交付、兼容测试与支付联调是否包含在内。行业里常见的情况是前期报价很低，进入开发后以「不在范围内」为由逐项加价，最终总价反而更高。判断方法很简单——让对方按上面七项写进附件，不愿写清楚的，范围往往还没谈清。

五、控制预算的实用策略

• 先做MVP：一期只上「浏览—加购—下单—支付—订单查询—退款」这条主干，把拼团、分销、积分放到二期。主干上线后用真实数据判断哪些营销玩法值得做，比一次性堆功能省钱得多
• 用成熟模板做底座再定制：看店通的商城模板可覆盖标准交易链路，在其上做品牌化改造通常能压缩30%-40%工期，省下的预算更适合投在获客上
• 计划多端时先设计中台：如果一年内可能上小程序，一期就把商品、库存、会员、订单设计成统一数据模型，首期会多15%-30%投入，但能避免第二端重做一遍业务逻辑，也能避免两端价格与库存打架
• 设计稿确认后需求冻结：H5页面数量往往比预期多，开发中改版式会连带影响响应式断点与测试范围，返工成本很高
• 明确收录范围再决定是否做SSR：只有需要被搜索引擎收录的页面才值得做服务端渲染，会员中心、订单页做SSR是浪费
• 基础设施按需起步：初期用较低配置的云服务器加CDN即可，等实际流量上来再升配，不必一开始就买三年高配套餐

六、下一步怎么推进

把三件事整理清楚，报价的准确度会明显提升：功能优先级（哪些是一期必须有的，哪些可以放二期）、现有资产清单（是否已有已备案域名、微信支付商户号、ERP或CRM、旧商城数据）、流量入口与兼容要求（用户主要从短信、信息流广告、公众号菜单还是线下码进来，需要支持到哪些机型）。带着这些信息沟通，通常一到两次会议就能拿到分项报价与排期。开发周期与各阶段交付物见H5商城开发周期与流程，上线后的持续投入见H5商城后期维护成本，也可以通过页面右下角的客服微信预约后台演示。

H5商城开发周期与流程

从需求确认到备案上线、性能验收的完整节奏

H5商城的排期有一个与提审型形态明显不同的特点：没有平台审核排队，发布时点由自己掌控，所以工期的确定性更高；但同时多了两条必须并行推进的外部流程——ICP备案和支付商户开户与域名报备，这两项不受开发进度影响，处理不好就会出现「代码早就写完了，上线还要再等三周」的尴尬。本文按阶段拆解H5商城项目的时间安排，标出每阶段的交付物、验收标准与常见延期原因。

一、典型周期一览

项目类型	开发周期	说明
品牌展示 + 表单留资	2-3周	页面数量少，无支付与库存逻辑
标准响应式商城	3-6周	商品、购物车、订单、会员、优惠券、按环境接入微信JSAPI / 微信H5支付 / 支付宝
复杂定制	6-10周	多门店、二级分销、复杂促销叠加、ERP或CRM对接
多端共用中台（H5 + 小程序）	8-14周	统一商品、库存、会员、订单模型，两端并行开发与联调

上表是开发日历时间，前提是需求在设计确认后保持稳定、客户方决策响应及时。若ICP备案从项目启动才开始办，且备案通过时间晚于开发完成时间，实际上线日期会被备案卡住；若支付类目需要补充行业资质（如食品、医疗器械、图书），商户审核还可能再增加1-2周。所以真正的项目里程碑应该是「开发完成」与「合规就绪」两条线中较晚的那一条。

二、分阶段流程与交付物

2.1 需求与原型（1-2周）

这个阶段要把三类问题问清楚：商品结构（是否有多规格、是否有组合商品、库存按SKU还是按门店）、促销规则（优惠券能否叠加、与会员价的优先级、是否有限购）、支付场景（用户主要在微信内还是普通浏览器打开，需不需要同时支持支付宝）。此外要明确哪些页面需要被搜索引擎收录，这决定了是否要做服务端渲染，属于架构级决策，后期补做成本很高。

交付物：功能清单（到可验收粒度）、核心流程图、交互原型、兼容机型与浏览器清单。同期必须启动的外部事项：域名注册（用公司主体）、ICP备案材料准备、微信与支付宝商户号开户申请。

常见延期原因：促销规则没想清楚就开工，开发到一半反复改叠加逻辑；参与评审的人不包括真正的业务负责人，原型确认后又被推翻。

2.2 UI设计（1-2周）

采用移动优先的方式出稿，核心页面包括首页、分类、商品列表、商品详情、购物车、订单确认、支付结果、订单列表与详情、会员中心、地址管理。若需要桌面端访问，再补一套宽屏布局与导航。设计阶段要特别注意H5的两个细节：一是字号与点击热区，浏览器内没有统一的原生控件，按钮过小在真机上很难点准；二是长图与自定义字体的体积，直接影响首屏加载速度，需要在设计阶段就约定图片规格与字体方案。

交付物：全套设计稿、切图规范、组件与状态说明（加载中、空状态、失败、售罄）。设计稿确认后进入需求冻结，后续变更走书面评审。

2.3 开发与联调（2-5周）

前后端并行推进：后端做商品、库存、订单、会员、优惠券、权限与管理后台；前端做响应式页面与状态管理。这个阶段的关键路径是支付联调，而不是页面开发——因为它依赖外部配置是否到位。需要按环境分别打通：微信内置浏览器走JSAPI支付（先配公众号网页授权域名，再配商户平台的支付授权目录），普通浏览器走微信H5支付（配H5支付授权域名）与支付宝手机网站支付。同期完成HTTPS证书部署、CDN接入、短信与物流接口对接；若需要微信内自定义分享卡片，还要配置JS接口安全域名并在服务端实现签名与token缓存。

交付物：可访问的测试环境、接口文档、管理后台账号、支付联调记录。建议每周一次可演示的版本，而不是等到最后一次性交付。

常见延期原因：生产域名迟迟不定，导致支付域名配置无法开始；公众号与商户号主体不一致，需要重新走资质；测试环境和生产环境共用回调地址，异步通知互相干扰。

2.4 测试与上线（1-2周）

H5项目的测试量比封闭形态更大，要按矩阵覆盖：环境维度（微信内置浏览器、支付宝内置浏览器、iOS Safari、Chrome、主流国产Android浏览器与WebView）× 机型维度（至少覆盖两三款iPhone与四五款主流Android机型，包含一台低配机）。测试内容包括：功能对照需求清单、支付全链路（下单—支付—回调—订单状态—退款—对账）、性能指标（首屏时间、接口P95耗时）、弱网与断网场景、安全项（越权访问、金额篡改、敏感信息是否落在前端）。

上线当天的动作顺序建议是：生产环境部署 → 冒烟测试 → 小流量真实支付验证（用真实金额下一两笔小单并走完退款）→ 开放入口。由于没有提审环节，上线可以选在流量低谷时段，回滚也比提审型形态快得多，这是H5的一项实际优势。

交付物：测试报告（含真机清单与签字）、上线检查表、运维手册、备份与恢复方案。

三、备案与支付：两条必须并行的外部流程

ICP备案通常需要7-20个工作日，部分省份对经营性站点还要求公安联网备案。可行的做法是：项目启动第一周就确定生产域名并提交备案，备案审核期间在测试域名或内网环境完成开发与联调，备案通过后再把生产域名解析切过来。要注意备案主体、域名持有者、支付商户号主体三者必须是同一家公司，任何一处不一致都会在支付开户环节被退回。

支付开户与域名报备一般需要3-10个工作日。微信支付与支付宝都要求填写实际使用的域名，且部分产品（如微信H5支付）需要单独申请开通。建议在开发启动时就把一张「域名配置核对表」建起来，逐项对照上线域名打勾：公众号网页授权域名、JS接口安全域名、JSAPI支付授权目录、H5支付授权域名、支付宝应用网关与回调地址。这张表能挡掉H5项目里最集中的一类上线故障。

四、CDN、压测与大促前的准备

CDN建议在测试阶段就接入，不要留到上线当天——缓存规则配错会导致用户看到旧版本页面，这类问题需要时间调试。配置要点是静态资源长缓存配合文件名内容哈希，业务接口不做缓存或做很短的缓存并明确一致性影响。

如果上线后不久就有大促，建议提前至少两周做压测与缓存策略评审，重点验证三件事：商品详情与列表在峰值QPS下的响应时间、下单与库存扣减在并发下是否会超卖、支付回调在集中涌入时是否有积压。同时与CDN和云厂商确认带宽峰值上限，避免突发流量触发限速。把HTTPS证书到期日、域名到期日、备案信息年度核验时间写进运维日历并设提醒，证书过期会让整站和支付同时不可用。

五、如何压缩日历时间

• 把外部流程提到最前面：域名、备案、商户开户在第一周同时启动，这是最有效的一条
• 设计与后端并行：数据模型与接口设计不必等视觉稿，可与UI同步进行
• 缩小一期范围：先上主干交易链路，拼团、分销、积分放二期，通常能把首次上线提前两到三周
• 固定决策人与响应时限：约定客户方在2个工作日内完成每个节点的确认，原型与设计稿评审集中一次开完
• 用成熟模板做底座：标准交易链路复用现成实现，把时间省下来投在品牌化与兼容测试上
• 兼容测试不要压缩：这是唯一不建议省时间的环节，真机问题在上线后暴露的修复成本更高

六、下一步怎么推进

要得到一份靠得住的排期，需要先确认三件事：一期功能范围（哪些必须有、哪些可以放二期）、已有资产（是否已有已备案域名与微信支付商户号，能省掉大量等待时间）、兼容与上线要求（需支持哪些机型、是否有硬性的上线日期或大促节点）。费用构成与分项报价见H5商城开发报价指南，支付配置的详细步骤见H5支付接入指南，也可以通过页面右下角的客服微信预约后台演示与排期沟通。

如何选择H5商城开发公司

评估响应式、支付合规与性能交付的选型清单

先判断要不要定制：标准零售用月费套餐即可。是否该做项目，见SaaS 与定制怎么选；看店通的范围、周期与报价口径见定制开发。下文只补充本平台的选型差异。

选H5商城的服务商，考察重点和选做封闭平台应用的团队不完全一样。H5跑在各式各样的浏览器里、数据与服务器都在企业自己名下、支付要分环境实现，所以除了常规的案例与报价对比，还要额外确认三项能力：多浏览器真机兼容、三条支付通道的实操经验、基础设施与运维交接。本文给出可以直接拿去问的问题清单、判断标准，以及合同里必须写清的条款。

一、技术能力：重点问兼容与性能

H5最容易出问题的地方不是功能，而是「在别人的手机上不好用」。可以直接问这几个问题，从回答的具体程度就能判断对方是否真做过：

• 「你们的真机兼容测试清单长什么样？」——请对方出示一份实际项目的测试记录。合格的回答会列出具体机型、系统版本、浏览器环境（微信内置、支付宝内置、iOS Safari、Chrome、国产Android内核），并且有逐项结果。只回答「我们都测过」或只在开发者工具里演示的，说明没有真机流程
• 「上一个项目的首屏时间是多少，怎么测的？」——合格的回答会给出具体数字和测试条件（哪款机型、什么网络），并能说出具体优化手段：图片压缩与WebP、列表懒加载、关键CSS内联、首屏接口合并、路由按需加载
• 「如果客户用的是三四年前的Android机型，你们怎么保证不白屏？」——这道题考的是对内核差异的认识，好的团队会提到降级方案与兼容性测试策略

另外要确认一点：H5商城不是「把封闭平台应用换个壳」——两者在首屏加载、状态管理、分享与授权机制上完全不同。如果对方主要经验是做小程序，要评估其Web端的实际积累。

二、支付与合规经验

这是H5项目最集中的卡点，也是最能区分服务商水平的地方。建议逐项确认：

• 三条支付通道是否都做过：微信内JSAPI支付、微信外H5支付、支付宝手机网站支付。只做过微信内的团队，很可能在站外场景卡住
• 域名配置是否清楚：请对方说出需要配置哪几处域名（公众号网页授权域名、JS接口安全域名、商户平台JSAPI支付授权目录、H5支付授权域名、支付宝应用网关与回调）。说得完整说明踩过坑
• 是否协助过ICP备案：能否说清备案主体、域名持有者、支付商户主体必须一致这条要求，以及备案大概要多久
• 有没有支付故障的复盘经验：可以问「以前遇到过哪些支付调不通的情况，最后是什么原因」。真做过项目的团队会立刻举出具体例子
• 合规交付是否包含：隐私政策、用户协议、个人信息收集清单的模板是否提供，还是全部由客户自己准备

三、SEO与分享能力（按需求判断是否必须）

如果您希望商城页面能被搜索引擎收录带来自然流量，这项必须提前确认，因为服务端渲染是架构级决策，后期补做的成本很高。可以问：是否做过服务端渲染或构建期预渲染的项目、URL规则怎么设计、商品页是否会加结构化数据、sitemap如何生成与提交。如果对方对这些概念含糊，说明只做过纯客户端渲染的项目。

社交分享方面，确认对方是否实现过微信JSSDK的完整签名流程，包括服务端对access_token与jsapi_ticket的集中缓存（这两个凭证有有效期和调用频次限制，每次请求都去换会触发限制）。这一项不做好，分享出去就是一条纯链接。

四、合同里必须写清的条款

报价单最容易出问题的不是单价，而是范围含糊。建议把下面几项写进合同或附件：

• 功能清单到可验收粒度：例如「优惠券」要拆成券类型、发放方式、叠加规则、失效提醒，而不是一行「营销模块」
• 兼容机型与浏览器清单：这是H5项目最容易事后扯皮的地方，必须明确列出需要通过验收的机型与环境
• 支付范围：包含哪几条通道、是否含退款与对账功能、联调工作是否在报价内
• 源码与知识产权：源码、设计稿、技术文档归客户所有；使用的开源组件需确认license合规
• 基础设施配套：是否包含备案协办、服务器初始化、CDN与HTTPS证书配置，账号与域名归谁持有（应归客户）
• 设计稿页数上限与免费修改轮次
• 付款节奏：常见为签约30%、设计确认30%、上线验收40%，尾款建议不低于30%
• 维护条款：免费保修期长度、故障响应时效分级、年度维护费比例（行业惯例为开发成本的10%-20%）、包含的Bug修复人天上限
• 变更规则：设计确认后需求冻结、变更走书面评审、超出免费范围按人天计价

五、验收与交接清单

很多项目的问题出在「能演示但不能运营」。建议在合同里就约定下列交付物，验收时逐项勾选：

• □ 功能对照需求规格说明书逐条验收
• □ 真机兼容测试报告（含机型清单与逐项结果）
• □ 支付全链路实测记录：下单、支付、回调、退款、对账，三条通道各一份
• □ 性能指标报告：首屏时间、接口P95响应时间
• □ 安全检查：全站HTTPS、越权与注入测试、敏感信息不落前端、后台账号权限清理
• □ 源码、设计稿、接口文档、部署文档
• □ 账号与密钥台账：服务器、域名、云账号、商户号、证书的持有方式（应在客户名下）
• □ 数据库备份策略说明，并实际演练一次恢复（没演练过的备份不能算备份）
• □ 运维手册：日常操作、故障排查、证书与域名到期日登记

六、避坑清单

• 报价不含支付联调与退款功能：上线前才告知要另收费，这是最常见的加价点
• 只适配微信内置浏览器：站外流量落在Safari与Chrome里，这部分不管等于放弃一大块入口
• 域名与服务器挂在服务商名下：后续迁移、备案变更都会很被动，务必要求归客户主体持有
• 不交源码或只交编译产物：等于被锁定，后续任何改动都只能找原服务商
• 没有备份与恢复方案：交易数据一旦丢失无法挽回，这是底线问题
• 每个活动页都单独收费：H5的活动页更换频繁，如果每次都按新项目计价，长期成本会远超预期，应在合同里约定活动页的计价方式或包含次数
• 用明显低于市场的价格拿单：需核实是否用了无法二次开发的封闭模板、是否交付源码、兼容测试与支付联调是否包含。让对方把范围写进附件，不愿写清楚的，范围往往还没谈清

七、沟通与团队配置

建议在签约前要求项目经理与技术负责人共同参加一次评审会，只由销售对接的项目，后续需求传递失真的概率很高。评审会上可以观察三件事：对方是否会主动指出你需求里的矛盾（例如促销规则叠加冲突），是否会明确说「这个做不到」或「这个成本很高」，以及是否能给出分期建议。愿意说「不」的团队通常比什么都答应的更可靠。

项目过程中的沟通机制也应提前约定：固定的周会与书面周报、需求与变更在共享文档里留痕而不是散在聊天记录中、每周有可访问的演示版本而不是最后一次性交付。另外确认团队配置是否包含独立的测试角色——H5项目的测试工作量大，如果由开发自测，兼容问题很容易漏到线上。

八、三家比价时怎么横向打分

拿到三份报价后，直接比总价通常会选错。建议做一张打分表，按下面六项各给1-5分再加权：范围清晰度（功能清单粒度、兼容清单是否明确，权重最高）、H5实操经验（三条支付通道与真机测试流程是否具备）、交付物完整性（源码、文档、测试报告、运维交接）、沟通质量（是否会指出需求矛盾、是否敢说做不到）、维护与长期成本（维护费比例、活动页计价方式、响应时效）、价格（放在最后看）。

打分时有两条经验值得参考：如果某一家在「范围清晰度」上明显低于其他两家，即便报价最低也要谨慎，因为含糊的范围最终都会变成加价；如果三家的报价差距超过一倍，通常不是同一个交付标准，应回头核对是不是漏了支付联调、兼容测试或源码交付这类大项。

另外建议在决策前做一次真实后台演示，让对方用已上线项目的管理后台走一遍日常操作：上架一个商品、创建一张优惠券、查一笔订单、发起一次退款。后台好不好用直接决定日后运营的效率，这一点在报价单上完全看不出来，但会影响未来几年的使用体验。

九、下一步怎么推进

开始接触服务商之前，先把三份材料准备好，可以显著提高沟通效率也让报价更准：功能优先级清单（一期必须有的、可放二期的分开列）、现有资产盘点（是否已有已备案域名、微信支付商户号、ERP或CRM、旧商城数据）、兼容与上线要求（需要支持哪些机型与浏览器、是否有硬性上线节点）。费用构成与各档位区间见H5商城开发报价指南，各阶段交付物与验收标准见H5商城开发周期与流程，维护范围与SLA的参考见H5商城后期维护成本。看店通可提供功能清单模板与验收检查表样例，欢迎通过页面右下角的客服微信索取。

十、看店通的交付方式

深圳市达希科技有限公司旗下看店通长期交付H5商城与微信生态项目，在合作方式上坚持三点：源码与数据归客户、合同范围写到可验收粒度、分阶段验收与付款。项目组配置产品经理、UI设计、前后端开发、独立测试与实施顾问，交付物包含需求规格说明、接口文档、真机兼容测试报告、上线检查表与运维手册。若您未来计划同时运营小程序，我们可基于同一套商品与订单中台扩展，避免两端数据各自为政。欢迎把本页作为内部立项讨论的参考资料。