本文是基于上一篇“網(wǎng)頁版樹莓派小車控制程序”改造而成。主要也練習(xí)了一下微信小程序的開發(fā)。這里簡單記錄一下主要代碼片段。也是趟過了許多的坑，例如：微信小程序不支持完全全屏，微信小程序不能橫屏展示。所以開發(fā)過程中也用了一些非常手段?？梢哉f這只是一個(gè)很基本的demo，所以里面很多東西，比如攝像頭監(jiān)控ip、頁面元素定位我都使用了寫死的值。特別是界面，我只是在iPhone 6上面做的實(shí)驗(yàn)，所以換到其他手機(jī)上時(shí)，界面就會變型了。

1. 基本思路

index頁面如下： 

進(jìn)去之后的頁面如下（其中中間空白處會展示攝像頭監(jiān)控，不過我并沒有啟動(dòng)，所以看不見）：

2. 代碼結(jié)構(gòu)如下：

其中，index下面是首頁，control是控制頁面，res目錄下存放的是圖片資源

3. index目錄

index.js

//index.js//獲取應(yīng)用實(shí)例const app = getApp() Page({ data: { logo: "/res/rasp-logo.png", welcome: "歡迎使用樹莓小車", enterBtn: "進(jìn)入", PromoteMsg: "Please enter the server address (eg: http://x.x.x.x:8080)", reqURL: "" }, // 從輸入框中獲取用戶輸入的服務(wù)器地址信息 getURL: function (e) { this.setData({ reqURL: e.detail.value }) }, enterClicked: function (e) { /* * 當(dāng)按下進(jìn)入按鈕，需要做以下事情： * 1. 首先判斷用戶是否已經(jīng)在輸入框中輸入完整的服務(wù)器地址 * 2. 發(fā)起一個(gè)到服務(wù)器的GET請求，并分析服務(wù)器的響應(yīng)結(jié)果 * 3. 跳轉(zhuǎn)到小車控制界面 */ console.log(this.data.reqURL)  if (this.data.reqURL == '') { wx.showModal({ title: '提示', content: '請先輸入正確的服務(wù)器地址！', }) return }  // 發(fā)起到服務(wù)器的GET請求 wx.request({ url: this.data.reqURL, success: function (res) { // 在這里獲取POST請求地址，以及視頻流地址，然后賦值給全局變量，供control頁面調(diào)用 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]  // 跳轉(zhuǎn)到control頁面 wx.navigateTo({  url: '/pages/control/control', }) }, fail: function(res) { wx.showModal({  title: '提示',  content: '請檢查輸入的服務(wù)器地址！', }) } }) }})