樹莓派+小程序開發(一)
樹莓派+小程序開發(二)
五: 讓小程序連接樹莓派
 六：小程序控制面板設計
 七：樹莓派如何解析小程序的信息
 八：樹莓派如何回信息給小程序
 九：樹莓派與微信小程序通過websocket通信
 十：小程序實時顯示樹莓派溫溼度
 十一：python版 websocket服務器實現
 十二：python版websocket 服務器如何整合led和beep
十三：Python版服務器整合dht11溫溼度傳感器

六：小程序控制面板設計

通過第五章的實驗，我們的小程序可以順利連接樹莓派了，我們接下來的目標是實現，小程序開關燈和蜂鳴器。小程序上的效果圖如下：
連接前連接後

6.1 第一步：按鈕的樣式設計

我們第一步要實現的就是，完成紅綠藍三個燈，蜂鳴器，四個按鈕的佈局，顏色等樣式的設計，效果如上圖所示，代碼列出如下：
pages/index/index.wxss代碼如下：

/*pages/index/index.wxss */
.text_style{
  color:green;
  font-size:100rpx
}
.con_style{
  width: 210rpx;
  height: 210rpx;
  line-height:210rpx; 
  justify-content:center;
  border-radius: 50%;
  margin-top: 100rpx;
  font-size:70rpx
}

.red_style{
  width:160rpx; //寬高一樣，因爲要做成圓形
  height:160rpx;
  margin-left: 60rpx;
  margin-top: -100rpx;
  border-radius: 50%;//弧度,50%就是圓形了，50~100%之間觀察不出來
  background-color: red;
  opacity: 1;//透明度，打開後爲1，關閉時0.3,一定要設置，背景色纔可以露出來
  line-height:160rpx;//字體行高與按鈕相等，目的是讓字體居中
  padding: 0rpx;//爲了讓字體居中
  color:white;//字體顏色
}
.green_style{
  width:160rpx;
  height:160rpx;
  margin-left: 200rpx;
  margin-top: -20rpx;
  border-radius: 50%;
  background-color: green;
  opacity: 1;
  line-height:160rpx;
  padding: 0rpx;
  color:white;
}
.blue_style{
  width:160rpx;
  height:160rpx;
  margin-left: 400rpx;
  margin-top: -150rpx;
  border-radius: 50%;
  background-color: blue;
  opacity: 1;
  line-height:160rpx;
  padding: 0rpx;
  color:white;
}
.beep_style{
  width:160rpx;
  height:160rpx;
  margin-left: 530rpx;
  margin-top: -330rpx;
  border-radius: 50%;
  background-color: black;
  opacity: 1;
  line-height:160rpx;
  padding: 0rpx;
  color:white;
}

pages/index/index.wxml代碼如下：

<!--pages/index/index.wxml-->
<view class="container">
    <text class="text_style">樹莓派客戶端</text>
<button  class="con_style" type="primary" bindtap="connectPi">連接</button> 
//{{}}是微信小程序的一種語法，裏面可以引用變量，因此把原來寫死的文字做成變量方便後面改動，因爲後面有可能需要點擊了開燈按鈕，文字信息會變成”關紅燈”
    <button  class="red_style"  bindtap="redControl">{{redLed}}</button> 
    <button  class="green_style"  bindtap="greenControl">{{greenLed}}</button> 
    <button  class="blue_style"  bindtap="blueControl">{{blueLed}}</button> 
    <button  class="beep_style"  bindtap="beepControl">{{beep}}</button> 
</view>

pages/index/index.js代碼如下

//pages/index/index.js
Page({
  data:{
    redLed:'開紅燈',//定義index頁面中的全局變量，並初始化
    greenLed:'開綠燈',
    blueLed:'開藍燈',
    beep:'beep開'
  },

Index.js下面的代碼因爲不涉及到結構和樣式，故沒有列出。

6.2 第二步：開關的切換

這一步我們想實現這樣的功能：當啓動時，因爲沒有連接樹莓派，也沒有開燈，所以，按鈕顏色是灰色的，而且按鈕提示信息也不一樣，比如初始狀態時“開紅燈”，當點擊了紅燈按鈕後，按鈕字體顯示“關紅燈”。
初始狀態顏色的設置，我們只需要設置透明度爲0.3就解決了，但是當燈打開後，透明度要設置爲1，這樣我們需要跟字體顯示一樣，透明度也需要一個全局變量，這樣方便通過點擊按鈕來切換。
我們先來實現連接按鈕的顏色切換：
點擊之前，相關代碼如下：

//pages/index/index.js
Page({
  data:{   
    redLed:'燈關',
    greenLed:'燈關',
    blueLed:'燈關',
    beep:'beep關',
    connect:'未連接',
    transparency:0.3   //連接之前灰色
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
onLoad: function(options) {
      console.log("裝載index.js頁面...")
  },
  connectPi:function(){
    console.log('正在連接到樹莓派...')
    this.setData({
      transparency:1,
      connect:'已連接'
    })
  },

/*
pages/index/index.wxss */
.text_style{
  color:green;
  font-size:100rpx
}
.con_style{
  width: 210rpx;
  height: 210rpx;
  line-height:210rpx; 
  opacity:unset;
  text-align:center;//爲了文字左對齊
  padding: 0rpx;//爲了文字左對齊
  border-radius: 50%;
  margin-top: 100rpx;
  font-size:60rpx
}

<!--pages/index/index.wxml-->
<view class="container">
<text class="text_style">樹莓派客戶端</text>
//透明度在這裏通過{{transparency}}變量設置，文字也在這裏通過變量{{connect}}設置
    <button  class="con_style" style="opacity:{{transparency}}" type="primary" bindtap="connectPi">{{connect}}</button> 
</view>

但是，我們這裏有一個問題，點擊後再次點擊發現斷開之後的顏色還時激活的顏色，而且文字還時已連接。我們希望在連接狀態下點連接按鈕，按鈕切換到斷開狀態。
因此，我們需要設置一個變量，初值爲0，如果點擊了讓它+1，並且讓他%2,如果結果爲真，則顯示激活狀態，如果爲假則顯示非激活狀態。

//pages/index/index.js
Page({
  data:{
    redLed:'燈關',
    greenLed:'燈關',
    blueLed:'燈關',
    beep:'beep關',
    connect:'未連接',
    conCounter:0,   //值爲數字類型
    transparency:0.3   //連接之前灰色
  },
  /**

   * 生命週期函數--監聽頁面加載

   */
  onLoad: function(options) {
      console.log("裝載index.js頁面...")
  },
  connectPi:function(){
    console.log('正在連接到樹莓派...')
    this.data.conCounter++   //this.conCounter取不到data中的數據，這個地方需要注意
    console.log(this.data.conCounter)
    if (this.data.conCounter% 2) {
      this.setData({
        transparency: 1,
        conCounter:this.data.conCounter,//取過來再賦值
        connect: '已連接'
      })
    } else {
      this.setData({
        transparency: 0.3,
        conCounter: this.data.conCounter,
        connect: '已斷開'
      })
    }
  },

其他四個按鈕同理，我們需要給每一個按鈕設置一個顏色透明變量，點擊計數器
完整代碼如下：

// pages/index/index.js
Page({
  data:{
    redLed:'燈關',
    greenLed:'燈關',
    blueLed:'燈關',
    beep:'beep關',
    connect:'未連接',
    conCounter:0,   //值爲數字類型,連接按鈕計數器
    redCounter:0,   //紅色按鈕計數器
    greenCounter: 0,
    blueCounter: 0,
    beepCounter: 0,
    transparencyCon:0.3,  //連接之前灰色
    transparencyRed: 0.3,   //連接之前灰色
    transparencyGreen: 0.3,   //連接之前灰色
    transparencyBlue: 0.3,   //連接之前灰色
    transparencyBeep: 0.3   //連接之前灰色
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
      console.log("裝載index.js頁面...")
  },
  connectPi:function(){
    this.data.conCounter++   //this.conCounter取不到data中的數據
    console.log(this.data.conCounter)
    if (this.data.conCounter% 2) {
      console.log('正在連接到樹莓派...')
      this.setData({
        transparencyCon: 1,
        conCounter:this.data.conCounter,//取過來再賦值
        connect: '已連接'
      })
    } else {
      console.log('正在斷開到樹莓派的連接...')
      this.setData({
        transparencyCon: 0.3,
        conCounter: this.data.conCounter,
        connect: '已斷開'
      })
    }
  },
  redControl: function() {
    this.data.redCounter++   //如果沒有data則取不到redCounter數據
    console.log(this.data.redCounter)
    if (this.data.redCounter% 2) {
      console.log('紅色led開...')
      this.setData({
        transparencyRed: 1,
        redCounter: this.data.redCounter,//取過來再賦值
        redLed: '燈開'
      })
    } else {
      console.log('紅色led關...')
      this.setData({
        transparencyRed: 0.3,
        redCounter: this.data.redCounter,
        redLed: '燈關'
      })
    }
  },
  greenControl: function() {
    this.data.greenCounter++   //如果沒有data則取不到數據
    console.log(this.data.greenCounter)
    if (this.data.greenCounter% 2) {
      console.log('綠色led開...')
      this.setData({
        transparencyGreen: 1,
        greenCounter: this.data.greenCounter,//取過來再賦值
        greenLed: '燈開'
      })
    } else {
      console.log('綠色led關...')
      this.setData({
        transparencyGreen: 0.3,
        greenCounter: this.data.greenCounter,
        greenLed: '燈關'
      })
    }
  },
  blueControl: function() {
    this.data.blueCounter++   //如果沒有data則取不到數據
    console.log(this.data.blueCounter)
    if (this.data.blueCounter% 2) {
      console.log('藍色led開...')
      this.setData({
        transparencyBlue: 1,
        blueCounter: this.data.blueCounter,//取過來再賦值
        blueLed: '燈開'
      })
    } else {
      console.log('藍色led關...')
      this.setData({
        transparencyBlue: 0.3,
        greenCounter: this.data.greenCounter,
        blueLed: '燈關'
      })
    }
  }, 
  beepControl: function() {
    this.data.beepCounter++   //如果沒有data則取不到數據
    console.log(this.data.beepCounter)
    if (this.data.beepCounter% 2) {
      console.log('蜂鳴器開...')
      this.setData({
        transparencyBeep: 1,
        beepCounter: this.data.beepCounter,//取過來再賦值
        beep: 'beep開'
      })
    } else {
      console.log('蜂鳴器關...')
      this.setData({
        transparencyBeep: 0.3,
        beepCounter: this.data.beepCounter,
        beep: 'beep關'
      })
    }
  }
})

<!--pages/index/index.wxml-->
<view class="container">
    <text class="text_style">樹莓派客戶端</text>
    <button  class="con_style" style="opacity:{{transparencyCon}}" type="primary" bindtap="connectPi">{{connect}}</button> 
    <button  class="red_style" style="opacity:{{transparencyRed}}" bindtap="redControl">{{redLed}}</button> 
    <button  class="green_style" style="opacity:{{transparencyGreen}}" bindtap="greenControl">{{greenLed}}</button> 
    <button  class="blue_style" style="opacity:{{transparencyBlue}}" bindtap="blueControl">{{blueLed}}</button> 
    <button  class="beep_style" style="opacity:{{transparencyBeep}}" bindtap="beepControl">{{beep}}</button> 
</view>

6.3 第三步：實現控制函數

我們這裏每個按鈕(包括連接按鈕)點擊後，都要連接到樹莓派，只不過“連接”按鈕不需要控制外設，其他按鈕在連接的同時，需要發送一個命令過去，比如
紅色按鈕點擊發送的命令應該是：RED1或者RED0
綠色按鈕點擊發送的命令應該是：RED1或者GREEN0
藍色按鈕點擊發送的命令應該是：BLUE1或者BLUE0
蜂鳴器按鈕點擊發送的命令是：BEEP1或者BEEP0
連接按鈕綁定函數的實現：
我們先來看連接按鈕的代碼如何寫：

connectPi:function(){
    this.data.conCounter++   //this.conCounter取不到data中的數據
    console.log(this.data.conCounter)
    if (this.data.conCounter% 2) {
      console.log('正在連接到樹莓派...')
      wx.request({
        url: 'http://192.168.137.113:8990?connect=1',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyCon: 1,
        conCounter:this.data.conCounter,//取過來再賦值
        connect: '已連接'
      })
    } else {
      console.log('正在斷開到樹莓派的連接...')
      wx.request({
        url: 'http://192.168.137.113:8990?connect=0',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyCon: 0.3,
        conCounter: this.data.conCounter,
        connect: '已斷開'
      })
    }
  },

我們這裏採用的是HTTPGET請求方式，
http://192.168.137.113:8990?connect=0問號後面的connect=0就是我們想告訴樹莓派的信息
連接的時候，connect=1,斷開的時候connect=0.

樹莓派收到連接按鈕的信息

我們再來看看樹莓派這邊服務器收到的信息：

pi@xiajiashan:~/pi-c$gcc server_reponse.c -o server
pi@xiajiashan:~/pi-c$./server
socket_fd= 3
retval= 0
retval= 0
服務器(192.168.137.113:8990)正在accept...
客戶端(0.0.0.0:57974)已經連上...
read 574 bytes:
GET /?connect=1 HTTP/1.1
Host:192.168.137.113:8990
Connection:keep-alive
Pragma:no-cache

Cache-Control:no-cache
Sec-Fetch-Dest:empty
Sec-Fetch-User:?F
Sec-Fetch-Site:cross-site
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.3
(KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
wechatdevtools/1.02.1911180 MicroMessenger/7.0.4 Language/zh_CN webview/
content-type:application/json
Accept:*/*
Referer:https://servicewechat.com/wxc4737fa6373be761/devtools/page-frame.html
Accept-Encoding:gzip, deflate
發送了141個字節給微信小程序...
read 0 bytes:
服務器(192.168.137.113:8990)正在accept...
客戶端(192.168.137.1:51384)已經連上...
read 574 bytes:
GET /?connect=0 HTTP/1.1
Host:192.168.137.113:8990
Connection:keep-alive
Pragma:no-cache
Cache-Control:no-cache
Sec-Fetch-Dest:empty
Sec-Fetch-User:?F
Sec-Fetch-Site:cross-site
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.3
(KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
wechatdevtools/1.02.1911180 MicroMessenger/7.0.4 Language/zh_CN webview/
content-type:application/json
Accept:*/*
Referer:https://servicewechat.com/wxc4737fa6373be761/devtools/page-frame.html
Accept-Encoding:gzip, deflate 

發送了141個字節給微信小程序...
read 0 bytes:
服務器(192.168.137.113:8990)正在accept...

紅燈按鈕綁定函數的實現

我在小程序上點擊“未連接”和“已連接”樹莓派收到了我們正確的信息connect=1和connect=0。後面我們再來解析這些數據，做處理，我們現在把重點放在小程序這邊的發送。
這樣，其他按鈕我們如法炮製.
如果是紅燈亮，url後面帶參數connect=1
http://192.168.137.113:8990?connect=1
如果是紅燈滅，url後面帶參數connect=0
http://192.168.137.113:8990?connect=0
紅燈按鈕代碼如下；

redControl:function() {
    this.data.redCounter++   //如果沒有data則取不到redCounter數據
    console.log(this.data.redCounter)
    if (this.data.redCounter% 2) {
      console.log('紅色led開...')
      wx.request({
        url: 'http://192.168.137.113:8990?RED=1',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyRed: 1,
        redCounter: this.data.redCounter,//取過來再賦值
        redLed: '燈開'
      })
    } else {
      console.log('紅色led關...')
      wx.request({
        url: 'http://192.168.137.113:8990?RED=0',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyRed: 0.3,
        redCounter: this.data.redCounter,
        redLed: '燈關'
      })
    }
  },

服務器收到的紅燈按下代碼信息：

服務器(192.168.137.113:8990)正在accept...
客戶端(192.168.137.1:53128)已經連上...
read 570 bytes:GET/?RED=1 HTTP/1.1
Host:192.168.137.113:8990
Connection:keep-alive
Pragma:no-cache
Cache-Control:no-cache
Sec-Fetch-Dest:empty
Sec-Fetch-User:?F
Sec-Fetch-Site:cross-site
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.3
(KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
wechatdevtools/1.02.1911180 MicroMessenger/7.0.4 Language/zh_CN webview/
content-type:application/json
Accept:*/*
Referer:https://servicewechat.com/wxc4737fa6373be761/devtools/page-frame.html
Accept-Encoding:gzip, deflate

綠燈按鈕代碼如下：

greenControl:function() {
    this.data.greenCounter++   //如果沒有data則取不到數據
    console.log(this.data.greenCounter)
    if (this.data.greenCounter% 2) {
      console.log('綠色led開...')
      wx.request({
        url: 'http://192.168.137.113:8990?GREEN=1',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyGreen: 1,
        greenCounter: this.data.greenCounter,//取過來再賦值
        greenLed: '燈開'
      })
    } else {
      console.log('綠色led關...')
      wx.request({
        url: 'http://192.168.137.113:8990?GREEN=0',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyGreen: 0.3,
        greenCounter: this.data.greenCounter,
        greenLed: '燈關'
      })
    }
  },

藍燈按鈕代碼如下：

blueControl:function() {
    this.data.blueCounter++   //如果沒有data則取不到數據
    console.log(this.data.blueCounter)
    if (this.data.blueCounter% 2) {
      console.log('藍色led開...')
      wx.request({
        url: 'http://192.168.137.113:8990?BLUE=1',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyBlue: 1,
        blueCounter: this.data.blueCounter,//取過來再賦值
        blueLed: '燈開'
      })
    } else {
      console.log('藍色led關...')
      wx.request({
        url: 'http://192.168.137.113:8990?BLUE=0',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyBlue: 0.3,
        greenCounter: this.data.greenCounter,
        blueLed: '燈關'
      })
    }
  },

蜂鳴器代碼如下：

beepControl:function() {
    this.data.beepCounter++   //如果沒有data則取不到數據
    console.log(this.data.beepCounter)
    if (this.data.beepCounter% 2) {
      console.log('蜂鳴器開...')
      wx.request({
        url: 'http://192.168.137.113:8990?BEEP=1',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyBeep: 1,
        beepCounter: this.data.beepCounter,//取過來再賦值
        beep: 'beep開'
      })
    } else {
      console.log('蜂鳴器關...')
      wx.request({
        url: 'http://192.168.137.113:8990?BEEP=0',
        success: (res) => {
          console.log(res)
        },
      })
      this.setData({
        transparencyBeep: 0.3,
        beepCounter: this.data.beepCounter,
        beep: 'beep關'
      })
    }
  }

樹莓派收到綠色按鈕，藍色按鈕，蜂鳴器的信息這裏就不列出了。
第六章到此結束。
接下來我們在第七章實現，樹莓派如何解析小程序發過來的命令。
樹莓派+小程序開發(一)
樹莓派+小程序開發(二)
五: 讓小程序連接樹莓派
 六：小程序控制面板設計
 七：樹莓派如何解析小程序的信息
 八：樹莓派如何回信息給小程序
 九：樹莓派與微信小程序通過websocket通信
 十：小程序實時顯示樹莓派溫溼度
 十一：python版 websocket服務器實現
 十二：python版websocket 服務器如何整合led和beep
十三：Python版服務器整合dht11溫溼度傳感器

六：小程序控制面板設計

六：小程序控制面板設計

6.1 第一步：按鈕的樣式設計

6.2 第二步：開關的切換

6.3 第三步：實現控制函數

樹莓派收到連接按鈕的信息

紅燈按鈕綁定函數的實現

服務器收到的紅燈按下代碼信息：

綠燈按鈕代碼如下：

藍燈按鈕代碼如下：

蜂鳴器代碼如下：

第五課：樹莓派C語言編程手冊

爲什麼獲取不到wiringPi源碼

第四課：如何安裝樹莓派系統

樹莓派+小程序開發(一)

樹莓派+小程序開發(二)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結