uni-app 二开实战（加模块）：给现成源码加个分销功能，照这 5 步走

“买的小程序是 uni-app 写的，想加个分销功能从哪下手？””没文档，源码结构看不懂怎么办？””加个页面总会报错，是不是我基础不够？”——拿到一套 uni-app 源码想自己扩展，是最常见的二开场景。有个做美妆小程序的姑娘，源码是 uni-app 商城，想加”分享得佣金”，照着网上碎片教程改了一周，页面是出来了但分享出去没绑定关系，佣金算不出。她不是个例——uni-app 二开难不在语法，在”没摸清源码的数据流就动手”，改了前端忘了后端、加了页面没接接口。下面用一个真实案例（加分销模块）走完 5 步。

一、动手前：二开可行性先过 4 关

照二开注意事项（见已发篇）：代码是否未加密、框架是否 uni-app、有无接口文档、授权是否允许二开。四关没过，别硬改——尤其加密包，改一处崩一片。卓创交付的 uni-app 源码坚持开源未加密+带接口文档，二开才顺手。

二、第 1 步：读结构，先搞清”数据从哪来到哪去”

uni-app 标准目录：

pages/        页面（每个 .vue 一个页面）
pages.json    页面路由与 tabbar
common/       工具与请求封装（如 api.js）
static/       静态资源
manifest.json 应用配置

加功能前先找：请求封装在哪（common/api.js）、用户态怎么存（vuex 或 storage）、路由怎么配（pages.json）。搞清这三点，才知道”加的页面该调哪个接口、用户 ID 从哪取”。

三、第 2 步：加页面 + 配路由

1. 在 pages/ 下新建 pages/distribute/distribute.vue；
2. 在 pages.json 的 pages 数组加一项：

{ "path": "pages/distribute/distribute", "style": { "navigationBarTitleText": "分销中心" } }

3. 如需入口，在个人中心页加跳转按钮 <navigator url="/pages/distribute/distribute">分销中心</navigator>。

这步只加壳，跑起来应是空白页——正常，接口还没接。

四、第 3 步：接后端接口（前端不能自己算佣金）

分销的核心是”绑定关系 + 算佣金”，必须后端做。前端只负责展示和触发：

• 调 api.get('/user/distribute') 取我的推广码与佣金；
• 分享时把 inviter_id=我的ID 带进分享链接/海报；
• 新用户通过带参链接注册，后端记录”他是我邀请的”；
• 下单后后端按规则给上级加佣金，前端只展示”待结算/已结算”。

注意：佣金绝不能前端算（可篡改），一切以后端为准。后端接口写法见小程序后端 PHP 篇。

五、第 4 步：调样式 + 处理登录态

• 分销页读用户登录态：未登录先跳登录，登录后带 token 请求；
• 样式复用源码现有 CSS 变量/组件，别另起一套，保持统一；
• 分享海报用 canvas 生成或调后端海报接口。

翻车高发：没判断登录态，未登录调接口报 401；或分享链接没带 inviter_id，导致绑定失效（前面那位姑娘的坑就在这）。

六、第 5 步：联调 + 真机上线

• 开发者工具走通：登录→进分销页→生成海报→换号通过海报注册→下单→看上级佣金变化；
• 真机扫码再验一遍（工具里正常真机可能样式错位）；
• 上传代码、提交审核（分销涉及营销，注意审核规则，别写”多级返利”踩线）。

七、无文档硬改的排查法

现象	原因	处理
新页面白屏	pages.json 路径错	核对 path 与文件名
接口 401	未带/过期 token	先登录取 token 再请求
分享无绑定	链接缺 inviter_id	分享参数拼接检查
佣金不变	后端未写逻辑	查后端分销接口
真机错位	rpx/组件差异	真机调试调样式

八、二开前 5 项自查

• [ ] 代码未加密、可读可改
• [ ] 已定位请求封装/用户态/路由三处
• [ ] 后端有对应接口（或你能写）
• [ ] 佣金等敏感逻辑放后端而非前端
• [ ] 真机走通核心流程再上线

九、受益人视角

你能自己二开，受益人不止你。运营要个新活动页不用等外包排期、产品想试个新功能当天就能上、顾客更快用上新能力。把”学会二开”翻译成他们的好处：运营不等、顾客不催、试错成本从”找人改几周”变成”自己改一下午”。你掌握二开，是把交付节奏握回自己手里。

十、消费借口：学二开不是”折腾技术”，是”把外包费省成利润”

有人觉得”我是老板/运营，改代码是技术的事”。换责任框架：每改一个小功能就找外包，一来一回几天、花几百，还常被”这个要加钱”。你花点时间懂 uni-app 二开基础，把”加页面接接口”这类常规改动自己做了，省下的是反复外包的时间与钱，更是需求不被卡脖子的自由。这不是折腾，是把本该是利润的开销收回口袋。

---

📦 卓创源码网：uni-app 小程序源码开源未加密+完整二开文档，加模块自己动手不求人。浏览对应栏目：{{下载页链接}} 🔗 二开前必看的注意事项：{{部署教程链接}}

常见问题

uni-app 二开难吗？零基础能上手吗？

uni-app 基于 Vue，会基础前端就能改页面。难度主要取决于源码是否带文档：带完整二开文档的包，加页面、接接口都顺手；无文档的包，光摸清结构就费半天。建议先过'二开注意事项'4关（未加密/框架/文档/授权），再动手。

给小程序加功能从哪一步开始？

先读结构：找请求封装（common/api.js）、用户态存储（vuex/storage）、路由配置（pages.json）。搞清数据从哪来到哪去，再新建页面、配路由、接后端接口、调样式、真机联调上线。颠倒顺序容易改前端忘后端。

分销功能的佣金为什么不能前端算？

前端代码用户可见可改，佣金若前端算会被篡改刷单。正确做法：绑定关系和下单佣金全由后端处理，前端只展示'待结算/已结算'。分享链接务必带 inviter_id 参数，后端据此记录邀请关系，否则绑定失效。

没有文档的 uni-app 源码怎么改？

先按标准目录摸：pages 页面、pages.json 路由、common 请求封装、static 资源。用开发者工具全局搜关键词（如'我的''订单'）定位页面，再顺调用链找接口。能跑通再加功能，改一处用 git 存一版，避免改崩无法回退。

加完页面白屏/报 401 怎么办？

白屏多半 pages.json 的 path 与文件名不一致；401 是未带或过期 token，先登录取 token 再请求接口。分享无绑定检查链接是否带 inviter_id；佣金不变查后端是否写了分销逻辑。逐项对照排查表定位最快。

自己二开和找外包哪个划算？

常规改动（加页、接接口、调样式）自己学二开最划算，一次学会反复用，省下每次外包的等待和费用。复杂逻辑（如自研分销引擎）可找外包，但源码必须开源可二开，否则外包也要先破解，费用更高。买带文档的包是自二开的前提。