阿里云+微信小程序+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
相关文章
ly~
|
9天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
42 6
|
3月前
|
小程序
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
【微信小程序-原生开发】实用教程12 - 注册页(含获取用户微信昵称,原生form的表单提交,t-result 的使用)
32 0
|
1月前
|
人工智能 小程序 Java
【评测】玩转阿里云《10 分钟构建 AI 客服并应用到网站、钉钉或微信中》
本文介绍了使用阿里云百炼大模型在10分钟内构建AI客服,并应用于网站、钉钉或微信中的体验。作者“JavaDog程序狗”详细描述了从搭建到完成的全过程,包括快速上手、遇到的问题及解决方法、定制化需求以及云产品的整体体验。文档清晰易懂,集成过程顺畅,客服支持响应迅速,定制功能满足特定业务需求,总体体验极佳,适合开发者尝试。
114 5
【评测】玩转阿里云《10 分钟构建 AI 客服并应用到网站、钉钉或微信中》
|
29天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
8天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
人工智能 自然语言处理 Serverless
阿里云百炼应用实践系列-让微信公众号成为智能客服
本文主要介绍如何基于百炼平台快速在10分钟让您的微信公众号(订阅号)变成 AI 智能客服。我们基于百炼平台的能力,以官方帮助文档为参考,让您的微信公众号(订阅号)成 为AI 智能客服,以便全天候(7x24)回应客户咨询,提升用户体验,介绍了相关技术方案和主要代码,供开发者参考。
阿里云百炼应用实践系列-让微信公众号成为智能客服
|
2月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
2月前
|
小程序 前端开发 JavaScript
微信小程序实现微信支付(代码和注释很详细)
微信小程序实现微信支付(代码和注释很详细)
|
3月前
|
小程序
尝试使用阿里云服务器搭建微信小程序
华北电力大学核工程大一学生,出于对编程的热爱与大创项目需求,涉足微信小程序搭建。初期在实验指导下克服不熟悉编程的困难,但后期发现教程引导不足,尤其是对于代码定位缺乏清晰指引。建议加强网页图像指导,以适应不同编程水平用户,尤其是新手。
尝试使用阿里云服务器搭建微信小程序
|
2月前
|
小程序
uni-app——微信小程序设置全局分享
uni-app——微信小程序设置全局分享
68 0
下一篇
无影云桌面