微信小程序实现树莓派（raspberry pi）小车控制

2023-08-01 17:23:08 279

本文是基于上一篇“网页版树莓派小车控制程序”改造而成。主要也练习了一下微信小程序的开发。这里简单记录一下主要代码片段。也是趟过了许多的坑，例如：微信小程序不支持完全全屏，微信小程序不能横屏展示。所以开发过程中也用了一些非常手段。可以说这只是一个很基本的demo，所以里面很多东西，比如摄像头监控ip、页面元素定位我都使用了写死的值。特别是界面，我只是在iPhone6上面做的实验，所以换到其他手机上时，界面就会变型了。

1.基本思路

进入小程序时展示index页，可以让用户输入服务端url（模拟上一篇中在浏览器获取get请求）
然后跳转到实际的小车控制界面，并可以通过点击按钮实现小车控制
控制小车的移动，主要是在control.js中定义了界面按钮事件的响应，在响应事件的过程中实现http请求的发送

index页面如下：

进去之后的页面如下（其中中间空白处会展示摄像头监控，不过我并没有启动，所以看不见）：

2.代码结构如下：

其中，index下面是首页，control是控制页面，res目录下存放的是图片资源

3.index目录

index.js

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

Page({
data:{
logo:"/res/rasp-logo.png",
welcome:"欢迎使用树莓小车",
enterBtn:"进入",
PromoteMsg:"Pleaseentertheserveraddress(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








{{welcome}}




{{enterBtn}}

index.wxss

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

.requestURL{
margin:50rpx10rpx30rpx10rpx;
border:1pxsolidgray;
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
constapp=getApp()

Page({

/**
*页面的初始数据
*/
data:{
//Carcontrolimages
"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",

//Cameracontrolimages
"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("posturlincontrolpage:"+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

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(){
//展示本地存储能力
varlogs=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",
"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:200rpx0;
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":[]
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实现树莓派（raspberry pi）小车控制

热门推荐

随机推荐