以下是基于 “测试号 + 本地Mock Server” 方案的极其详细的初期开发搭建步骤。
我们将分为两大步：
- 搭建本地Mock Server（WebSocket服务器）
- 创建测试号小程序并开发
第一步：搭建本地Mock Server (WebSocket服务器)
我们将使用 Node.js 和非常流行的 ws 库来快速搭建一个WebSocket服务器。这非常简单，即使你不是后端开发也能轻松完成。
1. 安装 Node.js
- 如果尚未安装，请访问 Node.js 官网 下载并安装 LTS 版本。
- 安装完成后，打开命令行（终端、Command Prompt、PowerShell），输入
node -v 和 npm -v 检查是否安装成功。
2. 创建项目目录并初始化
# 在你喜欢的位置创建一个项目文件夹，例如 ‘iot-mock-server'
mkdir iot-mock-server
cd iot-mock-server
# 初始化一个新的Node.js项目，一路回车即可
npm init -y
3. 安装依赖
我们只需要 ws 库。
npm install ws
4. 创建服务器主文件
在 iot-mock-server 文件夹中，创建一个名为 server.js 的文件。
将以下代码复制粘贴进去，代码内有详细注释。
// server.js
const WebSocket = require('ws');
const http = require('http');
// 创建一个HTTP服务器（WebSocket服务会附加在这个服务器上）
const server = http.createServer();
const wss = new WebSocket.Server({ server });
// 存储所有连接的客户端（例如多个小程序页面）
const clients = new Set();
// 模拟设备状态
let virtualDeviceState = {
temperature: 25,
humidity: 60,
lightSwitch: false
};
// 当有WebSocket连接建立时
wss.on('connection', function connection(ws) {
console.log('一个新的小程序客户端连接成功');
clients.add(ws); // 将新连接加入客户端集合
// 立即向新连接的小程序发送一次当前的设备状态
ws.send(JSON.stringify({
type: 'status',
data: virtualDeviceState
}));
// 定时向所有连接的小程序发送模拟数据（模拟设备上报）
const dataInterval = setInterval(() => {
// 随机改变温度和湿度数据
virtualDeviceState.temperature = (20 + (Math.random() * 10)).toFixed(1);
virtualDeviceState.humidity = (50 + (Math.random() * 20)).toFixed(0);
// 构建要发送的消息
const message = JSON.stringify({
type: 'report', // 消息类型：设备上报
data: {
temperature: virtualDeviceState.temperature,
humidity: virtualDeviceState.humidity
},
timestamp: Date.now()
});
// 广播给所有连接的小程序客户端
clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
console.log('已向客户端发送模拟数据: ', message);
}
});
}, 5000); // 每5秒发送一次
// 当收到来自小程序的消息时（如下发控制指令）
ws.on('message', function incoming(message) {
console.log('收到来自客户端的消息: %s', message);
try {
const parsedMsg = JSON.parse(message);
// 判断消息类型是否为控制指令
if (parsedMsg.type === 'control' && parsedMsg.data) {
// 更新虚拟设备状态
if (parsedMsg.data.lightSwitch !== undefined) {
virtualDeviceState.lightSwitch = parsedMsg.data.lightSwitch;
console.log(`虚拟设备开关状态已更新为: ${virtualDeviceState.lightSwitch ? '开启' : '关闭'}`);
// 可以在这里广播状态更新给所有小程序
clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({
type: 'status',
data: virtualDeviceState
}));
}
});
}
}
} catch (error) {
console.error('解析客户端消息出错:', error);
}
});
// 当连接关闭时
ws.on('close', function close() {
console.log('一个客户端断开连接');
clients.delete(ws); // 从客户端集合中移除
clearInterval(dataInterval); // 清理这个连接对应的定时器
});
});
// 启动服务器，监听8080端口
const PORT = 8080;
server.listen(PORT, () => {
console.log(`✅ Mock WebSocket 服务器已在 ws://localhost:${PORT} 启动`);
console.log(`✅ 你可以用微信开发者工具连接这个地址进行测试`);
});
5. 启动Mock Server
在命令行中，运行：
node server.js
如果看到输出 ✅ Mock WebSocket 服务器已在 ws://localhost:8080 启动，恭喜你！本地Mock服务器已经成功运行了。
至此，你的“物联网平台”和“虚拟设备”就已经在本地准备好了。 它会：
- 接受小程序的WebSocket连接。
- 每5秒自动生成一次模拟的温湿度数据并推送给所有连接的小程序。
- 接收小程序发来的控制灯开关的指令，并更新虚拟设备状态。
第二步：创建测试号小程序并开发
1. 打开微信开发者工具并创建测试号项目
- 打开微信开发者工具。
- 点击“+”号创建新项目。
- 项目名称： 比如 “IoT设备测试”
- 目录： 选择你的代码存放路径
- AppID： 至关重要！ 点击下拉菜单，选择“测试号”。工具会自动填充一个测试号的AppID。
- 点击“新建”。
2. 编写小程序代码
我们将创建一个简单的界面：显示温湿度、一个开关按钮。
（1）修改 WXML 文件 (index.wxml)
<view class="container">
<text>设备状态</text>
<view>温度: {{temperature}} °C</view>
<view>湿度: {{humidity}} %</view>
<view>灯: {{lightSwitch ? '开启' : '关闭'}}</view>
<button type="primary" bindtap="toggleLight">开关灯</button>
<button bindtap="connectWS">连接服务器</button>
<button bindtap="closeWS">断开连接</button>
<view>连接状态: {{connected ? '已连接' : '未连接'}}</view>
<view>{{log}}</view>
</view>
（2）修改 JS 文件 (index.js)
这是核心逻辑，包括连接、收发消息。
// index.js
Page({
data: {
temperature: '--',
humidity: '--',
lightSwitch: false,
connected: false,
socketTask: null,
log: ''
},
onLoad() {
this.addLog('小程序启动，点击“连接服务器”开始模拟测试');
},
// 添加日志
addLog(msg) {
this.setData({
log: `${new Date().toLocaleTimeString()}: ${msg}\n` + this.data.log
});
console.log(msg);
},
// 连接WebSocket服务器
connectWS() {
this.addLog('尝试连接本地服务器...');
// 注意：这里是你的本地地址，真机调试时需要改为本机IP或公网IP
const socketTask = wx.connectSocket({
url: 'ws://localhost:8080',
fail: (err) => {
this.addLog('连接失败: ' + err.errMsg);
}
});
this.setData({ socketTask });
socketTask.onOpen(() => {
this.addLog('WebSocket连接已建立！');
this.setData({ connected: true });
});
socketTask.onMessage((res) => {
this.addLog('收到服务器消息: ' + res.data);
try {
const msg = JSON.parse(res.data);
if (msg.type === 'report') { // 处理设备上报数据
this.setData({
temperature: msg.data.temperature,
humidity: msg.data.humidity
});
} else if (msg.type === 'status') { // 处理全量状态数据
this.setData({
...msg.data
});
}
} catch (e) {
console.error('解析消息错误', e);
}
});
socketTask.onClose(() => {
this.addLog('WebSocket连接已关闭！');
this.setData({ connected: false });
});
socketTask.onError((err) => {
this.addLog('WebSocket发生错误: ', err);
this.setData({ connected: false });
});
},
// 断开连接
closeWS() {
if (this.data.socketTask) {
this.data.socketTask.close();
}
},
// 发送控制指令
toggleLight() {
if (!this.data.connected) {
this.addLog('未连接，无法发送指令');
return;
}
const newState = !this.data.lightSwitch;
const controlMsg = {
type: 'control',
data: {
lightSwitch: newState
},
timestamp: Date.now()
};
this.data.socketTask.send({
data: JSON.stringify(controlMsg),
success: () => {
this.addLog(`指令发送成功: 开关 ${newState ? '开启' : '关闭'}`);
// 注意：这里先乐观更新UI，实际等服务器确认后再更新更稳妥
// this.setData({ lightSwitch: newState });
},
fail: (err) => {
this.addLog('指令发送失败: ' + err.errMsg);
}
});
},
onUnload() {
// 页面卸载时关闭连接
this.closeWS();
}
})
（3）修改 WXSS 文件 (index.wxss) (可选，美化界面)
.container {
padding: 20rpx;
line-height: 2;
}
button {
margin: 20rpx 0;
}
3. 关键配置：在开发者工具中开启“不校验合法域名”
- 由于你连接的是
ws://localhost:8080，这是一个非法的域名。
- 在微信开发者工具右上角，点击 “详情” -> “本地设置”。
- 勾选 “不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”。
- 这个选项仅在工具内生效，便于开发调试。
4. 运行和测试
- 确保你的
node server.js 正在运行。
- 在微信开发者工具中，点击“编译”或保存代码自动刷新。
- 点击小程序页面上的 “连接服务器” 按钮。
- 你应该在开发者工具的Console和你的小程序界面上看到连接成功的日志。
- 稍等片刻，你会看到温度和湿度数据开始变化。
- 点击 “开关灯” 按钮，观察Mock Server的命令行窗口，你会看到它收到了
{"lightSwitch":true} 的指令并打印出日志。
总结
至此，你已经成功搭建了一个完整的、本地化的物联网小程序模拟开发环境。你可以在完全不依赖腾讯云和正式小程序账号的情况下：
- ✅ 开发小程序前端的所有界面和交互逻辑。
- ✅ 测试设备数据实时推送和展示。
- ✅ 测试小程序下发控制指令到“设备”。
- ✅ 在开发者工具和真机预览（需内网穿透）中进行充分测试。
当你完成所有功能开发后，只需要将 ws://localhost:8080 替换为腾讯云IoT Explorer提供的真实WebSocket地址，并按照其协议调整消息格式，即可平滑迁移到生产环境。
