之十-呕血制作-Lettuce IOT框架-移远BC35G+树莓派+华为OC+SpringBoot后台+微信小程序

上一篇主要讲的是lettuce-Sea设备端，华为OC平台，lettuce-Air服务端的联调而这一篇将要讲微信小程序项目的创建以及lettuce-Land客户端的实现原理以及代码解析。

lettuce-Land客户端微信小程序代码讲解

微信小程序的兴起对于物联网来说是一大喜事，因为可以使用小程序快速的对设备进行操作。也不需要笨重的应用。因此轻便的小程序便成为了物联网客户端的首选。

这节课我们需要一个小程序账号，如果有账号的可以直接进行开发，没有账号的需要注册一个。在微信公众平台首页，选择注册一个小程序，选择一个个人账号注册即可。
注册成功以后就进入这个页面

因为我们只用于调试，因此我以我的经验，给出最快的开发小程序的方式。

首先，首页的什么填写小程序信息，添加开发者之类，不用理会，直接进入开发，选择开发设置，复制APPID出来。OK，小程序后台不用理会了。

把代码拉到本地来

lettuce-Land的源代码
https://github.com/lipuqi/lettuce-Land

现在你还需要一个小程序专用的IDE
工具最新下载地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装完成以后，打开工具。
首先需要扫个码登录一下

在这里点击那个加号新建一个项目
之后会进到一个填写项目信息的页面
点击右上方那个导入项目

之后

1. 给项目起个名字
2. 选择git导入的那个文件夹
   
3. 把刚才从小程序后台复制的那个appid填进去
4. 点击导入

这时，我们就可以看到这个开发页面了

此时还需要勾选一个配置项

把不校验那个选上。

lettuce-Land端代码讲解

客户端代码少的可怜，与你有关的只有两个地方。

1. 首页
2. 地址管理

首页主要为4个文件（小程序每一个页面都需要有这4个类型的文件）
js 逻辑文件
json 页面配置文件
wxml 页面文件
wxss 样式文件

与你有关的就js 和 wxml
wxml就类似于H5，这里不再赘述。

<!--index.wxml-->
  <view class="deviceStatus" style="margin-left: 30px;">
    <image src='../image/un_online.png' style='width:30px;height:30px;float:left;margin-top: 34px;margin-left:20px;' hidden='{{online == 1}}'></image>
    <image src='../image/online.png' style='width:30px;height:30px;float:left;margin-top: 34px;margin-left:20px;' hidden='{{online == 0}}'></image>
  </view>
<view class="container" style="clear: both;">
  <view class="bulb">
    <image src='../image/un_bulb.png' style='width:150px;height:150px;' hidden='{{bulb == 1}}' data-value="1" bindtap='switchBulb'></image>
    <image src='../image/bulb.png' style='width:150px;height:150px;' hidden='{{bulb == 0}}' data-value="0" bindtap='switchBulb'></image>
  </view>
  <view class="unOnline" style="margin-top:150px;">
    <button type="warn" bindtap='quit'>设备下线</button>
  </view>
</view>

js
把想在页面访问到的参数写在page的data中，H5直接使用{{}}就可以访问到

  data: {
    online: 0,//系统状态
    bulb: 0//灯状态
  },

把想在页面访问的函数写在page里，这样前台可以使用一个点击事件触发响应函数。

其中首页的函数就3个
一个是内置函数show，这个函数会在小程序首页出现时加载，通俗的将。你只要打开这个页面，就会运行一次show函数。函数里带有查询系统状态和灯状态的访问服务端接口的封装方法。

 onShow() {
    var that = this;
    showBusyLoading("初始化中");
    //获取系统状态
    app.get(url.api.operationPiStatusUrl).then(function(res) {
      that.setData({
        online: Number(res.datas)
      }, function() {
        //获取灯的状态
        app.get(url.api.bulbStatusUrl).then(function(res) {
          that.setData({
            bulb: Number(res.datas)
          })
          wx.hideToast();
        }).catch(function (error) {
          console.log("获取灯的状态出现异常" + error)
          wx.hideToast();
        });
      })
    }).catch(function (error) {
      console.log("获取设备的状态出现异常" + error)
      wx.hideToast();
    });
  },

还有2个就是当用户对灯操作或按下设备下线按钮时触发。主要是访问服务端的命令调用接口。

    /**
   * 对灯的操作
   */
  switchBulb(e) {
    var that = this;
    let value = Number(e.currentTarget.dataset.value)
    let bulbUrl = url.api.sendCommandUrl + "?method=ON_OFF&value=" + value
    showBusyLoading("执行中");
    app.get(bulbUrl).then(function (res) {
      that.setData({
        bulb: value
      },function(){
        wx.hideToast();
        showBusySuccess("执行成功")
      })
    }).catch(function (error) {
      console.log("发送灯操作指令出现异常" + error)
      wx.hideToast();
    });
  },

  /**
   * 设备下线处理
   */
  quit() {
    var that = this;
    let quitUrl = url.api.sendCommandUrl + "?method=QUIT_PYTHON&value=1"
    showBusyLoading("执行中");
    app.get(quitUrl).then(function (res) {
      that.setData({
        online: 0
      }, function () {
        wx.hideToast();
        showBusySuccess("执行成功")
      })
    }).catch(function (error) {
      console.log("发送下线操作指令出现异常" + error)
      wx.hideToast();
    });
  }

还有一个地方，地址管理。

const host = 'http://xxx.xxx.xxx.xxx:8013';

var urlConfig = {
  host,
  /**
   * 开发接口
   */
  api: {
    host,
    //获取灯的状态
    bulbStatusUrl: `${host}/app/getBulbStatus`,
    //获取设备的状态
    operationPiStatusUrl: `${host}/app/getOperationPiStatus`,
    //发送指令
    sendCommandUrl: `${host}/app/sendCommand`
  }

};

module.exports = urlConfig;

然后就是编译一下，看一下控制台是否有错误

下面那个错误很正常，因为你的服务端没开，所以接口访问不到，不用理会。

如果没有其他错误，就可以上传至体验版了。

这里随意

上传成功以后，这节课就结束了。

在这个程序里面还封装了一些方法，大家有兴趣可以专研一下。

下节课我会给大家讲解lettuce IoT框架整体联调，这就是最终BOSS了！

欢迎加入我们的QQ群一起讨论IOT的问题。