空痕博客 - 编程技术分享

全新任务管理平台(流量变现系统)开源

KongHen02
昨天发布 /正在检测是否收录...

项目简介

项目结构

  1. 接口管理:PHP + Mysql
  2. 后台管理系统:Vue3 + ts + TDesign
  3. 任务单页:Vue3
  4. 小程序:uniapp + Vue2

变现说明

  1. 基础流程:
  • 后台创建任务
  • 复制任务链接
  • 分享到社群或私域
  • 用户打开任务页面
  • 跳转到小程序观看广告
  • 观看广告
  • 下发奖励
  1. 收入说明
  • 微信小程序官方广告收入
  • 其他推广/广告收入

系统演示

演示站点

空痕任务管理系统

后台数据为静态演示数据,无法更改

演示图片

  1. 管理后台

控制台

  1. 任务单页

任务单页

  1. 小程序

小程序

安装教程

管理后台

  1. 安装依赖
npm install
  1. 构建项目
npm run build
  1. 新建站网站及数据库
  • 推荐:PHP 8.0
  • 推荐:Mysql 5.7
  • 开启SSL(必须)
  • 配置伪静态

    location / {
      try_files $uri $uri/ /index.html;
    }
    
    location /api/ {
      if (!-e $request_filename) {
          rewrite ^/(.*)$ /$1.php last;
      }
    }
  1. 导入数据库
  • 导入/后台/数据库/task_dev_xma_run.sql到Mysql数据库
  1. 修改/后台/api/config.php
  • 管理账户密码
  • JWT配置(密钥、过期时间)
  • 数据库配置
  1. 上传后台代码
  • 上传/后台/dist目录中的全部文件到网站根目录
  • 上传/后台/api目录到网站根目录

任务单页

  1. 安装依赖
npm install
  1. 修改/任务单页/src/App.vue中的接口信息
  • 修改后台地址
  • 修改视频教程地址
  1. 构建项目
npm run build
  1. 新建网站
  • 静态网站
  • 开启SSL(必须)
  1. 上传任务单页代码
  • 上传/任务单页/dist目录中的全部文件到网站根目录

小程序

  1. 使用HbuildX打开小程序
  2. manifest.json中获取新AppID
  3. 修改/pages/user/view中的后台地址
  4. 修改/pages/user/work中的二维码
  5. 发行到微信小程序
  6. 在微信开发者工具中上传代码
  7. 登录微信小程序后台配置
  • 配置request合法域名

    https://task.dev.xma.run
    https://www.duitang.com
  • 配置downloadFile合法域名

    https://c-ssl.duitang.com
  • 配置明文scheme拉起此小程序

    pages/user/view;pages/user/work

代搭建/教学

请联系微信:KongHen02

项目地址

GitHub

© 版权声明
THE END
喜欢就支持一下吧
点赞 1 分享 收藏
评论 抢沙发
取消
易航博客