1. 基本思路

2. 代码结构如下：

3. index目录

4. control目录

5. 工程全局控制

首页

微信小程序

小程序开发

微信小程序--树莓派（raspberry pi）小车控制的代码流程

php是最好的语言

Aug 07, 2018 am 10:04 AM

微信小程序

1. 基本思路

2. 代码结构如下：

3. index目录

4. control目录

5. 工程全局控制

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

1. 基本思路

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

index页面如下：

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

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. 首先判断用户是否已经在输入框中输入完整的服务器地址
     * 2. 发起一个到服务器的GET请求，并分析服务器的响应结果
     * 3. 跳转到小车控制界面
    */
    console.log(this.data.reqURL)

    if (this.data.reqURL == &#39;&#39;) {
      wx.showModal({
        title: &#39;提示&#39;,
        content: &#39;请先输入正确的服务器地址！&#39;,
      })
      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: &#39;/pages/control/control&#39;,
        })
      },
      fail: function(res) {
        wx.showModal({
          title: &#39;提示&#39;,
          content: &#39;请检查输入的服务器地址！&#39;,
        })
      }
    })
  }
})

登录后复制

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": []
		}
	}
}

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7470

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

闲鱼微信小程序正式上线 Feb 10, 2024 pm 10:39 PM

闲鱼官方微信小程序悄然上线，在小程序中可以发布闲置与买家/卖家私信交流、查看个人资料及订单、搜索物品等，有用好奇闲鱼微信小程序叫什么，现在快来看一下。闲鱼微信小程序叫什么答案：闲鱼，闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能；3、想要使用的话必要要开通微信支付才可以购买；

微信小程序实现图片上传功能 Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展，微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景，还支持开发者自定义功能，其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能，并提供具体的代码示例。一、前期准备工作在开始编写代码之前，我们需要先下载并安装微信开发者工具，并注册成为微信开发者。同时，还需要了解微信

实现微信小程序中的下拉菜单效果 Nov 21, 2023 pm 03:03 PM

实现微信小程序中的下拉菜单效果，需要具体代码示例随着移动互联网的普及，微信小程序成为了互联网开发的重要一环，越来越多的人开始关注和使用微信小程序。微信小程序的开发相比传统的APP开发更加简便快捷，但也需要掌握一定的开发技巧。在微信小程序的开发中，下拉菜单是一个常见的UI组件，实现了更好的用户操作体验。本文将详细介绍如何在微信小程序中实现下拉菜单效果，并提供具

实现微信小程序中的图片滤镜效果 Nov 21, 2023 pm 06:22 PM

实现微信小程序中的图片滤镜效果随着社交媒体应用的流行，人们越来越喜欢在照片中应用滤镜效果，以增强照片的艺术效果和吸引力。在微信小程序中也可以实现图片滤镜效果，为用户提供更多有趣和创造性的照片编辑功能。本文将介绍如何在微信小程序中实现图片滤镜效果，并提供具体的代码示例。首先，我们需要在微信小程序中使用canvas组件来加载和编辑图片。canvas组件可以在页面

使用微信小程序实现轮播图切换效果 Nov 21, 2023 pm 05:59 PM

使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序，具有简单、高效的开发和使用特点。在微信小程序中，实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果，并给出具体的代码示例。首先，在微信小程序的页面文件中，添加一个轮播图组件。例如，可以使用<swiper>标签来实现轮播图的切换效果。在该组件中，可以通过b

闲鱼微信小程序叫什么 Feb 27, 2024 pm 01:11 PM

闲鱼官方微信小程序已经悄然上线，它为用户提供了一个便捷的平台，让你可以轻松地发布和交易闲置物品。在小程序中，你可以与买家或卖家进行私信交流，查看个人资料和订单，以及搜索你想要的物品。那么闲鱼在微信小程序中究竟叫什么呢，这篇教程攻略将为您详细介绍，想要了解的用户们快来跟着本文继续阅读吧！闲鱼微信小程序叫什么答案：闲鱼，闲置交易二手买卖估价回收。1、在小程序中可以发布闲置、与买家/卖家私信交流、查看个人资料及订单、搜索指定物品等功能;2、在小程序的页面中有首页、附近、发闲置、消息、我的5项功能；3、

如何使用PHP开发微信小程序的二手交易功能？ Oct 27, 2023 pm 05:15 PM

如何使用PHP开发微信小程序的二手交易功能？微信小程序作为一种热门的移动应用开发平台，被越来越多的开发者所使用。在微信小程序中，二手交易是一种常见的功能需求。本文将介绍如何使用PHP开发微信小程序的二手交易功能，并提供具体的代码示例。一、准备工作在开始开发前，需要先确保已具备以下条件：微信小程序的开发环境已搭建完成，包括注册小程序的AppID，并在小程序后台

实现微信小程序中的图片旋转效果 Nov 21, 2023 am 08:26 AM

实现微信小程序中的图片旋转效果，需要具体代码示例微信小程序是一种轻量级的应用程序，为用户提供了丰富的功能和良好的用户体验。在小程序中，开发者可以利用各种组件和API来实现各种效果。其中，图片旋转效果是一种常见的动画效果，可以为小程序增添趣味性和视觉效果。在微信小程序中实现图片旋转效果，需要使用小程序提供的动画API。下面是一个具体的代码示例，展示了如何在小程

See all articles

微信小程序--树莓派（raspberry pi）小车控制的代码流程

1. 基本思路

2. 代码结构如下：

3. index目录

4. control目录

5. 工程全局控制

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题