2. 程式人生 > 程式設計 >微信小程式實現樹莓派（raspberry pi）小車控制

微信小程式實現樹莓派（raspberry pi）小車控制

阿新 • • 發佈：2020-02-13

本文是基於上一篇“網頁版樹莓派小車控制程式”改造而成。主要也練習了一下微信小程式的開發。這裡簡單記錄一下主要程式碼片段。也是趟過了許多的坑，例如：微信小程式不支援完全全屏，微信小程式不能橫屏展示。所以開發過程中也用了一些非常手段。可以說這只是一個很基本的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='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({
 
 /**
 * 頁面的初始資料
 */
 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",success: function (res) {
 
 },fail: function (res) {
 
 }
 })
 },camMove: function(event) {
 wx.request({
 url: this.data.postURL,/**
 * 生命週期函式--監聽頁面載入
 */
 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='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：實際似乎並沒有用到，裡面都是工程建立時的預設程式碼

//app.js
App({
 onLaunch: function () {
 // 展示本地儲存能力
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs',logs)
 
 // 登入
 wx.login({
 success: res => {
 // 傳送 res.code 到後臺換取 openId,sessionKey,unionId
 }
 })
 // 獲取使用者資訊
 wx.getSetting({
 success: res => {
 if (res.authSetting['scope.userInfo']) {
  // 已經授權，可以直接呼叫 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","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,"game": {
 "currentL": -1,"miniprogram": {
 "current": -1,"list": []
 }
 }
}

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

相關推薦

微信小程式實現樹莓派（raspberry pi）小車控制

本文是基於上一篇“網頁版樹莓派小車控制程式”改造而成。主要也練習了一下微信小程式的開發。這裡簡單記錄一下主要程式碼片段。也是趟過了許多的坑，例如：微信小程式不支援完全全屏，微信小程式不能橫屏展示。所以

微信小程式實現彈幕牆（祝福牆）

本文例項為大家分享了微信小程式實現彈幕牆的具體程式碼，供大家參考，具體內容如下

微信小程式實現登入功能 （第一種模式）

------------恢復內容開始------------ 第一種模式：設定小程式啟動頁為登入頁 1.wxml程式碼（佈局的，最終要的是按鈕）

jsf實現微信小程式簡潔登入頁面（附原始碼）

上圖： 使用者不存在： 程式碼： login.wxml <view class=\"v1\" style=\"height:{{clientHeight?clientHeight+\'px\':\'auto\'}}\">

2021--微信小程式流量主開通 （如何賺錢）

技術標籤：前端微信小程式流量主 一、 介紹 騰訊的小程式平臺給個人開發者帶來了福音，它的盈利模式也是非常簡單清晰。 二、 門檻

微信小程式連線MySQL資料庫（讀取+寫入）demo

通過php檔案進行資料中轉。經試驗有效可行！！！ 1、php 部分 1.1、連線資料庫

golang實現微信小程式商城後臺系統（moshopserver）

golang和c/c++比起來是一門新的語言，一直想學，網上搜集了一些資料，有些人說很容易上手，確實是這樣，和C/C++比起來，少了很多亂七八糟的語法。學一門新的語言，最好的方法就是動手寫一些東西，最近小程式也比較火

微信小程式實現錄製、試聽、上傳音訊功能（帶波形圖）

最近接到這樣一個需求，要求實現錄製、試聽、上傳音訊功能，選擇的是getBackgroundAudioManager,聲音錄製和播放波形圖是用css實現的，效果圖及詳細設計程式碼如下：

微信小程式實現滾動視訊自動播放（未優化）

先看看大概效果 1.首先需要了解微信API： wx.createIntersectionObserver(Object component, Object options)

微信小程式實現modal彈出框遮罩層元件（可帶文字框）

modal彈出框遮罩層可實現提示資訊、驗證碼等功能 然而在官方文件已經刪除了modal的頁面，說要廢棄modal

微信小程式實現吸頂特效

本文例項為大家分享了微信小程式實現吸頂特效的具體程式碼，供大家參考，具體內容如下

微信小程式實現吸頂效果

最開始的時候，在小程式中實現吸頂效果，開發工具看起來還挺好的，但是在真機上就會有問題了。 原因是我不停的去 setData 會導致操作反饋延遲嚴重，無法及時將操作處理結果及時傳遞到檢視層。

微信小程式實現二維碼簽到考勤系統

一。手動生成二維碼的.js程式碼 這裡要引入一個官方文件wxapp.qrcode.min.js let drawQrcode = require(\'../utils/wxapp.qrcode.min.js\');//引入wxapp.qrcode.min.js檔案

微信小程式實現同時上傳多張圖片

本文例項為大家分享了微信小程式實現同時上傳多張圖片的具體程式碼，供大家參考，具體內容如下

微信小程式實現上傳多個檔案 超過10個

本文例項為大家分享了微信小程式實現上傳多個檔案超過10個的具體程式碼，供大家參考，具體內容如下

微信小程式實現限制使用者轉發功能的例項程式碼

在上篇文章給大家提到微信小程式實現禁止分享程式碼例項，感興趣的朋友可以點選查閱。今天繼續給大家分享微信小程式實現限制使用者轉發功能，一起看看吧！

微信小程式實現音訊檔案播放進度的例項程式碼

問題描述 在微信小程式中經常會用到控制檔案播放的滑塊，通過滑塊可控制音訊播放進度，下面即用程式碼實現。

微信小程式實現下滑到底部自動翻頁功能

前言 這段時間接了一個微信小程式專案，從此開啟小程式的新世界大門。然後發現使用頁碼進行翻頁已經不適用於手機app，我們日常中實用的手機app或者小程式進行翻頁一般都是使用底部後下拉的方式。

微信小程式實現比較功能的方法彙總(五種方法)

首先在index.wxml頁面寫一個測試頁面 如圖： 程式碼如下 接下來就是比較功能的實現

微信小程式實現搜尋功能

在頁面search.wxml中，定義一個input輸入框以及搜尋的點選按鈕，分別為它們繫結點選事件handleInputChange()和handleSearch()的事件，同時在它們的下面定義搜尋的列表，程式碼如下所示：