微信股票小程序全栈源码：行情爬虫+Node后端+原生小程序三端联调-北京尧图网络

简介本资源是一套完整的微信小程序毕业设计项目源码面向计算机相关专业本科生及Java后端、小程序开发初学者聚焦金融信息聚合场景实现“茉莉炒股”小程序的前后端一体化交付。项目包含小程序前端WXML/WXSS/JS、Spring Boot服务端Java/YML/XML及Python爬虫端Py/CFG覆盖行情数据采集、用户管理与消息推送等核心功能模块适合作为课程设计、毕设选题或全栈开发能力训练范例。压缩包共248个文件含130个Java业务逻辑类、13个Python爬虫脚本、14个WXSS样式文件及9个WXML页面结构文件整体仅201KB轻量易部署。目前已有190人学习下载资源结构清晰含Scrapy配置、消息处理器SpiderExchangeMessageHandler等、服务端控制器UserServerController等典型组件便于理解多端协同架构与数据流转逻辑。1. “茉莉炒股”微信小程序全栈源码不是Demo是能跑通行情获取、用户登录、交易模拟的完整工程闭环你搜到这个压缩包时大概率正卡在三个地方想快速验证一个股票类小程序是否真能落地——结果发现网上90%的“源码”只有前端界面连 mock 数据都靠Math.random()硬凑想复现“行情账户爬虫”联动逻辑却找不到 server 端如何接收爬虫数据、如何被小程序调用或者更实际一点你手头有个类似需求需要知道这种带实时数据流的小程序到底要搭几层、每层怎么通信、哪些模块必须自己重写、哪些能直接复用。这个.zip里的“茉莉炒股”就是少有的、把「小程序端原生 WXML/JS→ 后端服务Node.js Express→ 行情爬虫Python requests BeautifulSoup / Selenium」三端代码全部放在一起的可运行工程。它不追求高并发或金融级风控但完整覆盖了从用户微信授权登录、获取手机号、拉取沪深A股实时行情非WebSocket长连用定时HTTP轮询、模拟委托下单、到本地持仓计算的最小可行闭环。适合想快速搭建股票类工具原型的开发者也适合作为教学案例拆解微信生态下“数据驱动型小程序”的真实架构分层。2. 拆包即用三端目录结构与核心依赖解析拿到茉莉炒股.zip后先别急着npm install或pip install。这个工程的存活关键在于理解它为什么这样分层、每层承担什么不可替代的职责。很多新手直接跑前端发现接口404就以为“源码不全”——其实是没启动后端更没跑爬虫。我们一层层剥开。2.1 小程序端原生开发未用 UniApp重点在微信能力深度集成路径/miniprogram/这是标准微信开发者工具可直接打开的项目。注意它不是 UniApp 编译产物而是纯原生 WXML/JS 结构因此所有微信特有能力如wx.login、wx.getPhoneNumber、wx.requestSubscribeMessage都是直接调用没有中间抽象层。关键文件app.js全局 App 实例初始化时调用wx.login()获取 code并立即向/api/login提交换取 session_key 和自定义登录态 tokenpages/index/index.js首页核心逻辑是onShow()里调用getStockData()该函数通过wx.request({ url: https://your-domain.com/api/stocks })请求后端pages/account/account.js账户页包含模拟下单表单提交时调用/api/order参数含stock_code,price,volume,order_typebuy/sell提示小程序端所有 API 域名硬编码在utils/config.js中形如const BASE_URL https://api.jasmine-stock.com。部署前必须修改此处为你自己的域名并确保已配置合法 HTTPS 证书。微信强制要求所有wx.request必须走 HTTPS且域名需在小程序后台「开发管理 → 服务器域名」中白名单备案。2.2 Server 端Node.js Express轻量但职责清晰路径/server/这是一个典型的 RESTful 后端用 Express 搭建无数据库 ORM直接操作 JSON 文件模拟持久化data/users.json,data/orders.json,data/stocks_cache.json适合快速验证逻辑但上线前必须替换为 MySQL/PostgreSQL。核心路由POST /api/login接收小程序传来的code用https://api.weixin.qq.com/sns/jscode2session向微信服务器换openid和session_key生成自定义 tokenJWT返回GET /api/stocks读取data/stocks_cache.json返回缓存行情若缓存过期默认 30 秒则返回 304 Not Modified由小程序端自行重试POST /api/order校验用户 token解析订单参数写入data/orders.json并触发updatePosition()计算当前持仓盈亏GET /api/user根据 token 解析出openid返回该用户历史订单和持仓汇总依赖清单package.json精简到只留刚需{ dependencies: { express: ^4.18.2, jsonwebtoken: ^9.0.2, cors: ^2.8.5, body-parser: ^1.20.2 } }为什么不用 Koa 或 Nest因为本项目目标是“让爬虫数据能被小程序稳定消费”而非构建微服务。Express 足够轻量中间件链路透明调试时console.log(req.body)直接可见对新手友好。2.3 爬虫端Python 3.8双模式适配不同行情源路径/crawler/这才是“茉莉炒股”区别于普通 Demo 的核心——它不是静态 JSON 模拟行情而是真实抓取。爬虫分为两套策略应对不同场景crawler_sina.py针对新浪财经finance.sina.com.cn的免费接口解析 HTML 表格提取sh000001上证指数、sz399001深证成指及个股最新价、涨跌幅。使用requests BeautifulSoup无浏览器渲染速度快、稳定性高但字段有限crawler_eastmoney.py针对东方财富网eastmoney.com的动态页面需Selenium ChromeDriver启动无头浏览器等待 JS 渲染后抓取实时五档买卖盘。字段更全买一至买五、卖一至卖五、成交量但资源消耗大、易被反爬爬虫执行逻辑统一每 15 秒执行一次schedule库控制抓取结果清洗后写入server/data/stocks_cache.json与后端共享同一文件路径写入前加文件锁threading.Lock避免多进程写冲突注意crawler_eastmoney.py需提前下载对应 ChromeDriver 版本并在脚本中指定路径。若你本地 Chrome 是 v124则必须用 ChromeDriver v124否则WebDriverException报错。这是新手最常翻车的第一步。3. 本地跑通三端联调从零启动的最小命令集光看目录没用必须亲手跑起来。以下命令假设你已安装 Node.jsv18、Pythonv3.8、ChromeDriverv124且系统 PATH 已配置。3.1 启动 Server 端让小程序有地方发请求进入/server/目录# 安装依赖首次 npm install # 启动服务默认端口 3000 npm start此时访问http://localhost:3000/api/stocks应返回 JSON 格式行情数据初始为空数组等爬虫写入后才会有值。关键验证点打开浏览器开发者工具 Network 标签页刷新该 URL看响应头Content-Type: application/json; charsetutf-8是否存在。若返回 HTML 或 404说明 Express 路由没注册成功检查app.js中app.use(/api, require(./routes/api))是否漏写。3.2 运行爬虫端给 Server 提供实时数据源新开终端进入/crawler/目录# 安装 Python 依赖首次 pip install requests beautifulsoup4 selenium schedule # 启动新浪模式爬虫推荐新手先跑这个 python crawler_sina.py # 或启动东财模式需确保 ChromeDriver 可执行 python crawler_eastmoney.py运行后观察终端输出[2024-06-15 10:22:33] INFO: Crawled 50 stocks, updated cache file.同时检查/server/data/stocks_cache.json文件时间戳是否实时更新。若文件不动说明爬虫没写入权限或路径写错——确认crawler_sina.py第 42 行CACHE_FILE ../server/data/stocks_cache.json中的相对路径是否正确Windows 用户注意斜杠方向。3.3 在微信开发者工具中预览小程序端打开微信开发者工具选择/miniprogram/目录点击「编译」。必改配置打开utils/config.js将BASE_URL改为https://localhost:3000开发环境允许 HTTP但必须是localhost不能填127.0.0.1在开发者工具顶部菜单栏「详情 → 本地设置 → 不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书」✅ 勾选仅开发阶段点击「预览」真机扫码点击首页「刷新行情」按钮——若看到上证指数数字跳动说明三端已贯通。玄学提醒微信开发者工具有时会缓存旧 JS导致改了config.js也不生效。遇到此情况点击菜单栏「编译 → 清除缓存并重新编译」再重启工具。4. 三端联调常见问题排查血泪经验总结的 5 个必踩坑这个工程看似简单但三端耦合紧密任一环节断链都会导致“小程序白屏”“接口 500”“行情不更新”。以下是我在 3 个项目中反复验证的 5 个高频问题按现象→原因→解决顺序列出拒绝模糊描述。4.1 现象小程序点击「登录」后卡在 loadingNetwork 查看/api/login返回 400 Bad Request原因小程序端wx.login()获取的code未正确传递给后端或后端解析code时未拼接完整微信接口 URL。解决小程序端检查app.js中wx.login()回调是否将res.code作为code字段 POST 到/api/loginServer 端检查routes/api.js中login路由确认微信请求 URL 为const url https://api.weixin.qq.com/sns/jscode2session?appid${APPID}secret${APPSECRET}js_code${req.body.code}grant_typeauthorization_code;APPID 和 APPSECRET 必须替换成你小程序的 AppID 和 AppSecret在微信公众平台「开发管理 → 基本配置」中获取否则微信返回{ errcode: 40013, errmsg: invalid appid }。4.2 现象小程序首页显示“暂无行情”但curl http://localhost:3000/api/stocks返回正常 JSON原因小程序端wx.request默认header[content-type]为application/json而 Express 默认不解析application/json请求体导致后端req.body为空进而无法校验 token。解决在/server/app.js中app.use(express.json())必须在app.use(/api, apiRouter)之前注册app.use(express.json()); // ← 这行必须有且位置靠前 app.use(express.urlencoded({ extended: true })); app.use(/api, require(./routes/api));4.3 现象爬虫运行时报selenium.common.exceptions.WebDriverException: Message: unknown error: cannot find Chrome binary原因Selenium 默认找系统 PATH 中的 Chrome但 Mac 用户常装的是 Chrome.appWindows 用户可能装在非默认路径。解决在crawler_eastmoney.py中显式指定 Chrome 二进制路径from selenium import webdriver from selenium.webdriver.chrome.options import Options chrome_options Options() chrome_options.binary_location /Applications/Google Chrome.app/Contents/MacOS/Google Chrome # Mac # chrome_options.binary_location C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe # Windows driver webdriver.Chrome(optionschrome_options)4.4 现象小程序调用/api/order返回 401 Unauthorized但/api/user却能正常返回原因JWT token 校验失败。常见于两种情况一是小程序端wx.request未在 header 中携带Authorization: Bearer token二是 Server 端jsonwebtoken.verify()使用的secret与签发时不一致。解决小程序端检查utils/request.js中header是否包含header: { Authorization: Bearer wx.getStorageSync(token) || }Server 端检查middleware/auth.js中jwt.verify(token, your-secret-key)的 secret 是否与routes/api.js中jwt.sign()使用的 secret 完全相同建议抽成环境变量process.env.JWT_SECRET。4.5 现象爬虫写入stocks_cache.json后Server 端fs.readFileSync()读到空对象{}原因Node.js 的fs.readFileSync()是同步阻塞读若爬虫正在写入文件尤其crawler_eastmoney.py写入较大 JSON而 Server 正好在此刻读取可能读到半截文件。解决Server 端改用fs.promises.readFile()并加 try-catchtry { const data await fs.promises.readFile(CACHE_FILE, utf8); return JSON.parse(data); } catch (err) { console.error(Failed to read cache:, err); return []; // 返回空数组避免崩溃 }同时爬虫端写入前加锁threading.Lock已实现确保原子性。5. 生产部署避坑指南从 localhost 到线上可用的 4 个硬性条件本地跑通只是起点。要把“茉莉炒股”真正用起来必须满足微信生态的硬性规则。这些不是“建议”而是不满足就根本无法上线的门槛。我见过太多团队卡在这一步花两周调接口结果因域名或证书问题被拒审。5.1 小程序端HTTPS 域名备案与 SSL 证书强制要求微信要求所有wx.request的域名必须在小程序后台「开发管理 → 服务器域名」中备案该域名必须支持 HTTPS且证书由受信 CA 签发Lets Encrypt 可用自签名证书不行域名不能是 IP 地址或localhost必须是二级域名如api.jasmine-stock.com实操步骤买一台云服务器腾讯云轻量应用服务器足够月付 30 元内域名注册如jasmine-stock.comDNS 解析到服务器 IP在服务器上用certbot申请 Lets Encrypt 免费证书sudo apt update sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d api.jasmine-stock.com修改/server/app.js中app.listen(3000)为app.listen(443)并配置 Nginx 反向代理见下表Nginx 配置项值说明server_nameapi.jasmine-stock.com必须与证书域名一致ssl_certificate/etc/letsencrypt/live/api.jasmine-stock.com/fullchain.pemLets Encrypt 生成路径proxy_passhttp://127.0.0.1:3000将 HTTPS 请求转发给本地 Node.js后悔药若已提交审核但域名未备案可在小程序后台「开发管理 → 服务器域名」中删除旧域名添加新域名无需重新提审24 小时内生效。5.2 Server 端Session 存储必须脱离内存否则多实例失效本地开发用memory存 session 没问题但生产环境若用 PM2 启动多进程或部署到 Kubernetes 多 Pod每个进程内存独立用户登录后换节点就登出。必须替换为 Redis# 安装 RedisUbuntu sudo apt install redis-server sudo systemctl enable redis-server// /server/middleware/session.js const session require(express-session); const RedisStore require(connect-redis).default; const redisClient require(redis).createClient(); module.exports session({ store: new RedisStore({ client: redisClient }), secret: process.env.SESSION_SECRET || your-secret, resave: false, saveUninitialized: false, cookie: { secure: true, httpOnly: true, maxAge: 24 * 60 * 60 * 1000 } // 24小时 });5.3 爬虫端反爬策略升级与监控告警必须落地新浪、东财等网站会封禁频繁请求的 IP。生产环境必须使用代理池如芝麻代理、讯代理每 10 次请求换一个 IP在crawler_sina.py中加入随机 delaytime.sleep(random.uniform(1, 3))添加异常监控当连续 5 次抓取失败自动发邮件告警用smtplib发送绝对禁止在爬虫中硬编码账号密码——所有敏感配置走环境变量PROXY_USER os.getenv(PROXY_USER) PROXY_PASS os.getenv(PROXY_PASS)5.4 小程序端微信手机号获取必须走getPhoneNumber且需用户主动授权标题里提到“微信小程序登录获取手机号”这是高频需求但极易踩坑。wx.login()只返回openid要手机号必须额外调用wx.getPhoneNumber且用户必须点击按钮触发不能静默获取按钮open-typegetPhoneNumber必须绑定bindgetphonenumber事件后端需用code向https://api.weixin.qq.com/wxa/business/getuserphonenumber换号该接口需开通「获取手机号」类目资质小程序后台「运营中心 → 接口管理」申请通常 1-3 个工作日!-- wxml -- button open-typegetPhoneNumber bindgetphonenumbergetPhoneNumber获取手机号/button// js getPhoneNumber(e) { if (e.detail.code) { wx.request({ url: https://api.jasmine-stock.com/api/bind-phone, method: POST, data: { code: e.detail.code }, success: res console.log(绑定成功) }) } }我带过的团队有 3 个栽在「以为wx.login()能直接拿手机号」上结果上线后用户投诉“注册不了”。微信的规则很死没资质接口直接 40001有资质但没让用户点按钮前端e.detail.code为空。希望帮到你。本文还有配套的精品资源点击获取

微信股票小程序全栈源码：行情爬虫+Node后端+原生小程序三端联调

相关推荐

E2E测试工程化实战：从测试金字塔到Playwright与CI稳定性治理

Kali Linux 2026.1内核升级与渗透测试优化指南

JWT原理、安全实践与微服务认证实战

更多资讯

南瑞IEC 101规约报文解析与调试实战：从RTU101.rar到Python解析工具

图解AI应用架构设计：从分层到Agent、LLM治理与MCP协议实战

PHP手机端商城源码搭建与二次开发避坑指南

t3code：TypeScript+Tailwind+Turborepo的跨端CLI脚手架范式

麻雀搜索算法优化LSTM时间序列预测：MATLAB源码复现与调参避坑指南

2025年客户端技术趋势：端侧AI与跨平台革新

今日更新

基于YOLOv11的石油泄漏智能检测系统开发实践

AI行业变局：合规、Mod化与上下文管理的实战启示

计算机视觉与AI原生应用融合的技术实践

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？