微微信信小小程程序序实实现现树树莓莓派派 ((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