智慧农业_微信小程序端-Toy模板网

这篇具有很好参考价值的文章主要介绍了智慧农业_微信小程序端。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

很多学生毕设采用智慧农业，在这里给大家分享一下微信小程序采用UDP协议远程控制相关硬件设备的项目

主要实现功能：

1. 远程控制相关设备

2. 远程检测传感器相关数据

资源下载：【免费】智慧农业-微信小程序端UDP控制资源-CSDN文库

本项目主要使用三个页面工程：

list：主页

control：控制相关设备的工程文件

environment: 检测环境的工程文件

每个文件中，都含有：

.js文件：用于实现一些复杂的逻辑功能；

.json文件: 用于配置小程序的窗口背景色、导航条样式等界面表现；

.wxml文件：用于配置页面的结构，样式；

.wxss文件：用于设置小程序的页面样式；

下面将相关代码分享如下：

注：因本项目用了外接库，代码仅供参考，具体资源需要前往上方的资源下载

全局配置文件：

app.js：

主要是定义了全局变量 g_value，保证所有页面采用同一个变量，共同配置

// app.js
App({
    // 全局变量 该工程下任何文件夹内都可以使用这两个变量
    g_value: {
    IP: '192.168.1.44',
    PORT: 7788,
    udp: 0,
    },
    

  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

app.json：

定义了页面的主路径

{
  "pages": [
    "pages/list/list",
    "pages/environment/env",
    "pages/myself/self",
    "pages/control/control"
  ],
  "window": {

  },
  
 "tabBar": {
    "list": [
      {
        "pagePath": "pages/list/list",
        "text": "主页",
        "iconPath": "/images/主页.png",
        "selectedIconPath": "/images/主页ok.png"
      },
      {
        "pagePath": "pages/myself/self",
        "text":"关于",
        "iconPath": "/images/个人.png",
        "selectedIconPath": "/images/个人ok.png"
      }
    ]
 },
 "usingComponents": {
  "van-button": "miniprogram/miniprogram_npm/@vant/weapp/button/index",
  "van-notice-bar": "miniprogram/miniprogram_npm/@vant/weapp/notice-bar/index",
  "van-progress": "miniprogram/miniprogram_npm/@vant/weapp/progress/index",
  "van-circle": "miniprogram/miniprogram_npm/@vant/weapp/circle/index",
  "van-slider": "miniprogram/miniprogram_npm/@vant/weapp/slider/index",
  "van-field": "miniprogram/miniprogram_npm/@vant/weapp/field/index",
  "van-steps": "miniprogram/miniprogram_npm/@vant/weapp/steps/index"
},

  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"

}

list工程文件(首页):

list.js

配置 list工程的逻辑实现

   // pages/list/list.js
Page({
  /**
     * 查看相关环境 跳转
     */
    env: function(param){
        wx.navigateTo({
          url: '../environment/env',
        })
    },

    con: function(param){
      wx.navigateTo({
        url: '../control/control',
      })
  },
   
  /* IP地址输入框 
     detail 是一个事件对象, 包含了触发事件的详细信息
   */
  onChange_setCarIP(res) {
      let appinstance = getApp();
      appinstance.g_value.IP = res.detail;
      console.log(appinstance.g_value.IP);
  },

    /**
     * 页面的初始数据
     */
    data: {
      
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

list.json

主要用于配置导航栏属性

{
    "navigationBarTitleText": "智慧农业",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#77FF00",
    "navigationBarTextStyle": "black",
    "navigationStyle": "default"
}

list.wxml

主页页面的样式信息

<van-notice-bar left-icon="volume-o" scrollable text="注意：先执行控制相关设备, 将IP地址录入成功并下达控制相关指令后, 再执行检测环境变量" color="red;"/>

<!-- 预览图 每隔两秒进行反转,最后一张图结束会从第一张图开始 -->
<swiper indicator-dots autoplay interval = "2000" circular="true">
<swiper-item>
  <image src="/images/shanke.jpg"></image>
</swiper-item>

<swiper-item>
  <image src="/images/shanke2.jpg"></image>
</swiper-item>

<swiper-item>
  <image src="/images/nongye2.jpg"></image>
</swiper-item>

<swiper-item>
  <image src="/images/nongye3.jpg"></image>
</swiper-item>

<swiper-item>
  <image src="/images/nongye1.jpg"></image>
</swiper-item>
</swiper>

<rich-text class="text" nodes="<h1 style='color: green;'>兴安生态农场</h1>"></rich-text>

<!-- view 视图 居中显示 -->
<view style="margin: auto; display: flex; justify-content: center;">
  <!-- 自定义的单元格标签： -->
    <van-cell-group>
    <!--van-field：输入框 placeholder：默认显示的内容    left-icon：在左边设置上下箭头图标 border：显示内边框  maxlength=：最大输入的长度  error：错误提示 -->
      <van-field placeholder="请输入对方的IP地址" left-icon="sort" border="true" clickable="true" maxlength="15" error="true" bind:change="onChange_setCarIP" />
    </van-cell-group>
  </view>

<!-- 按钮 -->
<button bindtap="con">控制相关设备</button>
<button bindtap="env">检测环境变量</button>

list.wxss

主要用于配置页面样式信息的属性


swiper{
    width:100%;
    height:200px;
}
image{
    width: 100%;
}

.text{
    /* 字体大小 */
    font-size:  20px;
    /* 字体颜色 */
    color: red;
    /* 字体风格 - 粗细 */
    font-weight: bold;
   
    text-indent: 4em;

}
button{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
    padding: 0rpx;
    width: 200rpx;
    height: 90rpx;
    background-color:green;
    border-radius: 98rpx;
    color:whitesmoke;
}

.custom-text{
   background: chartreuse;
  }

control工程文件（控制相关设备）：

control.js

配置 control工程的逻辑实现

var appinstance = getApp();

Page({  
    // 变量
  data: {
      MutexOnImage: '/images/锁off.png',
      lightOnImage: '/images/灯泡off.png',
      FANOnImage: '/images/风扇off.png',
      IrrOnImage: '/images/喷淋off.png'
  },
   // 该函数 主要实现, 当运行时,根据每次三元运算的结果, 不断变换图片并采用UDP发送不同的数据
  onbutton_light_start: function() {
    const imageList = ['/images/灯泡off.png', '/images/灯泡on.png'];
    const index = (this.data.lightOnImage === imageList[0]) ? 1 : 0;
    this.setData({
        lightOnImage: imageList[index]
    });
    if(index === 1)
    {
    appinstance.g_value.udp.send({
        address: appinstance.g_value.IP,
        port: appinstance.g_value.PORT,
        message: '{"light":"on"}'
      })
      console.log('light on');
    }
    else
    {
        appinstance.g_value.udp.send({
            address: appinstance.g_value.IP,
            port: appinstance.g_value.PORT,
            message: '{"light":"off"}'
          })
          console.log('light off');
    }
  },
  
// 该函数 主要实现, 当运行时,根据每次三元运算的结果, 不断变换图片并采用UDP发送不同的数据
  onbutton_fan_start: function() {
    const imageList = ['/images/风扇off.png', '/images/风扇on.png'];
    const index = (this.data.FANOnImage === imageList[0]) ? 1 : 0;
    this.setData({
        FANOnImage: imageList[index]
    });

    if(index === 1)
    {
    appinstance.g_value.udp.send({
        address: appinstance.g_value.IP,
        port: appinstance.g_value.PORT,
        message: '{"fan":"on"}'
      })
      console.log('fan on');
    }
    else
    {
    appinstance.g_value.udp.send({
            address: appinstance.g_value.IP,
            port: appinstance.g_value.PORT,
            message: '{"fan":"off"}'
          })
          console.log('fan off');
    }
  },

  onbutton_irrigate_start: function() {
    const imageList = ['/images/喷淋off.png', '/images/喷淋on.png'];
    const index = (this.data.IrrOnImage === imageList[0]) ? 1 : 0;
    this.setData({
        IrrOnImage: imageList[index]
    });
    
    if(index === 1)
    {
    appinstance.g_value.udp.send({
        address: appinstance.g_value.IP,
        port: appinstance.g_value.PORT,
        message: '{"irrigate":"on"}'
      })
      console.log('irr on');
    }
    else
    {
        appinstance.g_value.udp.send({
            address: appinstance.g_value.IP,
            port: appinstance.g_value.PORT,
            message: '{"irrigate":"off"}'
          })
          console.log('irr off');
    }
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    appinstance.g_value.udp = wx.createUDPSocket(); // 创建UDP Socket实例
    appinstance.g_value.udp.bind();   // udp绑定本机
    console.log('bind is ok');
  },

});

control.json：

主要用于配置导航栏属性

{
        "navigationBarTitleText": "控制相关设备",
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#77FF00",
        "navigationBarTextStyle": "black",
        "navigationStyle": "default"
}

control.wxml:

control页面的布局 (控制相关设备页面)

<!-- 视图 -->
<view class="control-root">
  <!-- 配置视图的布局 -->
  <view class="control-2" style="font-size: 20px;" bindtouchstart="onbutton_light_start">
    <image src="{{lightOnImage}}" mode="aspectFit" style="width: 110px; height: 110px; margin-right: 10px;"></image>
    <text style="margin: auto;">开/关灯</text>
  </view>

  <view class="control-3" style="font-size: 20px;" bindtouchstart="onbutton_fan_start">
    <image src="{{FANOnImage}}" mode="aspectFit" style="width: 110px; height: 110px; margin-right: 10px;"></image>
    <text style="margin: auto;">开/关风扇</text>
  </view>

  <view class="control-4" style="font-size: 20px;" bindtouchstart="onbutton_irrigate_start">
    <image src="{{IrrOnImage}}" mode="aspectFit" style="width: 100px; height: 100px; margin-right: 10px;"></image>
    <text style="margin: auto;">开/关水泵</text>
  </view>

</view>

control.wxss

控制页面布局的属性

/* 配置页面的属性 */
.control-root{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .control-2{
    display: flex;
    width: 400px;
    height: 100px;
    background: linear-gradient(180deg, rgb(241, 248, 178) 0%, rgb(208, 253, 103) 100%);
    border-radius: 5px;
    margin-left: auto;
    margin-top: 80px;
  }

  .control-3{
    display: flex;
    width: 400px;
    height: 100px;
    background: linear-gradient(180deg, rgb(183, 253, 193) 0%, rgb(150, 255, 118) 100%);
    border-radius: 5px;
    margin-left: auto;
    margin-top: 80px;
  }

  .control-4{
    display: flex;
    width: 400px;
    height: 100px;
    background: linear-gradient(180deg, rgb(188, 228, 255) 0%, rgb(113, 221, 253) 100%);
    border-radius: 5px;
    margin-left: auto;
    margin-top: 80px;
  }

environment工程文件

env,js

Page({  
  data: {
      IllOnImage: '/images/光照.png',
      HumOnImage: '/images/温湿度传感器.png',
      FlowOnImage: '/images/气.png',
      light: 0, //添加 light属性
      hum: 0,  //添加 hum属性
      flow: 0, //添加 flow属性
  },

  //  UDP接收数据后的处理函数
  onUdpMessage: function (res) {
      if(res != null)
      {
      // 将 ArrayBuffer类型的res.message取出来
      let unit8Arr = new Uint8Array(res.message);
      let encodedString = String.fromCharCode.apply(null, unit8Arr);
      let decodedString = decodeURIComponent(escape((encodedString))); //没有这一步中文会乱码
      console.log(decodedString);

      //解析 json 数据   
       let jsonData = JSON.parse(decodedString);
      //拿去json数据的 light  hun   flow
       let json_light = jsonData.envir.light;
        let json_hum = jsonData.envir.hum;
        let json_flow = jsonData.envir.flow;
       console.log(json_light,json_hum,json_flow);
        // 将json数据显示到页面上
        this.setData({
            light: json_light,
            hum: json_hum,
            flow: json_flow,
        });

      }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let appinstance = getApp();
    appinstance.g_value.udp.onMessage(this.onUdpMessage);
  },

});

env.json

{
    "navigationBarTitleText": "检测环境变量",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#77FF00",
    "navigationBarTextStyle": "black",
    "navigationStyle": "default"
}

env.wxml

<!-- 视图 -->
<view class="control-root">

<!-- 光照强度 -->
<view class="control-2" style="font-size: 30px;">
  <image src="{{IllOnImage}}" mode="aspectFit" style="width: 110px; height: 110px; margin-right: 10px;"></image>
  <!-- 显示文本 -->
  <text style="margin: auto;" decode="{{true}}">光照强度: \n {{light}}</text>
</view>

<view class="control-3" style="font-size: 30px;">
  <image src="{{HumOnImage}}" mode="aspectFit" style="width: 110px; height: 110px; margin-right: 10px;"></image>
  <text style="margin: auto;">温湿度: \n {{hum}}</text>
</view>

<view class="control-4" style="font-size: 30px;">
  <image src="{{FlowOnImage}}" mode="aspectFit" style="width: 100px; height: 100px; margin-right: 10px;"></image>
  <text style="margin: auto;">气体浓度: \n {{flow}}\n</text>
</view>
</view>

env.wxss

.control-root{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .control-2{
    display: flex;
    width: 400px;
    height: 100px;
    border-radius: 5px;
    margin-left: auto;
    margin-top: 100px;
  }

  .control-3{
    display: flex;
    width: 400px;
    height: 100px;
    border-radius: 5px;
    margin-left: auto;
    margin-top: 100px;
  }

  .control-4{
    display: flex;
    width: 400px;
    height: 100px;
    border-radius: 5px;
    margin-left: auto;
    margin-top: 100px;
  }

主要代码如上，该工程在测试时，我主要采用ubuntu，搭建了UDP服务器，与微信小程序通信。

实际中的智慧农业的硬件端wifi通信，要采用UDP通信方式与小程序通信注意使用数组清零以及sprintf，来与微信小程序正常通信。

智慧农业_微信小程序端,前端,微信小程序,毕业设计