基于 “测试号 + 本地Mock Server”方案的极其详细的初期开发搭建步骤
<p>以下是基于 <strong>“测试号 + 本地Mock Server”</strong> 方案的极其详细的初期开发搭建步骤。</p><p>我们将分为两大步：</p>
<ol>
<li><strong>搭建本地Mock Server（WebSocket服务器）</strong></li>
<li><strong>创建测试号小程序并开发</strong></li>
</ol>
<hr />
<h3>第一步：搭建本地Mock Server (WebSocket服务器)</h3>
<p>我们将使用 Node.js 和非常流行的 <code>ws</code> 库来快速搭建一个WebSocket服务器。这非常简单，即使你不是后端开发也能轻松完成。</p>
<h4>1. 安装 Node.js</h4>
<ul>
<li>如果尚未安装，请访问 Node.js 官网 下载并安装 LTS 版本。</li>
<li>安装完成后，打开命令行（终端、Command Prompt、PowerShell），输入 <code>node -v</code> 和 <code>npm -v</code> 检查是否安装成功。</li>
</ul>
<h4>2. 创建项目目录并初始化</h4>
<pre><code class="language-bash"># 在你喜欢的位置创建一个项目文件夹，例如 ‘iot-mock-server'
mkdir iot-mock-server
cd iot-mock-server
# 初始化一个新的Node.js项目，一路回车即可
npm init -y
</code></pre>
<h4>3. 安装依赖</h4>
<p>我们只需要 <code>ws</code> 库。</p>
<pre><code class="language-bash">npm install ws
</code></pre>
<h4>4. 创建服务器主文件</h4>
<p>在 <code>iot-mock-server</code> 文件夹中，创建一个名为 <code>server.js</code> 的文件。<br />
将以下代码复制粘贴进去，代码内有详细注释。</p>
<pre><code class="language-javascript">// 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(`✅ 你可以用微信开发者工具连接这个地址进行测试`);
});
</code></pre>
<h4>5. 启动Mock Server</h4>
<p>在命令行中，运行：</p>
<pre><code class="language-bash">node server.js
</code></pre>
<p>如果看到输出 <code>✅ Mock WebSocket 服务器已在 ws://localhost:8080 启动</code>，恭喜你！本地Mock服务器已经成功运行了。</p>
<p><strong>至此，你的“物联网平台”和“虚拟设备”就已经在本地准备好了。</strong> 它会：</p>
<ol>
<li>接受小程序的WebSocket连接。</li>
<li>每5秒自动生成一次模拟的温湿度数据并推送给所有连接的小程序。</li>
<li>接收小程序发来的控制灯开关的指令，并更新虚拟设备状态。</li>
</ol>
<hr />
<h3>第二步：创建测试号小程序并开发</h3>
<h4>1. 打开微信开发者工具并创建测试号项目</h4>
<ul>
<li>打开微信开发者工具。</li>
<li>点击“+”号创建新项目。</li>
<li><strong>项目名称：</strong> 比如 “IoT设备测试”</li>
<li><strong>目录：</strong> 选择你的代码存放路径</li>
<li><strong>AppID：</strong> <strong>至关重要！</strong> 点击下拉菜单，选择“<strong>测试号</strong>”。工具会自动填充一个测试号的AppID。</li>
<li>点击“新建”。</li>
</ul>
<h4>2. 编写小程序代码</h4>
<p>我们将创建一个简单的界面：显示温湿度、一个开关按钮。</p>
<p><strong>（1）修改 WXML 文件 (<code>index.wxml</code>)</strong></p>
<pre><code class="language-html"><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>
</code></pre>
<p><strong>（2）修改 JS 文件 (<code>index.js</code>)</strong><br />
这是核心逻辑，包括连接、收发消息。</p>
<pre><code class="language-javascript">// 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();
}
})
</code></pre>
<p><strong>（3）修改 WXSS 文件 (<code>index.wxss</code>)</strong> (可选，美化界面)</p>
<pre><code class="language-css">.container {
padding: 20rpx;
line-height: 2;
}
button {
margin: 20rpx 0;
}
</code></pre>
<h4>3. 关键配置：在开发者工具中开启“不校验合法域名”</h4>
<ul>
<li>由于你连接的是 <code>ws://localhost:8080</code>，这是一个非法的域名。</li>
<li>在微信开发者工具右上角，点击 <strong>“详情” -> “本地设置”</strong>。</li>
<li>勾选 <strong>“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”</strong>。</li>
<li><strong>这个选项仅在工具内生效，便于开发调试。</strong></li>
</ul>
<h4>4. 运行和测试</h4>
<ol>
<li>确保你的 <code>node server.js</code> 正在运行。</li>
<li>在微信开发者工具中，点击“编译”或保存代码自动刷新。</li>
<li>点击小程序页面上的 <strong>“连接服务器”</strong> 按钮。</li>
<li>你应该在开发者工具的Console和你的小程序界面上看到连接成功的日志。</li>
<li>稍等片刻，你会看到温度和湿度数据开始变化。</li>
<li>点击 <strong>“开关灯”</strong> 按钮，观察Mock Server的命令行窗口，你会看到它收到了 <code>{"lightSwitch":true}</code> 的指令并打印出日志。</li>
</ol>
<h3>总结</h3>
<p>至此，你已经成功搭建了一个<strong>完整的、本地化的物联网小程序模拟开发环境</strong>。你可以在完全不依赖腾讯云和正式小程序账号的情况下：</p>
<ul>
<li>✅ 开发小程序前端的所有界面和交互逻辑。</li>
<li>✅ 测试设备数据实时推送和展示。</li>
<li>✅ 测试小程序下发控制指令到“设备”。</li>
<li>✅ 在开发者工具和真机预览（需内网穿透）中进行充分测试。</li>
</ul>
<p>当你完成所有功能开发后，只需要将 <code>ws://localhost:8080</code> 替换为腾讯云IoT Explorer提供的真实WebSocket地址，并按照其协议调整消息格式，即可平滑迁移到生产环境。</p>
页:
[1]