专栏首页用户6811391的专栏微信小程序控制树莓派(一)

微信小程序控制树莓派(一)

工作需要,尝试通过微信小程序实现对树莓派的控制,经过一番搜索整理与编码,目前可以在本地实现通过微信小程序界面向树莓派服务器端通信。

大致知识点如下:微信小程序开发,小程序端 https 请求与服务器端通信,python3 Django 搭建服务器,将 Django 服务器部署在树莓派。

此外,此次新接触团队,被安排任务之初开始接触思维导图概念,相比之前只考虑具体技术细节,思维导图全方位展开拓展和延伸更能激发自己在技术实现的同时可以更清晰地描述整个项目。

1. 系统演示

目前仅限本地演示:树莓派端运行服务器代码,微信小程序端可输入指令动态显示树莓派回执信息;微信小程序界面可以点选按钮,动态根据服务器端返回信息回显。

当按下小程序端“上”、“下”、“左”、“右”、“停”等按钮时,服务器端会收到相应指令;在小程序端输入框输入文本信息时,服务器端也会同步显示输入信息,并检测到输入“余额”时,返回给小程序一个余额数值。

因为只是最小可行系统的演示,目前只在本地通过 ip 和端口来实现通信。

2. 微信小程序页面

小程序页面功能与布局基本围绕前端代码展开,涉及 JavaScript、HTML、CSS 知识点。具体细节可以在注册完小程序后浏览微信官方的小程序开发文档。

通常刚注册的小程序会带着个人登陆头像显示的页面功能,我在开发中保留了它的显示,页面中简单加了输入框、按钮、以及可以动态展示信息的文本框。

比如动态展示输入信息 inputValue 的文本框、绑定了输入事件 bindKeyInput 的输入框、显示服务器返回信息 board 的文本框:

<view class="usermotto">
  <view>
    <text class="user-motto">{{inputValue}}</text>
  </view>
  
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
      </view>
    </view>
  </view>
  <view>
    <text class="user-motto">{{board}}</text>
  </view>
</view>

比如上下左右停这五个按钮,分别绑定发送不同请求事件:

<view class="usermotto">
  <view>
    <text class="user-motto">{{buttonValue}}</text>
  </view>
  
  <button type="primary" style="width:30vw" bindtap="bindTop" >上</button>
  
  <view class="buttonarea">
    <button type="primary" style="width:30vw" bindtap="bindLeft">左</button>
    <text> </text>
    <button type="primary" style="width:30vw" bindtap="bindStop">停</button>
    <text> </text>
    <button type="primary" style="width:30vw" bindtap="bindRight">右</button>
  </view>
  <button type="primary" style="width:30vw" bindtap="bindDown">下</button>
</view>

3. 小程序端网络请求

因为要快速实现基本功能,网络请求我选用比较熟悉的 wx.request 请求来实现:

bindKeyInput: function (e) {
  this.setData({
    inputValue: e.detail.value
  })
  wx.request({
    url: 'http://0.0.0.0:8000/text',
    data: {
      input: this.data.inputValue
    },
    success: res => {
      if (res.statusCode == 200) {
        console.log("输入更新完毕!")
        console.log(res)
      }
      this.setData({
        board: res.data
      })
    }
  })
},

以输入框事件为例,输入框绑定了上面代码中 "bindKeyInput" 事件,可以通过 http 请求访问 "http://0.0.0.0:8000/text?input=文本框内容" 的形式发送网络请求。

当然,除了通过 wx.request 发送 http 请求,也可以通过 wx.connectSocket 来通过访问 socket 实现通信,这个取决于搭建服务器。时间有限,今天没能跑通 socket 通信,为了完成任务只能取巧来通过 http 请求来实现了。

本地调试这样操作没问题,但如果后续上线,会涉及通讯域名的问题。每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信。倘若方案可行,之后将该系统上线,还需要注册、备案域名等操作。

4. python3 Django 服务器搭建

服务器搭建也是基于之前学习 Django 简单项目的经验,创建最简单的项目,在网上搜来可以解析 request 请求拿到请求数据的处理代码。

之前是跟着 Crossin 先生的 Django 学习小组学的这部分内容,所以仍是按照最初教的先开通个 python 虚拟环境、在虚拟环境中安装 Django:

第一步:虚拟环境与Django安装

第二步:进入虚拟环境中(如果不想用,直接在正常环境中也可以),创建 Django 项目:

django-admin startproject midserver

修改 midserver/midserver/settings.py 中的 ALLOWED_HOSTS = [] 为 ALLOWED_HOSTS = ['*']

通过以下命令运行服务器:

cd midserver
python3 manage.py runserver 0.0.0.0:8000

接下来便可在浏览器中输入 http://ip:8000/ 访问,看到小火箭页面代表 Django 项目运行成功。

第三步:创建应用程序,我们最终目的是能够在服务器端解析前端传过来的 http 请求,所以需要单独的应用程序来实现请求解析。

python3 manage.py startapp CommandApi

在 midserver/settings.py 的 INSTALLED_APPS 中添加 CommandApi如下:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'CommandApi'
]

在 midserver/urls.py 中将 url 转发给 CommandApi 处理:

urlpatterns = [
    path('admin/', admin.site.urls),
    url('^',include('CommandApi.urls')),
]

在 CommandApi 中新建 urls.py 文件,处理 /command 接口。

urlpatterns = [
    url('command',views.command),
]

在 CommandApi/views.py 文件中添加 command 函数用于提取请求中的 direction 参数,并予以返回信息:

def command(request):
    direction = request.GET['direction']
    try:
        result = direction
    except:
        result = 'Error formula'
    print(f"收到指令:{result}")
    return HttpResponse(f"收到指令:{result}")

第四步:运行服务器并浏览器访问

python3 manage.py runserver 0.0.0.0:8000

此时,打开浏览器输入 "http://0.0.0.0:8000/command?direction=上",便可看到页面中显示 "收到指令:上" 信息:

因为小程序端我们采用的 request 发送的 http 请求,所以对应地发送请求部分代码如下:

bindTop: function(){
  wx.request({
    url: 'http://0.0.0.0:8000/command',
    data: {
      direction: "上"
    },
    success: res => {
      if (res.statusCode == 200) {
        this.setData({
          buttonValue: "上"
        })
      }
    }
  })
},

这样,当小程序端按下按钮“上”时,便可通过 http 请求获取到 “收到指令:上” 的返回信息。

5. 服务器部署至树莓派

因为我们最终目的是实现小程序端与树莓派端的通信控制,目前我们已经完成了小程序端和 Django 服务器端的通信,那么接下来直接在树莓派上部署该服务器便能达成目标。

树莓派上装系统、通过 VNC Viewer 实现与电脑端桌面同步这两步算前提,这样便能在电脑端图形界面直接操作树莓派中的文件。过程与之前创建 Django 项目类似,只不过换成了树莓派的 Linux 系统,此外还有可能在树莓派中直接 pip install django 报错超时无法安装成功,这个可以通过电脑端下载 Django 的压缩文件传送到树莓派中,通过解压缩的指令在树莓派中安装。

装好 Django 后,可以选择将刚电脑端的 midserver 项目代码拷贝到树莓派中,然后在树莓派中运行该服务器即可。注意,此时运行服务器就不要采用 0.0.0.0:8000 了,而是采用树莓派的 ip 地址和某个端口。相应地,小程序端发 request 请求的 ip 地址和端口也要修改一致。

最终,便可在本地实现微信小程序与树莓派间的初步通信了。

6. 后续

微信小程序控制树莓派目前看技术上可行,但因小程序需要设置通讯域名,配置该域名仍设计域名审核、小程序审核等不确定因素,是否能上线仍需验证。

目前演示用的系统方案采用 HTTPS 请求实现通信,除此之外还可采用 WebSocket 来实现通信,便可复用目前洗车机器人树莓派端通过 python socket 搭建服务器的逻辑,在此基础上与小程序实现通信,但目前该逻辑仍未能完整实现,需后续学习完善。

本文分享自微信公众号 - TTTEED(TEDxPY),作者:TEDxPY

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第一章 漫谈RaspberryPi

       Raspberry Pi(中文名为“树莓派”,简写为RPi,(或者RasPi / RPI)是为学习计算机编程教育而设计),只有信用卡大小的微型电脑,其系统...

    张国平
  • 手机控制的浇花神器

    不知道其他人有没有这样的顾虑,就是每次需要外出一些时日的时候总是担心家里的花无人浇水会干死。于是就想着是否能自己动手做一个可以用手机操控实现浇花的“半自动浇花器...

    云加社区
  • 树莓派综合项目2:智能小车(五)红外避障

      阅读本篇文章前建议先参考前期文章: 树莓派基础实验34:L298N模块驱动直流电机实验,学习了单个电机的简单驱动。 树莓派综合项目2:智能小车(一)四轮...

    张国平
  • 如何利用树莓派打造一款机器人

    作者/刘端阳,清华大学aminer.org研究者社交网络系统的R&D,参与过智谷睿拓公司(已经被小米收购)的专利挖掘,在大数据征信领域创业过,出过一本叫做《树莓...

    刘盼
  • 打造机器人:为遥控小车加一个树莓派

    2. 你已经对树莓派已有了相当的了解,并已 SD卡上烧制了 Raspbian/Wheezy系统

    博文视点Broadview
  • Python+树莓派 制作简单黑客工具U-disk-thief(U盘小偷)

    最近一直在学习Python爬虫,可能随着研究的深入,受到爬虫技术的感染,开始对获取别人的数据产生了兴趣,Python写网页爬虫是获取别人网站上的数据,那可不可以...

    小小科
  • 7月Top10树莓派改装项目:跨界改装无人机、GPS接收器、Game Boy

    树莓派(Raspberry Pi)由英国树莓派基金会开发,希望通过低价硬件和免费软件来促进学校的基本计算机科学教育。

    新智元
  • 树莓派综合项目2:智能小车(五)红外避障

    树莓派综合项目2:智能小车(二)tkinter图形界面控制,实现了本地图形界面控制小车的前进后退、转向和原地转圈。

    张国平
  • 田牌魔术 | .NET Core 3.0 + Azure 远程点亮树莓派上的一盏灯

    3年前,我写过一篇《Windows 10 IoT Core + Azure 远程控制LED》,实现了《生活大爆炸》中的注孤生实验,让信号从家里出发,绕地球转一圈...

    Edi Wang
  • 不会编程的外国小姐姐,3天、850块,徒手用树莓派DIY了个数码相机

    最近,油管上一位完全「编程小白」的小姐姐,在发现树莓派推出了一款新的相机模块后,心血来潮决定DIY一款数码相机。

    量子位
  • 树莓派综合项目2:智能小车(六)黑线循迹

    树莓派综合项目2:智能小车(二)tkinter图形界面控制,实现了本地图形界面控制小车的前进后退、转向和原地转圈。

    张国平
  • 树莓派综合项目2:智能小车(六)黑线循迹

      阅读本篇文章前建议先参考前期文章: 树莓派基础实验34:L298N模块驱动直流电机实验,学习了单个电机的简单驱动。 树莓派综合项目2:智能小车(一)四轮...

    张国平
  • 龙芯派VS树莓派 运行功耗实测

    龙芯派、树莓派都是开源硬件,并且都是定位在单板计算机的领域,外设上基本上也差不多。正好手上有这些板子,所以来测试一下手上这些板子的功耗情况。龙芯教育派、树莓派4...

    bigmagic
  • 树莓派基础实验38:逻辑分析仪分析PWM、UART信号

      逻辑分析仪是专门针对数字信号的调试工具,可长时间采集,无波形死区,支持复杂触发定位以及全面的协议内容解析。

    张国平
  • 首款微控制器级树莓派 Pico,超廉价只需4美元

    2021年1月21日,树莓派基金会发布了首款微控制器级产品:Raspberry Pi Pico。

    不脱发的程序猿
  • 如何分分钟成为Java嵌入式开发人员

    在我10年的Java布道师生涯里,没有哪次Java新版本发布能让我如此兴奋。Java 8的发布不仅在语言本身加入了些不错的新特性,还在嵌入式开发上加入了很棒的功...

    哲洛不闹
  • 除了Web和Node,JavaScript还能做什么

    提起JavaScript,我们也许经常会想到的是,可以用来写Web页面嘛,又或者,会想起Node.js 这个服务端环境,搞前后端同构。

    啦啦啦321
  • 树莓派实时图像识别回显墨水屏(软硬件教程)

    为了不让树莓派吃灰较劲了脑汁,其实这个功能很早之前就折腾过了,但是当时鼓捣的的外观并不好看,所以也没有打算分享的计划.最近一直在折腾树莓派ZERO WH,后面又...

    SAnBlog
  • 为什么说python更适合树莓派编程

    树莓派是一个非常廉价的、只有手掌大小的完全可编程的计算机。虽然树莓派的体积小,但是它的潜力无限。你可以像使用常规台式计算机一样在树莓派上创建一个非常酷的工程。例...

    砸漏

扫码关注云+社区

领取腾讯云代金券