简介：

一款高效流量变现方案，逻辑类似资源变现 —— 让用户通过观看广告，轻松兑换所需资源或专属权益，用户接受度高，变现路径顺畅。

用户完整观看广告后，运营者即可获得可观广告收益，轻松实现流量变现，无需复杂操作，快速将流量转化为实际利润。

方案支持单页面、小程序双形态适配，覆盖更多使用场景。其中单页面需与后端构建打包后即可使用，部署便捷。

部署门槛低：只需先安装 Node.js 环境，再按照作者提供的方法完成部署，即可快速上线启动变现，适合各类创业者、流量运营者使用。

变现说明及安装部署教程

一、 变现说明

（一） 基础流程

1. 后台创建对应任务
2. 复制生成的任务链接
3. 将链接分享至社群或私域流量渠道
4. 用户点击打开任务页面
5. 页面跳转至微信小程序，用户完成广告观看
6. 系统自动为用户下发对应奖励
7. 运营者获取广告相关收益

（二） 收入来源

1. 微信小程序官方广告分成收入
2. 其他合规合作收益

（三） 支持的奖励类型

1. 链接奖励：适用于下载链接、付费文章链接等各类可跳转资源
2. 文本奖励：适用于通用卡密、密钥、兑换码等纯文本信息
3. 卡密奖励：适用于一次性核销的专属卡密、激活码等

二、 安装部署教程

（一） 管理后台部署

1. 安装项目依赖：进入后台项目目录，执行命令 npm install 完成依赖安装
2. 构建项目文件：执行命令 npm run build 构建生产环境项目文件
3. 搭建网站及数据库环境
   • 推荐运行环境：PHP 8.0、Mysql 5.7
   • 必须开启 SSL 证书，确保访问安全性
   • 配置伪静态规则，添加以下配置：plaintextlocation / { try_files $uri $uri/ /index.html;} location /api/ { if (!-e $request_filename) { rewrite ^/(.*)$ /$1.php last; }}
   • 配置跨域：参考跨域教程第 1 种解决方法完成配置
4. 导入数据库：将 /后台/数据库/task_dev_xma_run.sql 文件导入已创建的 Mysql 数据库中
5. 修改配置文件：编辑 /后台/api/config.php，配置以下核心信息
   • 管理账户登录密码
   • JWT 配置（包含密钥、过期时间）
   • 数据库连接配置（地址、用户名、密码、数据库名）
6. 上传项目代码
   • 将 /后台/dist 目录下的所有文件上传至网站根目录
   • 将 /后台/api 目录完整上传至网站根目录

（二） 任务单页部署

1. 安装项目依赖：进入任务单页项目目录，执行命令 npm install 完成依赖安装
2. 修改接口及相关信息：编辑 /任务单页/src/App.vue，更新以下配置
   • 后台接口地址（确保与已部署的管理后台域名一致）
   • 视频教程相关地址
3. 构建项目文件：执行命令 npm run build 构建生产环境静态文件
4. 搭建静态网站环境
   • 新建静态网站，必须开启 SSL 证书
5. 上传项目代码：将 /任务单页/dist 目录下的所有文件上传至静态网站根目录

（三） 小程序部署

1. 项目打开与基础配置：使用 HbuildX 打开小程序项目
2. 更新 AppID：在 manifest.json 文件中替换为自身的微信小程序 AppID
3. 修改核心配置信息
   • 编辑 /pages/user/view，更新后台域名及广告 ID
   • 编辑 /pages/user/work，更新对应二维码信息
4. 发行与上传代码
   • 通过 HbuildX 发行小程序，在微信开发者工具中上传项目代码
5. 微信小程序后台配置：登录微信公众平台小程序管理后台，完成以下配置
   • 配置 request 合法域名：添加 https://task.dev.xma.run（替换为自身部署的后台域名）
   • 配置 downloadFile 合法域名：添加 https://c-ssl.duitang.com
   • 配置明文 scheme 拉起小程序：填写页面路径 pages/user/view;pages/user/work

（四） 注意事项

1. 若小程序用户量不足，尚未开通微信流量主功能，可将 /pages/user/view_无广告.vue 重命名为 /pages/user/view.vue 替换使用，确保功能正常运行
2. 待成功开通流量主后，恢复使用原 /pages/user/view.vue 文件，以启用广告变现功能