简介WIFI共享小程序独立版源码是一套面向本地共享WiFi商业运营的完整源码包适合想快速搭建自主共享WiFi平台的团长、拓展员、商家及个人开发者解决从技术部署到项目落地的全流程问题。压缩包内共2004个文件以PHP实现后端逻辑、JS完成前端交互、JSON存储配置数据并以大量JPG/PNG图片提供界面素材另有MD说明文档与CSS样式文件整体约68MB结构完整便于二次开发。目前已有195人学习下载属于小而精的实操型项目。资料不仅提供可直接部署的站点源码还包含配置教程、打印机等硬件选型建议以及市场定位、用户引导、活动策划、会员管理等运营策略能够帮助使用者从零搭建平台并持续优化运营动作建立起属于自己的本地化共享WiFi生态。从源码部署、硬件选型到运营落地整体方案覆盖了共享WiFi项目从0到1所需的关键环节。1. WIFI共享小程序独立版源码先别急着看代码把共享这件事拆成「存密码」和「送密码」第一次看到“WIFI共享小程序独立版源码”这个标题很多人会下意识以为难点在怎么让手机自动连上别人家的Wi-Fi。真做起来你才会发现微信小程序连直接调起系统Wi-Fi连接都做不到共享这件事的本质其实是两件事把Wi-Fi密码安全地存到你自己后端再通过小程序把密码和二维码送到对方手机上。所谓独立版就是不依赖任何第三方共享平台前后端都归你管。这个方向适合手里有服务器、想给门店或小区做Wi-Fi指引的开发者也适合拿这个典型的小程序全栈项目入门。接下来我会把架构、后端、小程序端、踩坑和验证一次讲完按这条路径走你拿到的不是一段能跑的代码而是一套能真正上线运营的方案。2. 从需求到架构独立版不是一套代码而是「云端Wi-Fi台账 小程序壳」两层结构2.1 微信小程序到底能不能直接“连Wi-Fi”先看清平台边界很多人问微信小程序不是有wx.connectWifi接口吗为什么不能直接调用让用户点一下就连上咖啡店的Wi-Fi我这么跟你说这个接口在真实业务里几乎不可用。它确实存在安卓端偶尔能触发系统去连接但 iOS 上基本是无效操作而且用户必须停留在小程序页面一旦切后台连接就中断。更麻烦的是微信官方对这个接口的应用场景限制得很死普通个人开发者提交的“一键连Wi-Fi”功能在类目审核时大概率被驳回。所以做共享Wi-Fi小程序别把宝押在“自动连接”上。用户真正的诉求是快速拿到密码或者扫一个二维码让系统相机识别并弹出连接提示。这个需求落到产品上就是两件事后端管好“Wi-Fi台账”小程序做好“密码展示和二维码分发”。这就解释了为什么叫“独立版源码”——你需要自带服务器、数据库和域名把整个闭环撑起来。市面上那些接第三方共享平台的方案数据不在你手里流量也被人截走做着做着就变成给平台打工。2.2 数据模型设计一张表撑起一个共享小程序不用一开始就设计七八张表WIFI共享小程序的最小数据模型就一张wifi_info表。字段设计如下字段类型说明idINTEGER PK主键ssidTEXTWi-Fi名称passwordTEXT加密后的密码前端展示时解密locationTEXT位置描述如“3楼会议室”labelTEXT展示标签如“客人专用”scan_countINTEGER被查看/扫码次数计数器statusINTEGER0下架1上架默认1这里有个关键决定密码字段不能存明文。很多人做内部demo图省事直接把密码写在数据库里等服务器被人拖库或者员工离职带走数据库文件时所有Wi-Fi密码全部泄露那就不只是翻车而是安全事故了。密码需要可逆加密因为小程序端要让用户看到明文并复制。我一般用 AES-CBC 加密密钥放在后端环境变量里而不是写死在源码中。scan_count字段用来做统计后期可以演化成“最多人用的Wi-Fi”“最近新增”等排序不用再改表结构。2.3 独立版 vs 现成平台与云开发为什么源码通常走自有后端有朋友问微信云开发不是更简单吗数据库、云函数、存储一套搞定代码也少。我承认云开发适合快速原型但它和“独立版源码”是两个物种。云开发的数据库和存储都绑定微信生态你想迁移出来很麻烦而且云开发按量计费到一定量级并不便宜也不方便自己维护定时任务和做精细化权限控制。独立版的好处是自由。你可以用任何后端语言数据库可以用 MySQL、PostgreSQL 或 SQLite服务器想搬就搬。下面这张表是我给团队选型时常用的对比维度独立版自有后端现成SaaS平台微信云开发数据所有权完全自主平台持有腾讯云持有二次开发自由度高受平台限制受微信限制部署成本需服务器域名HTTPS按月订阅按调用量计费适合场景商用/长期运营临时上线原型验证结论也简单如果你只是给朋友做个玩票的页面随便哪个都行如果你想在小程序里沉淀自己的用户和Wi-Fi数据就老老实实走独立版。接下来的后端代码就是按照独立版自由部署的方式来的。3. 后端API落地Flask 30分钟搭出Wi-Fi信息接口附完整可跑代码3.1 为什么选Flask而不是Spring Boot、Node选后端框架这事我踩过不少次。Spring Boot 适合大型团队和复杂业务但为了一个共享Wi-Fi小程序上 Spring Boot光搭建环境就把热情磨没了。Node/Express 也不错但如果你主要写 PythonFlask 是最快见效的选项。Flask 的优势就三点路由简洁ORM 可选这里直接用原生 sqlite3生态里qrcode和pycryptodome都能无缝对接。轻量接口不需要微服务不需要消息队列一个进程跑起来就够了。生产环境用gunicorn多启几个 worker前面挂 Nginx 做 HTTPS完全够用。3.2 最小后端代码增删改查二维码生成下面这份代码是完整可跑的包含了数据库初始化、密码加解密、Wi-Fi列表、新增/下架、生成二维码五个接口。我特意把逻辑写简单方便你照着改成自己的。# app.py import os import sqlite3 import base64 import qrcode from io import BytesIO from flask import Flask, request, jsonify, send_file from flask_cors import CORS from Crypto.Cipher import AES from Crypto.Util.Padding import pad, unpad app Flask(__name__) CORS(app) # 开发阶段放开跨域上线前按需收紧 DB_PATH wifi_share.db # 生产环境务必通过环境变量注入 AES_KEY不要写死在源码里 AES_KEY os.environ.get(AES_KEY, 0123456789abcdef).encode() def get_db(): conn sqlite3.connect(DB_PATH) conn.row_factory sqlite3.Row return conn def init_db(): conn get_db() conn.execute( CREATE TABLE IF NOT EXISTS wifi_info ( id INTEGER PRIMARY KEY AUTOINCREMENT, ssid TEXT NOT NULL, password TEXT NOT NULL, location TEXT, label TEXT, scan_count INTEGER DEFAULT 0, status INTEGER DEFAULT 1 ) ) conn.commit() conn.close() # AES-CBC 加密密码必须可逆小程序端才能解密展示 def encrypt_password(raw): cipher AES.new(AES_KEY, AES.MODE_CBC) iv cipher.iv ct cipher.encrypt(pad(raw.encode(), AES.block_size)) return base64.b64encode(iv ct).decode() def decrypt_password(enc): data base64.b64decode(enc) iv, ct data[:16], data[16:] cipher AES.new(AES_KEY, AES.MODE_CBC, iviv) return unpad(cipher.decrypt(ct), AES.block_size).decode() app.route(/api/wifis, methods[GET]) def list_wifis(): 获取所有上架的Wi-Fi列表密码解密后返回给小程序 conn get_db() rows conn.execute( SELECT * FROM wifi_info WHERE status1 ORDER BY id DESC ).fetchall() result [] for row in rows: item dict(row) item[password] decrypt_password(item[password]) result.append(item) conn.close() return jsonify({code: 0, msg: ok, data: result}) app.route(/api/wifi, methods[POST]) def add_wifi(): 新增一条Wi-Fi记录请求体是JSON data request.get_json(forceTrue) ssid data.get(ssid, ).strip() password data.get(password, ).strip() if not ssid or not password: return jsonify({code: 1, msg: ssid和password必填}) conn get_db() conn.execute( INSERT INTO wifi_info (ssid, password, location, label) VALUES (?,?,?,?), (ssid, encrypt_password(password), data.get(location, ), data.get(label, )) ) conn.commit() new_id conn.execute(SELECT last_insert_rowid()).fetchone()[0] conn.close() return jsonify({code: 0, msg: ok, data: {id: new_id}}) app.route(/api/wifi/int:wid, methods[DELETE]) def delete_wifi(wid): 软删除把 status 置为0不删物理记录方便审计 conn get_db() conn.execute(UPDATE wifi_info SET status0 WHERE id?, (wid,)) conn.commit() conn.close() return jsonify({code: 0, msg: ok}) app.route(/api/qrcode/int:wid, methods[GET]) def wifi_qrcode(wid): 生成标准Wi-Fi二维码系统相机扫码可直接识别 conn get_db() row conn.execute( SELECT * FROM wifi_info WHERE id? AND status1, (wid,) ).fetchone() conn.close() if not row: return jsonify({code: 1, msg: Wi-Fi不存在或已下架}) pw decrypt_password(row[password]) # WIFI 协议标准T:加密类型;S:ssid;P:密码;; content fWIFI:T:WPA;S:{row[ssid]};P:{pw};; img qrcode.make(content) buf BytesIO() img.save(buf, formatPNG) buf.seek(0) return send_file(buf, mimetypeimage/png) if __name__ __main__: init_db() app.run(host0.0.0.0, port5001)代码逻辑要点init_db()在启动时建表encrypt_password/decrypt_password成对出现避免前端拿到不可逆的密文。列表接口把密码解密后返回因为小程序端只能拿到明文复制给用户。二维码接口直接生成 PNG 图片而不是返回内容让前端画这样省掉小程序端引入画二维码的第三方库。参数说明AES_KEY必须是16字节你可以通过export AES_KEYyour_key_16bytes注入。端口默认5001别用8080避免和本机其他开发服务撞车。CORS(app)开发时建议保留上线后改成白名单防止别人跨站直接调你的接口。3.3 跑起来的三个前置步骤和接口协议照着下面三步走后端就能在当前目录跑起来pip install flask flask-cors pycryptodome qrcode pillow python app.py第一个命令安装依赖第二个启动服务。启动后访问http://127.0.0.1:5001/api/wifis应该能看到{code: 0, msg: ok, data: []}的空列表。如果提示端口占用检查 5001 是否被其他进程占用或者改app.run(port5002)。接口协议建议统一成{code: 0, msg: ok, data: ...}。code 为 0 表示成功非 0 表示失败。小程序端只判断 code不用解析 HTTP 状态码因为wx.request拿到的 HTTP 200 不一定代表业务成功。接口清单如下方法路径功能请求说明GET/api/wifisWi-Fi列表返回上架记录密码已解密POST/api/wifi新增记录JSON: ssid, password, location, labelDELETE/api/wifi/下架Wi-Fi软删除状态置为0GET/api/qrcode/生成二维码返回PNG图片这样设计小程序端就不需要做任何数据加工拿到列表直接渲染点击复制密码点击图片看二维码。4. 小程序前端对接从空白项目到扫码分享核心代码就三块4.1 新建小程序项目普通模板加 request 域名别一上来就用云开发在微信开发者工具里新建项目时后端服务不要选“微信云开发”选“不使用云服务”的 JavaScript 基础模板。独立版意味着wx.request直接请求你自己的服务器所以第一步要做的就是配置合法域名。开发阶段有个后悔药在开发者工具右上角“详情 - 本地设置”里勾选“不校验合法域名、web-view、TLS 版本以及 HTTPS 证书”。这样你才能用http://127.0.0.1:5001在模拟器里调试。但真机上这个选项不生效所以正式上线前必须准备一个备案域名并配置 SSL 证书在小程序后台的“开发管理 - 服务器域名”里添加https://api.yourdomain.com。4.2 首页列表请求后端、渲染卡片、复制密码页面结构很简单一个scroll-view包住wx:for渲染的卡片列表。下面是首页的 WXML 骨架!-- pages/index/index.wxml -- view classpage view classwifi-card wx:for{{wifis}} wx:keyid view classssid{{item.ssid}}/view view classmeta text classlocation{{item.location}}/text text classlabel{{item.label}}/text /view view classactions button sizemini typeprimary>// pages/index/index.js const BASE_URL https://api.yourdomain.com; // 改成你后端的真实域名 Page({ data: { wifis: [], }, onLoad() { this.loadWifis(); }, loadWifis() { wx.request({ url: ${BASE_URL}/api/wifis, method: GET, success: (res) { if (res.data.code 0) { this.setData({ wifis: res.data.data }); } else { wx.showToast({ title: 获取列表失败, icon: none }); } }, fail: () { wx.showToast({ title: 网络异常, icon: none }); }, }); }, copyPassword(e) { const id e.currentTarget.dataset.id; const item this.data.wifis.find((w) w.id id); if (!item) return; wx.setClipboardData({ data: item.password, success: () { wx.showModal({ title: 密码已复制, content: 请到系统Wi-Fi设置里连接 ${item.ssid}, showCancel: false, }); }, }); }, previewQrcode(e) { const id e.currentTarget.dataset.id; const item this.data.wifis.find((w) w.id id); if (!item) return; wx.previewImage({ urls: [${BASE_URL}/api/qrcode/${id}], }); }, });这里有两个细节要注意。previewImage会把后端返回的 PNG 图片全屏预览用户长按图片就能触发系统识别 Wi-Fi 二维码不过 iOS 上更稳妥的做法是直接保存图片到相册再用系统相机扫。wx.setClipboardData复制成功会自动弹一个“内容已复制”的提示我再叠加一个自定义弹窗就是为了告诉用户下一步去系统设置里操作不然很多人复制完就蒙了。4.3 二维码展示与系统相机扫码标准 WIFI:// 格式才是关键后端/api/qrcode/id返回的图片内容严格遵循WIFI:T:WPA;S:ssid;P:password;;格式。这个格式是手机系统通用的不是某一家公司定的标准。iOS 从 iOS 11 开始系统相机扫到这种二维码就会弹出“加入个人局域网”的提示安卓各家 ROM 也都支持但部分国产机型要求用户手动点击通知栏里的提示。在开发阶段你可以用任意二维码解码 App 扫一下后端接口生成的图片确认解析出来是WIFI:T:WPA;S:...;P:...;;这样的字符串。如果解析结果是别的格式说明content拼错了。特别注意SSID或密码里带有分号或冒号时连接会失败处理办法是把这些特殊字符剔除或者限制 SSID 输入规则。5. 避坑指南共享Wi-Fi小程序最容易翻车的5个坑5.1 请求后端报“不在合法域名列表”模拟器正常真机打不开现象开发者工具里一切正常一到真机预览页面白屏控制台打印url not in domain list。原因微信小程序对wx.request的域名校验是强制性的模拟器里勾了跳过校验真机不认。而且微信明确要求域名必须 HTTPS不能是裸 IP。解决开发阶段坚持用工具跳过校验部署上线前把 Nginx 配置好 SSL在小程序后台把https开头的 API 域名加进 request 合法域名。注意域名不能带端口且必须是备案过的域名。5.2 复制密码后用户还是连不上以为小程序是坏的现象用户反馈“我复制了密码去设置里没有看到这个Wi-Fi”。原因复制密码只是第一步安卓系统在打开 Wi-Fi 列表时刷新有延迟尤其是路由器的 5G 频段没广播或者开启了隐藏网络时手动翻半天都搜不到。解决复制密码的弹窗里写明“如果搜索不到请在Wi-Fi设置中点击右上角添加隐藏网络输入SSID和密码”。另外在录入 Wi-Fi 信息时ssid字段不要带空格和特殊符号否则也容易出这种问题。5.3 二维码扫描结果是乱码或者扫了没反应现象用户用系统相机扫小程序里的二维码识别出来是一堆乱码或者根本没有任何反应。原因二维码内容没有按WIFI:T:WPA;S:...;P:...;;格式生成比如漏掉末尾的两个分号或者用了错误的加密标志。还有一个容易踩的坑后端返回的图片被微信previewImage压缩后二维码太模糊系统扫不出来。解决后端代码保持与上面一致末尾两个分号不能省。前端预览二维码时不要截图当前页面直接用image组件加载原图保证像素足够。如果 SSID 里有中文建议给二维码内容做 URL 编码不过老实说中文SSID兼容性本来就差最好在录入时就限制成英文。5.4 数据库里密码明文保存一次拖库全部泄露现象服务器被扫到端口数据库文件被下载所有Wi-Fi密码直接裸奔。原因开发图方便password字段直接存明文。共享Wi-Fi本身是给别人用的但密码所有权仍然属于网络所有者明文泄露会把信任关系彻底毁掉。解决按上文后端代码用 AES-CBC 加密存储密钥放在环境变量。即便数据库被拖走对方拿到的也是密文。另外给 Flask 加一个简单的 token 校验比如每个请求必须带X-Token头避免数据库里的记录被任意新增删除。5.5 小程序内扫码连不上用户直接骂街现象做之前以为用户会打开小程序扫一下二维码就能连结果扫码后没有任何提示。原因小程序内置的扫码能力wx.scanCode只能识别普通文本、链接、小程序码它不会主动调用系统 Wi-Fi 连接。就算识别出 WiFi 协议字符串也无法把该内容交给系统去发起连接。解决不在小程序里做“扫码连接”按钮。正确的用户路径是用系统相机扫小程序页面展示的二维码图片或者把二维码图片保存到相册再打开系统相机扫。界面上给用户明确的引导文案而不是让用户在小程序里瞎试。6. 验证与进阶上线前跑通这三步再开始把小程序发给朋友先别急着推广按下面三步验证一遍能省掉一半售后问题。第一步接口层验证。启动 Flask 后用curl http://127.0.0.1:5001/api/wifis确认返回合法 JSON。再curl -X POST -H Content-Type: application/json -d {ssid:Test, password:123456} http://127.0.0.1:5001/api/wifi新增一条记录然后重新拉列表确保解密后的 password 和输入一致。第二步真机多系统验证。准备一台安卓和一台 iPhone安卓下载体验版小程序复制密码后到系统设置里手动连接iPhone 直接用系统相机扫二维码。国产安卓机型最好多测两种华为和小米的扫码识别策略不一样个别机型需要用户自动弹出“加入网络”后手动确认。第三步异常数据验证。录入一条 SSID 含空格的记录一条密码长度超过20位的记录一条中文 SSID 的记录分别在安卓和 iPhone 上扫二维码。大概率会发现中文SSID连接失败率很高那就直接在上传表单里限制 SSID 只能输入字母数字下划线从源头掐掉问题。进阶方向有两个我强烈推荐。一是基于scan_count做排行给使用频率最高的 Wi-Fi 加一个“热门”标签提升用户留存二是加入“位置”查询用wx.getLocation拿到用户经纬度在后端比对location字段的文本距离实现“附近Wi-Fi”的效果。位置不需要很精确用文本匹配也能让用户体验上来。最后说句自己的教训我第一版没做 status 字段删除记录是物理 DELETE后来想恢复一条误删的 Wi-Fi 完全找不到数据。现在所有业务表都带状态位只做软删除。希望帮到你。本文还有配套的精品资源点击获取