阿里云+微信小程序+GPS定位

简介: 阿里云物联网板块是一个功能非常强大的板块,而且通俗易懂,非常容易上手,比华为的要稍微容易上手一些。本次,小编通过阿里云物联网平台,将SIM800M32的GPS经纬度坐标发送到阿里云平台,并通过规则引擎转发数据至微信小程序,然后在地图上显示位置。

导言:阿里云物联网板块是一个功能非常强大的板块,而且通俗易懂,非常容易上手,比华为的要稍微容易上手一些。本次,小编通过阿里云物联网平台,将SIM800M32的GPS经纬度坐标发送到阿里云平台,并通过规则引擎转发数据至微信小程序,然后在地图上显示位置。

关键词:阿里云IOT 规则引擎 SIM800M32 微信小程序

一:移植阿里云iot-embed 嵌入式C

本次使用的平台是MTK的2503平台,模块使用的是上海芯讯通的SIM800M32模块,该模块支持GPS功能。将阿里云的iot-embed SDK移植到该平台。移植的教程可以参考阿里的官方文档。作为个人的开发者,可以找淘宝卖家或者直接联系芯讯通客服让他们提供相关的模块以及已经实现MQTT功能的软件固件。

阿里云的官方文档网址为:https://help.aliyun.com/document_detail/42648.html?spm=a2c4g.11174283.6.568.3a8b1668589RaX
image
SIM800M32的AT命令流程为:

1、注网流程:

AT+CGREG?

+CGREG: 0,1

OK

AT+COPS?

+COPS: 0,0,"CHINA MOBILE"

OK

AT+SAPBR=3,1,"Contype","GPRS"

OK

AT+SAPBR=3,1,"APN","CMNET"

OK

AT+SAPBR=1,1

OK

AT+SAPBR=2,1

+SAPBR: 1,1,"10.80.195.168"

OK

2、生成gps数据:

AT+CLBS=4,1

+CLBS: 0,106.639799,29.488946,550,XX/XX/XX,XX:XX:XX

OK

3、通过mqtt发送gps数据:

AT+IMQTTAUTH="xxx","yyy","zzz"

OK

+IMQTTAUTH:OK

AT+IMQTTCONN

OK

AT+IMQTTSUB="/XXXX/XXXXX/user/gps",0

+IMQTTSUB: 1

OK

+IMQTTSUB: 1,0

AT+IMQTTPUB="XXXX/XXXXX/user/gps",0

+IMQTTPUB: 0

OK

通过以上步骤,gps数据已经成功发送到阿里云服务器上了。

二:在阿里云物联网平台创建产品和设备,并进行规则引擎的配置

1、这里因为是嵌入式C设备和微信小程序两个设备进行通信,所以需要创建两个产品和设备。

嵌入式设备是2G通信设备所以通信协议需要设置为蜂窝通信

image


微信小程序还是用原来的产品和设备名吧,这个我之前在《微信小程序一分钟上云》中演示过。

2、创建规则引擎:

通过创建规则去创建从topic到topic的数据流转。

这里我设置了两个自定义的主题,所以SELECT这里我设置为longitude as l, latitude as t。

image

image

如上图所示,我们的规则引擎就创建成功了。

三:编写微信小程序

1、这次微信小程序需要用到百度地图组件,所以我开通了百度的SDK权限。方法如下:

在百度地图最下方找到地图开放平台,并在开发文档中找到微信小程序JavaScript API。根据开发文档进行设置,这里我们使用的逆地址解析功能。

image


image

微信小程序相关代码如下:

代码一:连接阿里云

bindSubmit: function(e) {
    // 引入包
    var iot = require('../../dist/alibabacloud-iot-device-sdk.min.js');
    // 定义云端创建的设备三元组信息,并使用协议声明,使用 "protocol": 'alis://'
    const sdk_device = {
      "productKey": this.data.key,
      "deviceName": this.data.name,
      "deviceSecret": this.data.secret,
      "protocol": 'wxs://',
    }

    wx.setStorageSync('longitude', longitude);
    wx.setStorageSync('latitude', latitude);
    // 连接云平台
    let device = iot.device(sdk_device);

    // 当连接成功进入回调
    device.on('connect', () => {
      console.log('连接成功....');
      device.subscribe('/<productKey>/<deviceName>/user/currenttemp');

      wx.redirectTo({
        url: '../alimqtt/alimqtt',
      })
    });

    device.on('message', (topic, payload) => {
      console.log('topic:', topic);
      if (payload) {
        console.log('payload', payload);
        var jsonString = payload.toString();
        console.log('payload.toString()', jsonString);
        var jsObject = JSON.parse(jsonString);
        console.log('payload.toString()', jsObject.l, jsObject.t);
        longitude = jsObject.l;
        latitude = jsObject.t;
        wx.setStorageSync('longitude', longitude);
        wx.setStorageSync('latitude', latitude);
      }
    });

代码二:在百度地图上定位

    var that = this;
    // 新建百度地图对象 
    var BMap = new bmap.BMapWX({
      ak: 'ekLPZDaZsGonChTnpUXkUDx56kfCjDgV'
    });
    var fail = function(data) {
      console.log(data)
    };
    var success = function(data) {
      wxMarkerData = data.wxMarkerData;
      wxMarkerData[0].latitude = wx.getStorageSync('latitude');
      wxMarkerData[0].longitude = wx.getStorageSync('longitude');
      that.setData({
        markers: wxMarkerData
      });
      that.setData({
        latitude: wxMarkerData[0].latitude
      });
      that.setData({
        longitude: wxMarkerData[0].longitude
      });
    }
    // 发起regeocoding检索请求 
    BMap.regeocoding({
      fail: fail,
      success: success,
      iconPath: '../../img/marker_red.png',
      iconTapPath: '../../img/marker_red.png'
    });
  },

四:最后的显示效果如下:

image

这是自己实实在在做出来的,就希望和感兴趣的一起交流学习,不喜勿喷,如果有感兴趣的可以关注微信公众号——物联网人家,获取完整的代码,谢谢

image

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
664 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
734 1
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
56 1
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
84 6
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
235 1
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
896 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
3月前
|
人工智能 小程序 Java
【评测】玩转阿里云《10 分钟构建 AI 客服并应用到网站、钉钉或微信中》
本文介绍了使用阿里云百炼大模型在10分钟内构建AI客服,并应用于网站、钉钉或微信中的体验。作者“JavaDog程序狗”详细描述了从搭建到完成的全过程,包括快速上手、遇到的问题及解决方法、定制化需求以及云产品的整体体验。文档清晰易懂,集成过程顺畅,客服支持响应迅速,定制功能满足特定业务需求,总体体验极佳,适合开发者尝试。
163 5
【评测】玩转阿里云《10 分钟构建 AI 客服并应用到网站、钉钉或微信中》
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
441 0
|
2月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
634 0
|
3月前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
128 3