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

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

1. 基本思路

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 == '') { 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: '请检查输入的服务器地址！', }) } }) }})