企业官网建设流程全解析

Streamlit MVP：局域网访问 + Ngrok 公网穿透 综合操作手册

适用： MVP项目，本地v11.py，端口 8501；局域网用于同 WiFi 手机快速测试；Ngrok 公网 HTTPS 用于微信小程序 web-view前置条件：Python 环境正常，streamlit run v11.py本地127.0.0.1:8501可打开

一、启动 Streamlit 服务（固定命令，局域网 / 公网共用这个服务）

打开普通 PowerShell（非管理员），进入项目目录

powershell

cd F:\MVP\tourguideMVP\v3 streamlit run v11.py --server.address 0.0.0.0 --server.port 8501

• --server.address 0.0.0.0：允许局域网内其他设备连接本机端口（关键参数，只写 127.0.0.1 则只能本机访问）
• 保持这个窗口全程不要关闭，关闭服务立刻停止

✅ 验证端口监听（新开 PowerShell 执行）

powershell

netstat -ano | findstr :8501

出现TCP 0.0.0.0:8501 LISTENING→ 服务就绪

二、局域网访问配置（同 WiFi 手机 / 电脑访问，仅内网可用，小程序不能直接用内网 IP）

步骤 1：Windows 防火墙放行 8501 端口（入站规则）

方式 1｜图形界面（推荐，规避管理员权限报错）

1. Win 搜索Windows Defender防火墙→ 高级设置 →入站规则→ 新建规则
2. 类型：端口 → TCP → 特定本地端口：8501
3. 操作：允许连接
4. 配置文件：域、专用、公网全部勾选
5. 名称：Streamlit-8501，完成

方式 2｜管理员 PowerShell 命令

右键开始菜单 → Windows PowerShell (管理员)，UAC 点是，执行：

powershell

New-NetFirewallRule -DisplayName "Streamlit-8501" -Direction Inbound -LocalPort 8501 -Protocol TCP -Action Allow

步骤 2：获取本机局域网 IP

powershell

ipconfig

找到WLAN 无线网卡下的IPv4地址（是第一个），示例：192.168.1.106

步骤 3：局域网访问地址

• 电脑局域网访问：http://192.168.1.106:8501
• 手机：连接同一个 WiFi，打开手机自带浏览器，输入上面地址

❗注意：微信内置浏览器 / 夸克会拦截内网地址，手机测试用系统自带浏览器。 ⚠️ 限制：内网 IP只能在同一个 WiFi 下使用，外网 / 微信小程序 web-view 无法访问内网地址，小程序必须公网 HTTPS 链接。

三、Ngrok 公网穿透（生成 HTTPS 公网地址，用于微信小程序 web-view）

作用：把本地 8501 端口暴露到公网，自动生成 HTTPS 链接，满足小程序 web-view 强制 HTTPS 要求 前置：下载 ngrok，把 ngrok.exe 放到项目目录，注册 ngrok 账号，配置 authtoken

1. 一次性配置 authtoken（只需要做一次）

powershell

ngrok config add-authtoken 【你的ngrok授权令牌】

2. 新开独立 PowerShell 窗口（⚠️不要关掉 streamlit 那个窗口！）

进入项目目录，执行穿透命令

powershell

cd 项目目录 ngrok http 8501

启动成功后控制台会输出类似内容：

plaintext

Forwarding https://abc123.ngrok.io -> http://localhost:8501

• https://abc123.ngrok.io就是小程序 web-view 要用的公网 HTTPS 地址
• 两个窗口都必须保持打开：①streamlit 窗口；②ngrok 窗口，任意关闭一个，公网链接失效

Ngrok 重要限制（小程序开发必看）

1. 免费版 ngrok 域名每次重启都会变；如果长期使用，需要付费固定子域名
2. 免费版带宽、并发有限，适合 MVP 原型测试，不适合正式上线交付客户
3. 小程序后台【开发管理 - 开发设置 - 业务域名】需要添加 ngrok 域名，否则 web-view 打不开

四、两套环境快速切换使用说明

表格

五、小程序 web-view 基础代码片段（微信开发者工具）

wxml

<web-view src="https://abc123.ngrok.io"></web-view>

配套操作：微信小程序后台，业务域名填入 ngrok 域名，校验域名。

六、故障排查清单

1. 局域网打不开：检查防火墙入站规则、电脑手机同 WiFi、streamlit 启动参数--server.address 0.0.0.0
2. ngrok 页面打不开：确认 streamlit 窗口存活；检查本地 127.0.0.1:8501 可访问
3. 小程序 web-view 空白：①域名没加到小程序业务域名；②http 协议不行，必须 ngrok 的 https 链接

七、后续升级路线（MVP 商业化备选）

Ngrok 仅适合原型测试；正式上线方案：把 v11 部署到云服务器（阿里云 / 腾讯云），安装 streamlit+docker，云服务器开放 8501，配置域名 + SSL 证书，获得永久 HTTPS 地址，替代 ngrok 临时隧道。