基于W601实现网页版IAP

目录

简介

页面展示

PC端

移动端

准备工作

硬件

软件

前端源码

后端源码（已包含Web）

IDE

起步

---

简介

前段时间基于W601开发板做了个小项目放在家中运行，由于正常运行过程中会出现一些问题需要修改代码并且更新程序，而原来的程序更新需要串口或者仿真器，并且由于其实现的功能需要在运行过程中将W601放在固定的位置，这样一旦需要更新程序还得移动其位置，非常不方便，因此就想到做一个在线升级方案。

考虑到之前项目中经常会用到 Web 来更新固件，因此可以借助于之前开源的前端页面 Upload Tool (无法访问点此进入国内站点)来实现本次的在线升级功能。

Upload Tool 本质是一个具备文件上传功能的网页版小工具，该工具目前实现了以下一些前端功能：

• 固件上传 【本项目会用到】
• 文件上传
• 文件夹上传
• 文件校验
• 清空存储
• 存储用量
• 版本号显示 【本项目会用到】

由于前端只是界面的呈现与交互，所以大部分功能（如文件操作）都需要后端有对应的逻辑驱动，而使用者可能并不需要用到所有功能，当然也就没有必要实现所有的后端逻辑。Upload Tool具备功能可选特性，使用者可以根据需要使能或隐藏某些功能。后端只需实现使能的功能逻辑即可。并且该前端页面对移动端也进行了适配，即使使用手机或平板也能获得比较好的交互体验。

在本项目中我们的目的是实现固件升级，因此也就仅需实现固件上传与版本号显示（用于判断固件是否更新成功）功能。

页面展示

PC端

移动端

准备工作

硬件

1. 正点原子W601开发板
2. 可用的 WIFI 环境（W601通过WIFI联网）

软件

前端源码

使用者可以基于该源码修改Web，如果不需要修改，则无需前端源码，前端数据已经内置在后端源码中，直接下载后端源码编译下载即可。

1. Github
2. Gitee（国内访问推荐）

后端源码（已包含Web）

1. Github
2. Gitee （国内访问推荐）

IDE

本文会使用 RT-Thread Studio 做演示，项目本身会包含 MDK 和 IAR 的工程文件，可以按照自身的开发环境自行选择。

起步

首先从上文源码地址中下载后端源码并将其导入到 RT-Thread Studio 中。（选择导入MDK项目到工作空间中，导入帮助）

导入完成后直接编译并下载到开发板。

确保开发板能够连接WIFI，若WIFI还没有连接，则可以在命令行中输入指令:

wifi join + wifi名 + 密码

实现连接。

 连接成功后会在控制台打印出当前板子的IP地址，也可以手动输入 ifconfig 命令进行查看。

此时即可使用电脑或者手机打开浏览器，输入板子的IP地址，进入到 Upload Tool 页面中：

由于后端实现了固件上传和版本号显示功能，因此 Type 会一栏会有 firmware 选项，同时 Device Version 栏中会显示我们当前软件的版本号。

此时 Upload Tool 就已经可以正常运行了，当我们的程序进行了修改以后，无需通过串口或仿真器，直接编译好代码并通过网页上传就可实现固件的升级。

需要注意的是，该 DEMO 中支持的固件为 rbl 格式，也是 W601_IOT_Board 这个 SDK 的官方版本，而在使用 Upload Tool 时可以上传任意格式，只要后端做好处理即可。

功能搭建完成后我们就可以来试一下固件升级是否真的有效。我们打开工程目录下的 Modules > wn_cgi.c 文件，将宏定义 VERSION 值改为 V1.0.2：

修改完成后编译，注意不要下载。

编译成功后会在工程路径下的 Bin 目录下生成 rtthread.rbl 文件。

此时打开网页，点击 Choose firmware 并选择 rtthread.rbl 文件。选择成功后可以看到 Upload Tool 面板上显示了文件名以及大小并且原先被禁用的 UPLOAD 按钮也变为可点击状态：

点击 UPLOAD 按钮进行固件上传。

上传成功后页面会有 firmware uploading success 提示语，此时W601会自动进入固件升级状态，我们需要等待一段时间。（此时由于W601已断开网页连接进行固件升级操作，所以页面操作将不会被后端响应）固件升级过程中控制台也会输出响应的升级状态： 

升级成功后可刷新页面，可以发现此时版本号已从原来的 V1.0.1 变成了我们修改后的 V1.0.2，此时也验证了固件升级功能是没有问题的。

至此我们的例程就已经介绍完毕。感兴趣的朋友可以下载源码研究下，后端实现的具体分析在文下链接：

---------------------------------------------------------------------------------------------------------------------------------

基于W601实现网页版IAP（实践分析）