微信小程序實現(xiàn)樹莓派（raspberry pi）小車控制

更新時間：2020年02月12日 10:23:12 作者：weixin_42534940

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)樹莓派（raspberry pi）小車控制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文是基于上一篇“網(wǎng)頁版樹莓派小車控制程序”改造而成。主要也練習了一下微信小程序的開發(fā)。這里簡單記錄一下主要代碼片段。也是趟過了許多的坑，例如：微信小程序不支持完全全屏，微信小程序不能橫屏展示。所以開發(fā)過程中也用了一些非常手段。可以說這只是一個很基本的demo，所以里面很多東西，比如攝像頭監(jiān)控ip、頁面元素定位我都使用了寫死的值。特別是界面，我只是在iPhone 6上面做的實驗，所以換到其他手機上時，界面就會變型了。

1. 基本思路

進入小程序時展示index頁，可以讓用戶輸入服務端url（模擬上一篇中在瀏覽器獲取get請求）
然后跳轉到實際的小車控制界面，并可以通過點擊按鈕實現(xiàn)小車控制
控制小車的移動，主要是在control.js中定義了界面按鈕事件的響應，在響應事件的過程中實現(xiàn)http請求的發(fā)送

index頁面如下：

進去之后的頁面如下（其中中間空白處會展示攝像頭監(jiān)控，不過我并沒有啟動，所以看不見）：

2. 代碼結構如下：

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

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. 首先判斷用戶是否已經(jīng)在輸入框中輸入完整的服務器地址
 * 2. 發(fā)起一個到服務器的GET請求，并分析服務器的響應結果
 * 3. 跳轉到小車控制界面
 */
 console.log(this.data.reqURL)
 
 if (this.data.reqURL == '') {
 wx.showModal({
 title: '提示',
 content: '請先輸入正確的服務器地址！',
 })
 return
 }
 
 // 發(fā)起到服務器的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：無數(shù)據(jù)，只有一對打括號

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='1' cursor='10' confirm-type="done" bindinput='getURL'></input>
 <button class='enter' bindtap='enterClicked'>{{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({
 
 /**
 * 頁面的初始數(shù)據(jù)
 */
 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) {
 
 }
 })
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 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)
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () {
 //console.log(wx.getSystemInfoSync().windowWidth)
 //console.log(wx.getSystemInfoSync().windowHeight)
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
 onUnload: function () {
 
 },
 
 /**
 * 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
 */
 onPullDownRefresh: function () {
 
 },
 
 /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
 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='control'>
 <!-- This image shows the camera view -->
 <image class='cameraView' src='http://192.168.1.104:8080/?action=stream' style="z-index:1"></image>
 
 <!-- The following six images control the car move -->
 <image class='button' id='forward' src='{{forwardBtn}}' style="position:absolute;z-index:2" bindtouchstart='carMove' data-direction='F' bindtouchend='carStop'></image>
 <image class='button' id='left' src='{{leftBtn}}' style="position:absolute;z-index:2" bindtouchstart='carMove' data-direction='L' bindtouchend='carStop'></image>
 <image class='button' id='right' src='{{rightBtn}}' style="position:absolute;z-index:2" bindtouchstart='carMove' data-direction='R' bindtouchend='carStop'></image>
 <image class='button' id='backLeft' src='{{backLeftBtn}}' style="position:absolute;z-index:2" bindtouchstart='carMove' data-direction='BL' bindtouchend='carStop'></image>
 <image class='button' id='backRight' src='{{backRightBtn}}' style="position:absolute;z-index:2" bindtouchstart='carMove' data-direction='BR' bindtouchend='carStop'></image>
 <image class='button' id='back' src='{{backBtn}}' style="position:absolute;z-index:2" bindtouchstart='carMove' data-direction='B' bindtouchend='carStop'></image>
 
 <!-- The following images control the camera move -->
 <image class='button' id='up' src='{{upBtn}}' style="position:absolute;z-index:2" bindtouchstart='camMove' data-direction='VU'></image>
 <image class='button' id='camLeft' src='{{camLeftBtn}}' style="position:absolute;z-index:2" bindtouchstart='camMove' data-direction='HL'></image>
 <image class='button' id='camRight' src='{{camRightBtn}}' style="position:absolute;z-index:2" bindtouchstart='camMove' data-direction='HR'></image>
 <image class='button' id='down' src='{{downBtn}}' style="position:absolute;z-index:2" bindtouchstart='camMove' data-direction='VD'></image>
 <image class='button' id='reset' src='{{resetBtn}}' style="position:absolute;z-index:2" bindtouchstart='camMove' data-direction='RESET'></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：實際似乎并沒有用到，里面都是工程創(chuàng)建時的默認代碼

//app.js
App({
 onLaunch: function () {
 // 展示本地存儲能力
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
 
 // 登錄
 wx.login({
 success: res => {
 // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
 }
 })
 // 獲取用戶信息
 wx.getSetting({
 success: res => {
 if (res.authSetting['scope.userInfo']) {
  // 已經(jīng)授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
  wx.getUserInfo({
  success: res => {
  // 可以將 res 發(fā)送給后臺解碼出 unionId
  this.globalData.userInfo = res.userInfo
 
  // 由于 getUserInfo 是網(wǎng)絡請求，可能會在 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": []
 }
 }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js綜合應用實例簡單的表格統(tǒng)計
在做調查問卷的過程中，遇到一個表格的統(tǒng)計問題，一個需要用到js方面的綜合知識，感覺還不錯所以記錄下來與大家分享，感興趣的朋友可以了解下
2013-09-09
JS實現(xiàn)獲取圖片大小和預覽的方法完整實例【兼容IE和其它瀏覽器】
這篇文章主要介紹了JS實現(xiàn)獲取圖片大小和預覽的方法,結合完整實例形式分析了javascript針對不同瀏覽器處理圖片上傳與預覽等操作的相關實現(xiàn)技巧,需要的朋友可以參考下
2017-04-04
LayUI表格批量刪除方法
今天小編就為大家分享一篇LayUI表格批量刪除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
javascript中href和replace的比較(詳解)
下面小編就為大家?guī)硪黄猨avascript中href和replace的比較(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JavaScript獲得指定對象大小的方法
這篇文章主要介紹了JavaScript獲得指定對象大小的方法,涉及javascript針對元素遍歷與屬性操作的相關技巧,需要的朋友可以參考下
2015-07-07
前端實現(xiàn)CSV文件解析的方法詳解
這篇文章主要為大家詳細介紹了前端實現(xiàn)CSV文件解析的相關方法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以了解一下
2024-03-03
Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
通過 bootstrap-table 的Column 配置項中的formatter，將獲取到的數(shù)據(jù)轉換為包含數(shù)據(jù)的 select 控件。然后根據(jù)用戶選擇項更新對應單元格數(shù)據(jù)，最后通過getallselection方法獲取所選行數(shù)據(jù)
2017-07-07
5分鐘打造簡易高效的webpack常用配置
這篇文章主要介紹了5分鐘打造簡易高效的webpack配置,詳細的介紹了打包調試、提取公共代碼、壓縮、熱替換等配置，有興趣的可以了解一下
2017-07-07
小程序綁定用戶方案優(yōu)化小結
這篇文章主要介紹了小程序綁定用戶方案優(yōu)化小結，該類小程序在使用之前就需要綁定用戶信息。常見于線下門店類功能性小程序。具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
微信小程序實現(xiàn)手指觸摸畫板
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)手指觸摸畫板，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07