用微信小程序写wifi数据采集器

发表于

为了采集龙头寺火车北站的wifi数据，临时学了点微信小程序开发


之前的方案是使用安卓手机进行数据采集，在中途调试过程当中出现了一点问题。后来临时决定使用小程序进行开发。

小程序开发和微信公众号一样，需要使用邮箱注册账号。然后定义为个人开发者之后，小程序的权限很低。（吐槽一下）小程序和H5前端开发很类似，有一样的一套模板。WXML等同于HTML，WXSS等同于CSS，然后也是用JS来控制逻辑。所以基本上等于移动端上的前端开发。

JSON在小程序中作为数据传输的标准格式。整个微信的启动如下：”微信客户端会先根据 logs.json 配置生成一个界面，顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装载这个页面的 WXML 结构和 WXSS 样式。最后客户端会装载 logs.js”，简单说来，小程序分为逻辑+视图的模块，逻辑块由JS操作，绑定数据，功能开发都是逻辑部分。框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。组件和H5当中的组件类似，参考微信开发指南进行选择并绑定逻辑。

因为开发功能十分简单：利用手机读取WIFI数据，将WIFI数据写入数据库即可。按照模板修改后大概界面如下

数据采集之后，利用小程序云开发的功能，将数据存储在云端。云开发自动构建了NoSQL数据库以供存放数据。小程序数据的绑定方法和之前写的前端方式不太像，有点类似与VUE的MVVM模式。

1
2
3
4
5
6
7
8
9
10
11
data: {
 startError: '',//初始化错误提示
 wifiListError: false, //wifi列表错误显示开关
 wifiListErrorInfo: '',//wifi列表错误详细
 system: '', //版本号
 platform: '', //系统 android
 ssid: 'wifi帐号',//wifi帐号(必填)
 pass: 'wifi密码',//无线网密码(必填)
 bssid: '',//设备号 自动获取
 endError: '',//连接最后的提示
}

将所有数据变量放入JS中，HTML只负责样式和布局，所有的功能也同步封装到JS下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
formSubmit: function (e) {
    const db = wx.cloud.database()
    console.log(this.location);
    if(isNaN(this.location)||this.location==''){
      wx.showToast({
        icon: 'none',
        title: '新增记录失败'
      })
    }else{
      db.collection('wifi_database').add({
        data: {
          // openid: _this.data.openid,
          loc: this.location,
          wifilist: this.data.array,
          floor:this.floor
        },
        success:res =>{
          wx.showToast({
            title: '新增记录成功',
          })
          console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '新增记录失败'
          })
          console.error('[数据库] [新增记录] 失败：', err)
        }
      })
    }
  },

完成之后，将代码上传即可进行发布，但是需要审核才能正式通用。

总之，开发的功能十分简单，也算了解一下微信小程序的开发模式，顺便采集了wifi数据。安卓的大部分功能都可以转移到微信小程序上来进行开发。这也算一个方便的做法了吧。