微微信信小小程程序序实实现现树树莓莓派派 ((raspberry pi))小小车车控控制制

本文是基于上一篇“ 网页版树莓派小车控制程序”改造而成。 要也练习了一下微信小程序的开发。这里简单记录一下 要代码片

段。也是趟过了许多的坑，例如：微信小程序不支持完全全屏，微信小程序不能横屏展示。所以开发过程中也用了一些非常手段

。可以说这只是一个很基本的demo ，所以里面很多东西，比如摄像头监控ip、页面元素定位我都使用了写死的值。特别是界面

，我只是在iPhone 6上面做的实验，所以换到其他手机上时，界面就会变型了。

1. 基基本本思思路路

进入小程序时展示index页，可以让用户输入服务端url (模拟上一篇中在浏览器获取get请求)

然后跳转到实际的小车控制界面，并可以通过点击按钮实现小车控制

控制小车的移动， 要是在control.j s中定义了界面按钮事件的响应，在响应事件的过程中实现http请求的发送

index页面如下：

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

2. 代代码码结结构构如下：

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

3. index 目目录录

index .j s

1 //index.js

2 //获取应用实例

3 const app = getApp()

4

5 Page(

6 data:

7 logo: "/res/rasp-logo.png",

8 welcome: "欢迎使用树莓小车",

9 enterBtn: "进入",

10 PromoteMsg: "Please enter the server address (eg: http://x.x.x.x:8080)",

11 reqURL: ""

12 },

13 // 从输入框中获取用户输入的服务器地址信息

14 getURL: function (e)

15 this.setData(

16 reqURL: e.detail.value

17 })

18 },

19 enterClicked: function (e)

20 /*

21 * 当按下进入按钮，需要做以下事情：

22 * 1. 首先判断用户是否已经在输入框中输入完整的服务器地址

23 * 2. 发起一个到服务器的GET请求，并分析服务器的响应结果

24 * 3. 跳转到小车控制界面

25 */

26 console.log(this.data.reqURL)

27

28 if (this.data.reqURL == '')

29 wx.showModal(

30 title: '提示',

31 content: '请先输入正确的服务器地址！',

32 })

33 return

34 }

35

36 // 发起到服务器的GET请求

37 wx.request(

38 url: this.data.reqURL,

39 success: function (res)

40 // 在这里获取POST请求地址，以及视频流地址，然后赋值给全局变量，供control页面调用

41 console.log(res.data.match(/url = \"(\S*)\"/)[1])

42 console.log(res.data.match(/src=\"(\S*)\"/)[1])

43 app.globalData.postURL = res.data.match(/url = \"(\S*)\"/)[1]

44 app.globalData.cameraURL = res.data.match(/src=\"(\S*)\"/)[1]

45

46 // 跳转到control页面

47 wx.navigateTo(

48 url: '/pages