微信小程式--樹莓派(raspberry pi)小車控制的程式碼流程

php是最好的语言
發布: 2018-08-07 10:04:24
原創
5225 人瀏覽過

目錄

1. 基本想法

2. 程式碼結構如下:

3. index目錄

4. control目錄 

5. 工程全域控制

主要練習了微信小程式的發展。這裡簡單記錄一下主要​​程式碼片段。也是趟過了許多的坑,例如:微信小程式不支援完全全屏,微信小程式不能橫屏展示。所以開發過程中也用了一些非常手段。可以說這只是一個很基本的demo,所以裡面很多東西,像是攝影機監控ip、頁面元素定位我都使用了寫死的值。特別是介面,我只是在iPhone 6上面做的實驗,所以換到其他手機上時,介面就會變型了。

1. 基本想法

  • 進入小程式時展示index頁,可以讓使用者輸入服務端url(模擬上一篇中在瀏覽器取得get請求)

  • 然後跳到實際的小車控制介面,並可以透過​​點擊按鈕來實現小車控制

  • 控制小車的移動,主要是在control.js中定義了介面按鈕事件的回應,在回應事件的過程中實作http請求的傳送

#index頁面如下: 

微信小程式--樹莓派(raspberry pi)小車控制的程式碼流程

進去之後的頁面如下(其中中間空白處會展示相機監控,不過我並沒有啟動,所以看不見):

微信小程式--樹莓派(raspberry pi)小車控制的程式碼流程

2. 程式碼結構如下:

其中,index下面是首頁,control是控制頁面,res目錄下存放的是圖片資源

微信小程式--樹莓派(raspberry pi)小車控制的程式碼流程

3. index目錄

  • index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    logo: "/res/rasp-logo.png",
    welcome: "欢迎使用树莓小车",
    enterBtn: "进入",
    PromoteMsg: "Please enter the server address (eg: http://x.x.x.x:8080)",
    reqURL: ""
  },
  // 从输入框中获取用户输入的服务器地址信息
  getURL: function (e) {
    this.setData({
      reqURL: e.detail.value
    })
  },
  enterClicked: function (e) {
    /*
     * 当按下进入按钮,需要做以下事情:
     * 1. 首先判断用户是否已经在输入框中输入完整的服务器地址
     * 2. 发起一个到服务器的GET请求,并分析服务器的响应结果
     * 3. 跳转到小车控制界面
    */
    console.log(this.data.reqURL)

    if (this.data.reqURL == '') {
      wx.showModal({
        title: '提示',
        content: '请先输入正确的服务器地址!',
      })
      return
    }

    // 发起到服务器的GET请求
    wx.request({
      url: this.data.reqURL,
      success: function (res) {
        // 在这里获取POST请求地址,以及视频流地址,然后赋值给全局变量,供control页面调用
        console.log(res.data.match(/url = \"(\S*)\"/)[1])
        console.log(res.data.match(/src=\"(\S*)\"/)[1])
        app.globalData.postURL = res.data.match(/url = \"(\S*)\"/)[1]
        app.globalData.cameraURL = res.data.match(/src=\"(\S*)\"/)[1]

        // 跳转到control页面
        wx.navigateTo({
          url: '/pages/control/control',
        })
      },
      fail: function(res) {
        wx.showModal({
          title: '提示',
          content: '请检查输入的服务器地址!',
        })
      }
    })
  }
})
登入後複製
  • #index.json:無數據,只有一對打括號

  • index.wxml

<!--index.wxml-->
<view>
  <view class="welcome">
    <view class="logo">
      <image style="width: 250rpx; height: 250rpx" src="{{logo}}"></image>
    </view>
    <view>
      <text class="words">{{welcome}}</text>
    </view>
  </view>

  <input class="requestURL" type="text" placeholder="{{PromoteMsg}}" focus=&#39;1&#39; cursor=&#39;10&#39; confirm-type="done" bindinput=&#39;getURL&#39;></input>
  <button class=&#39;enter&#39; bindtap=&#39;enterClicked&#39;>{{enterBtn}}</button>
</view>
登入後複製
  • index.wxss

/**index.wxss**/
.welcome{
  display: flex;
  margin-top: 50rpx;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.requestURL{
  margin: 50rpx 10rpx 30rpx 10rpx;
  border: 1px solid gray;
  font-style: italic;
  font-size: small
}

.enter{
  margin-right: 10rpx;
  width: 150rpx;
  height: 60rpx;
  font-size: small
}
登入後複製

4. control目錄 

  • control.js

// pages/control/control.js
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // Car control images
    "forwardBtn": "/res/forward.png",
    "leftBtn": "/res/left.png",
    "rightBtn": "/res/right.png",
    "backLeftBtn": "/res/back-left.png",
    "backRightBtn": "/res/back-right.png",
    "backBtn": "/res/backward.png",

    // Camera control images
    "upBtn": "/res/forward.png",
    "camLeftBtn": "/res/camLeft.png",
    "camRightBtn": "/res/camRight.png",
    "downBtn": "/res/backward.png",
    "resetBtn": "/res/reset.png"
  },

  carMove: function(event) {
    wx.request({
      url: this.data.postURL,
      data: event.currentTarget.dataset.direction,
      method: "POST",
      success: function(res){

      },
      fail: function(res){
        
      }
    })
  },

  carStop: function(event) {
    wx.request({
      url: this.data.postURL,
      data: "S",
      method: "POST",
      success: function (res) {

      },
      fail: function (res) {

      }
    })
  },

  camMove: function(event) {
    wx.request({
      url: this.data.postURL,
      data: event.currentTarget.dataset.direction,
      method: "POST",
      success: function (res) {

      },
      fail: function (res) {

      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //this.data.cameraURL = app.globalData.cameraURL
    this.setData({
      cameraURL: app.globalData.cameraURL,
      postURL: app.globalData.postURL
    })
    console.log(this.data.cameraURL)
    console.log("post url in control page: " + app.globalData.postURL)
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //console.log(wx.getSystemInfoSync().windowWidth)
    //console.log(wx.getSystemInfoSync().windowHeight)
  },

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

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

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})
登入後複製
  • #control.json

  • ##
    {
      "navigationBarBackgroundColor": "#ffffff",
      "navigationBarTextStyle": "black",
      "navigationBarTitleText": "树莓小车",
      "backgroundColor": "#eeeeee",
      "backgroundTextStyle": "light",
      "enablePullDownRefresh": false,
      "navigationStyle": "custom",
      "disableScroll": true
    }
    登入後複製
    ##control.wxml
  • <!--pages/control/control.wxml-->
    <view class=&#39;control&#39;>
      <!-- This image shows the camera view -->
      <image class=&#39;cameraView&#39; src=&#39;http://192.168.1.104:8080/?action=stream&#39; style="z-index:1"></image>
    
      <!-- The following six images control the car move  -->
      <image class=&#39;button&#39; id=&#39;forward&#39; src=&#39;{{forwardBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;F&#39; bindtouchend=&#39;carStop&#39;></image>
      <image class=&#39;button&#39; id=&#39;left&#39; src=&#39;{{leftBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;L&#39; bindtouchend=&#39;carStop&#39;></image>
      <image class=&#39;button&#39; id=&#39;right&#39; src=&#39;{{rightBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;R&#39; bindtouchend=&#39;carStop&#39;></image>
      <image class=&#39;button&#39; id=&#39;backLeft&#39; src=&#39;{{backLeftBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;BL&#39; bindtouchend=&#39;carStop&#39;></image>
      <image class=&#39;button&#39; id=&#39;backRight&#39; src=&#39;{{backRightBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;BR&#39; bindtouchend=&#39;carStop&#39;></image>
      <image class=&#39;button&#39; id=&#39;back&#39; src=&#39;{{backBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;B&#39; bindtouchend=&#39;carStop&#39;></image>
    
      <!-- The following images control the camera move  -->
      <image class=&#39;button&#39; id=&#39;up&#39; src=&#39;{{upBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;VU&#39;></image>
      <image class=&#39;button&#39; id=&#39;camLeft&#39; src=&#39;{{camLeftBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;HL&#39;></image>
      <image class=&#39;button&#39; id=&#39;camRight&#39; src=&#39;{{camRightBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;HR&#39;></image>
      <image class=&#39;button&#39; id=&#39;down&#39; src=&#39;{{downBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;VD&#39;></image>
      <image class=&#39;button&#39; id=&#39;reset&#39; src=&#39;{{resetBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;RESET&#39;></image>
    </view>
    登入後複製

control.wxss

  • /* pages/control/control.wxss */
    
    .control {
      width: 100%;
      height: 100%;
      transform: rotate(90deg);
      background-color: #eee;
      justify-content: center;
    }
    
    .cameraView {
      margin-left: 0px;
      width: 603px;
      height: 375px;
      background-color: #eee;
      justify-content: center;
    }
    
    .button {
      height: 60px;
      width: 60px;
      opacity: 0.3;
    }
    
    #forward {
      left: 60px;
      top: 135px;
    }
    
    #left {
      left: 0px;
      top: 195px;
    }
    
    #right {
      left: 120px;
      top: 195px;
    }
    
    #backLeft {
      left: 0px;
      top: 255px;
    }
    
    #backRight {
      left: 120px;
      top: 255px;
    }
    
    #back {
      left: 60px;
      top: 315px;
    }
    
    #up {
      left: 480px;
      top: 195px;
    }
    
    #camLeft {
      left: 420px;
      top: 255px;
    }
    
    #camRight {
      left: 540px;
      top: 255px;
    }
    
    #down {
      left: 480px;
      top: 315px;
    }
    
    #reset{
      left: 480px;
      top: 135px
    }
    登入後複製

    5. 工程全域控制

    app.js:實際上似乎沒有用到,裡面都是工程創建時的預設程式碼
  • #
    //app.js
    App({
      onLaunch: function () {
        // 展示本地存储能力
        var logs = wx.getStorageSync(&#39;logs&#39;) || []
        logs.unshift(Date.now())
        wx.setStorageSync(&#39;logs&#39;, logs)
    
        // 登录
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
          }
        })
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting[&#39;scope.userInfo&#39;]) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
    
                  // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
      },
      globalData: {
        userInfo: null,
        postURL: null,
        cameraURL: null
      }
    })
    登入後複製
##app.json:
  • {
      "pages": [
        "pages/index/index",
        "pages/control/control"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "树莓小车",
        "navigationBarTextStyle": "black",
        "showStatusBar": false
      }
    }
    登入後複製

app.wxss:
  • /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    }
    登入後複製

project.control.json:

{
	"description": "项目配置文件。",
	"packOptions": {
		"ignore": []
	},
	"setting": {
		"urlCheck": false,
		"es6": true,
		"postcss": true,
		"minified": true,
		"newFeature": true
	},
	"compileType": "miniprogram",
	"libVersion": "2.0.4",
	"appid": "wx18414b9f85bfc895",
	"projectname": "wechat-control",
	"isGameTourist": false,
	"condition": {
		"search": {
			"current": -1,
			"list": []
		},
		"conversation": {
			"current": -1,
			"list": []
		},
		"game": {
			"currentL": -1,
			"list": []
		},
		"miniprogram": {
			"current": -1,
			"list": []
		}
	}
}
登入後複製
相關推薦:

樹莓派(Raspberry Pi,RPi)的詳細介紹

###用樹莓派實作對話機器人_PHP教學######

以上是微信小程式--樹莓派(raspberry pi)小車控制的程式碼流程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板