WeChat アプレット -- Raspberry Pi 車制御のコード フロー

ディレクトリ

1. 基本的な考え方

2. コード構造は次のとおりです:

3. コントロールディレクトリ

5. 主にWeChatアプレットの開発を実践しました。 。ここでは、主要なコード スニペットの簡単な記録を示します。また、多くの落とし穴も経験しました。たとえば、WeChat アプレットは全画面表示をサポートしておらず、WeChat アプレットは水平に表示できません。そのため、開発の過程ではいくつかの奇抜な手段も使用されました。これは非常に基本的なデモであると言えるので、カメラ監視 IP やページ要素の位置など、多くのことにハードコーディングされた値を使用しました。特にインターフェイスについては、iPhone 6 でのみ実験を行ったので、他の携帯電話に切り替えるとインターフェイスが変わります。

1. 基本的なアイデア

ミニプログラムに入るときにインデックスページを表示し、ユーザーがサーバーのURLを入力できるようにします（前の記事のブラウザでのgetリクエストをシミュレートします）

• その後、実際のプログラムにジャンプします車の制御インターフェースがあり、ボタンをクリックすることで車を制御できます

• 車の動きを制御するには、主なことは、control.jsでインターフェースのボタンイベントへの応答を定義し、httpリクエストの送信を実装することですイベント対応中

• index ページは以下の通りです:

入力後のページは以下の通りです(真ん中の空白にカメラ監視が表示されますが、まだ起動していません) 、なので見えません）:

2. コード構造は次のとおりです:

その中で、index 以下はホームページ、control はコントロール ページ、res ディレクトリには画像リソースが格納されます

3. インデックスディレクトリ

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

index.json: データなし、1 つのペアのみ Brackets

• index.wxml

• <!--index.wxml-->
  <view>
    <view class="welcome">
      <view class="logo">
        <image style="width: 250rpx; height: 250rpx" src="{{logo}}"></image>
      </view>
      <view>
        <text class="words">{{welcome}}</text>
      </view>
    </view>
  
    <input class="requestURL" type="text" placeholder="{{PromoteMsg}}" focus=&#39;1&#39; cursor=&#39;10&#39; confirm-type="done" bindinput=&#39;getURL&#39;></input>
    <button class=&#39;enter&#39; bindtap=&#39;enterClicked&#39;>{{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.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

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

control.wxml

• <!--pages/control/control.wxml-->
  <view class=&#39;control&#39;>
    <!-- This image shows the camera view -->
    <image class=&#39;cameraView&#39; src=&#39;http://192.168.1.104:8080/?action=stream&#39; style="z-index:1"></image>
  
    <!-- The following six images control the car move  -->
    <image class=&#39;button&#39; id=&#39;forward&#39; src=&#39;{{forwardBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;F&#39; bindtouchend=&#39;carStop&#39;></image>
    <image class=&#39;button&#39; id=&#39;left&#39; src=&#39;{{leftBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;L&#39; bindtouchend=&#39;carStop&#39;></image>
    <image class=&#39;button&#39; id=&#39;right&#39; src=&#39;{{rightBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;R&#39; bindtouchend=&#39;carStop&#39;></image>
    <image class=&#39;button&#39; id=&#39;backLeft&#39; src=&#39;{{backLeftBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;BL&#39; bindtouchend=&#39;carStop&#39;></image>
    <image class=&#39;button&#39; id=&#39;backRight&#39; src=&#39;{{backRightBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;BR&#39; bindtouchend=&#39;carStop&#39;></image>
    <image class=&#39;button&#39; id=&#39;back&#39; src=&#39;{{backBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;carMove&#39; data-direction=&#39;B&#39; bindtouchend=&#39;carStop&#39;></image>
  
    <!-- The following images control the camera move  -->
    <image class=&#39;button&#39; id=&#39;up&#39; src=&#39;{{upBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;VU&#39;></image>
    <image class=&#39;button&#39; id=&#39;camLeft&#39; src=&#39;{{camLeftBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;HL&#39;></image>
    <image class=&#39;button&#39; id=&#39;camRight&#39; src=&#39;{{camRightBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;HR&#39;></image>
    <image class=&#39;button&#39; id=&#39;down&#39; src=&#39;{{downBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;VD&#39;></image>
    <image class=&#39;button&#39; id=&#39;reset&#39; src=&#39;{{resetBtn}}&#39; style="position:absolute;z-index:2" bindtouchstart=&#39;camMove&#39; data-direction=&#39;RESET&#39;></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:

• {
    "pages": [
      "pages/index/index",
      "pages/control/control"
    ],
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "树莓小车",
      "navigationBarTextStyle": "black",
      "showStatusBar": false
    }
  }

app.wxss:

• /**app.wxss**/
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
  }

project.control.json:

• {
  	"description": "项目配置文件。",
  	"packOptions": {
  		"ignore": []
  	},
  	"setting": {
  		"urlCheck": false,
  		"es6": true,
  		"postcss": true,
  		"minified": true,
  		"newFeature": true
  	},
  	"compileType": "miniprogram",
  	"libVersion": "2.0.4",
  	"appid": "wx18414b9f85bfc895",
  	"projectname": "wechat-control",
  	"isGameTourist": false,
  	"condition": {
  		"search": {
  			"current": -1,
  			"list": []
  		},
  		"conversation": {
  			"current": -1,
  			"list": []
  		},
  		"game": {
  			"currentL": -1,
  			"list": []
  		},
  		"miniprogram": {
  			"current": -1,
  			"list": []
  		}
  	}
  }

  関連する推奨事項:

Raspberry Pi Pi、RPi の詳細な紹介)

Raspberry Pi を使用して会話型を実装するrobot_PHP チュートリアル

以上がWeChat アプレット -- Raspberry Pi 車制御のコード フローの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。