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

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "树莓小车", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false, "navigationStyle": "custom", "disableScroll": true }

control.wxml

<!--pages/control/control.wxml--> <view> <!-- This image shows the camera view --> <image src='http://192.168.1.104:8080/?action=stream'></image> <!-- The following six images control the car move --> <image src='https://www.jb51.net/{{forwardBtn}}' bindtouchstart='carMove' data-direction='F' bindtouchend='carStop'></image> <image src='https://www.jb51.net/{{leftBtn}}' bindtouchstart='carMove' data-direction='L' bindtouchend='carStop'></image> <image src='https://www.jb51.net/{{rightBtn}}' bindtouchstart='carMove' data-direction='R' bindtouchend='carStop'></image> <image src='https://www.jb51.net/{{backLeftBtn}}' bindtouchstart='carMove' data-direction='BL' bindtouchend='carStop'></image> <image src='https://www.jb51.net/{{backRightBtn}}' bindtouchstart='carMove' data-direction='BR' bindtouchend='carStop'></image> <image src='https://www.jb51.net/{{backBtn}}' bindtouchstart='carMove' data-direction='B' bindtouchend='carStop'></image> <!-- The following images control the camera move --> <image src='https://www.jb51.net/{{upBtn}}' bindtouchstart='camMove' data-direction='VU'></image> <image src='https://www.jb51.net/{{camLeftBtn}}' bindtouchstart='camMove' data-direction='HL'></image> <image src='https://www.jb51.net/{{camRightBtn}}' bindtouchstart='camMove' data-direction='HR'></image> <image src='https://www.jb51.net/{{downBtn}}' bindtouchstart='camMove' data-direction='VD'></image> <image src='https://www.jb51.net/{{resetBtn}}' bindtouchstart='camMove' data-direction='RESET'></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('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId } }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 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: