很多學(xué)生畢設(shè)采用智慧農(nóng)業(yè)，在這里給大家分享一下微信小程序采用UDP協(xié)議 遠程控制相關(guān)硬件設(shè)備的項目

主要實現(xiàn)功能：?

? 1.? 遠程控制相關(guān)設(shè)備

? 2.? 遠程檢測傳感器相關(guān)數(shù)據(jù)

資源下載：?【免費】智慧農(nóng)業(yè)-微信小程序端UDP控制資源-CSDN文庫

? ?本項目主要使用三個頁面工程：?

? ? ?list： 主頁

? ? ?control：? 控制相關(guān)設(shè)備的工程文件

? ? ?environment:? ? 檢測環(huán)境的工程文件

? 每個文件中， 都含有：

? ? ? ? .js文件： 用于實現(xiàn)一些復(fù)雜的邏輯功能；

? ? ? ? ?.json文件: 用于配置小程序的窗口背景色、導(dǎo)航條樣式等界面表現(xiàn)；

? ? ? ? ?.wxml文件：? 用于配置頁面的結(jié)構(gòu)，樣式；

? ? ? ? ?.wxss文件：? ?用于設(shè)置小程序的頁面樣式；

下面將相關(guān)代碼分享如下：?

? 注： 因本項目用了外接庫，代碼僅供參考， 具體資源需要前往上方的資源下載

全局配置文件：

app.js：

? ? 主要是定義了全局變量 g_value，保證所有頁面采用同一個變量，共同配置

// app.js
App({
    // 全局變量 該工程下任何文件夾內(nèi)都可以使用這兩個變量
    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 => {
        // 發(fā)送 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":"關(guān)于",
        "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工程的邏輯實現(xiàn)

   // pages/list/list.js
Page({
  /**
     * 查看相關(guān)環(huán)境 跳轉(zhuǎn)
     */
    env: function(param){
        wx.navigateTo({
          url: '../environment/env',
        })
    },

    con: function(param){
      wx.navigateTo({
        url: '../control/control',
      })
  },
   
  /* IP地址輸入框 
     detail 是一個事件對象, 包含了觸發(fā)事件的詳細信息
   */
  onChange_setCarIP(res) {
      let appinstance = getApp();
      appinstance.g_value.IP = res.detail;
      console.log(appinstance.g_value.IP);
  },

    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
      
    },
  
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面顯示
     */
    onShow: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面隱藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面卸載
     */
    onUnload: function () {

    },

    /**
     * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 頁面上拉觸底事件的處理函數(shù)
     */
    onReachBottom: function () {

    },

    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {

    }
})

list.json??

主要用于配置導(dǎo)航欄屬性

{
    "navigationBarTitleText": "智慧農(nóng)業(yè)",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#77FF00",
    "navigationBarTextStyle": "black",
    "navigationStyle": "default"
}

list.wxml

? 主頁頁面的樣式信息

<van-notice-bar left-icon="volume-o" scrollable text="注意：先執(zhí)行控制相關(guān)設(shè)備, 將IP地址錄入成功并下達控制相關(guān)指令后, 再執(zhí)行檢測環(huán)境變量" color="red;"/>

<!-- 預(yù)覽圖 每隔兩秒進行反轉(zhuǎn),最后一張圖結(jié)束會從第一張圖開始 -->
<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;'>興安生態(tài)農(nóng)場</h1>"></rich-text>

<!-- view 視圖 居中顯示 -->
<view style="margin: auto; display: flex; justify-content: center;">
  <!-- 自定義的單元格標簽： -->
    <van-cell-group>
    <!--van-field：輸入框 placeholder：默認顯示的內(nèi)容    left-icon：在左邊設(shè)置上下箭頭圖標 border：顯示內(nèi)邊框  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">控制相關(guān)設(shè)備</button>
<button bindtap="env">檢測環(huán)境變量</button>

list.wxss??

主要用于配置頁面樣式信息的屬性

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

.text{
    /* 字體大小 */
    font-size:  20px;
    /* 字體顏色 */
    color: red;
    /* 字體風(fēng)格 - 粗細 */
    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工程文件（控制相關(guān)設(shè)備）：

control.js

? 配置 control工程的邏輯實現(xiàn)

var appinstance = getApp();

Page({  
    // 變量
  data: {
      MutexOnImage: '/images/鎖off.png',
      lightOnImage: '/images/燈泡off.png',
      FANOnImage: '/images/風(fēng)扇off.png',
      IrrOnImage: '/images/噴淋off.png'
  },
   // 該函數(shù) 主要實現(xiàn), 當運行時,根據(jù)每次三元運算的結(jié)果, 不斷變換圖片并采用UDP發(fā)送不同的數(shù)據(jù)
  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');
    }
  },
  
// 該函數(shù) 主要實現(xiàn), 當運行時,根據(jù)每次三元運算的結(jié)果, 不斷變換圖片并采用UDP發(fā)送不同的數(shù)據(jù)
  onbutton_fan_start: function() {
    const imageList = ['/images/風(fēng)扇off.png', '/images/風(fēng)扇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');
    }
  },
  
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    appinstance.g_value.udp = wx.createUDPSocket(); // 創(chuàng)建UDP Socket實例
    appinstance.g_value.udp.bind();   // udp綁定本機
    console.log('bind is ok');
  },

});

control.json：

? ?主要用于配置導(dǎo)航欄屬性

{
        "navigationBarTitleText": "控制相關(guān)設(shè)備",
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#77FF00",
        "navigationBarTextStyle": "black",
        "navigationStyle": "default"
}

control.wxml:

? control頁面的布局 (控制相關(guān)設(shè)備頁面)

<!-- 視圖 -->
<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;">開/關(guān)燈</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;">開/關(guān)風(fēng)扇</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;">開/關(guān)水泵</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接收數(shù)據(jù)后的處理函數(shù)
  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 數(shù)據(jù)   
       let jsonData = JSON.parse(decodedString);
      //拿去json數(shù)據(jù)的 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數(shù)據(jù)顯示到頁面上
        this.setData({
            light: json_light,
            hum: json_hum,
            flow: json_flow,
        });

      }
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    let appinstance = getApp();
    appinstance.g_value.udp.onMessage(this.onUdpMessage);
  },

});

env.json

{
    "navigationBarTitleText": "檢測環(huán)境變量",
    "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服務(wù)器，與微信小程序通信。

實際中的智慧農(nóng)業(yè)的硬件端wifi通信，要采用UDP通信方式與小程序通信注意使用數(shù)組清零以及sprintf，來與微信小程序正常通信。

詳情請見 資源下載文章來源地址http://www.zghlxwxcb.cn/news/detail-851386.html

到了這里，關(guān)于智慧農(nóng)業(yè)_微信小程序端的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！