ホームページ >WeChat アプレット >ミニプログラム開発 >WeChat アプレット -- Raspberry Pi 車制御のコード フロー

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

php是最好的语言
php是最好的语言オリジナル
2018-08-07 10:04:245278ブラウズ

ディレクトリ

1. 基本的な考え方

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

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

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

1. 基本的なアイデア

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

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

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

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

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

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

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

WeChat アプレット -- Raspberry Pi 車制御のコード フローその中で、index 以下はホームページ、control はコントロール ページ、res ディレクトリには画像リソースが格納されます

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

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

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(&#39;logs&#39;) || []
        logs.unshift(Date.now())
        wx.setStorageSync(&#39;logs&#39;, logs)
    
        // 登录
        wx.login({
          success: res => {
            // 发送 res.code 到后台换取 openId, sessionKey, unionId
          }
        })
        // 获取用户信息
        wx.getSetting({
          success: res => {
            if (res.authSetting[&#39;scope.userInfo&#39;]) {
              // 已经授权,可以直接调用 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。