本文是基于上一篇“网页版树莓派小车控制程序”改造而成。主要也练习了一下微信小程序的开发。这里简单记录一下主要代码片段。也是趟过了许多的坑，例如：微信小程序不支持完全全屏，微信小程序不能横屏展示。所以开发过程中也用了一些非常手段。可以说这只是一个很基本的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: :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> <view> <image src="https://www.jb51.net/{{logo}}"></image> </view> <view> <text>{{welcome}}</text> </view> </view> <input type="text" placeholder="{{PromoteMsg}}" focus='1' cursor='10' confirm-type="done" bindinput='getURL'></input> <button 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