首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 12, 2020

本文是基于上一篇“网页版树莓派小车控制程序”改造而成。主要也练习了一下微信小程序的开发。这里简单记录一下主要代码片段。也是趟过了许多的坑，例如：微信小程序不支持完全全屏，微信小程序不能横屏展示。所以开发过程中也用了一些非常手段。可以说这只是一个很基本的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",
 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='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",
 "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）小车控制

- Author -

weixin_42534940

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript hashtable 修正版 下载
Dec 30 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
js格式化时间的方法
Dec 18 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 #Javascript
使用webpack搭建pixi.js开发环境
Feb 12 #Javascript
十分钟教你上手ES2020新特性
Feb 12 #Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 #Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 #Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 #Javascript
浅析vue-router实现原理及两种模式
Feb 11 #Javascript
Spring Bean(1) EditText(1) Spring JPA(1) REST(1) openEuler(1) Django(9) TextInputLayout(1) cmd(1) 远程桌面(2) Switch(1)
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP中session变量的销毁
2014/02/27 PHP
php计算title标题相似比的方法
2015/07/29 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Vue项目部署的实现（阿里云+Nginx代理+PM2）
2019/03/26 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
利用Python进行数据可视化常见的9种方法！超实用！
2018/07/11 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python列表与元组的异同详解
2019/07/02 Python
python自动点赞功能的实现思路
2020/02/26 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
HTML5新特性 多线程（Worker SharedWorker）
2017/04/24 HTML / CSS
亚马逊西班牙购物网站：amazon西班牙
2017/03/06 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
让子弹飞观后感
2015/06/11 职场文书
工作汇报材料难写？方法都在这里了！
2019/07/01 职场文书