SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能

简介: (1) 微信开发环境的搭建(2) 如何通过微信公众号消费API(3) 微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据(4) 如何将SAP C4C主数据变化推送给微信公众号(5) 如何将SAP UI5应用嵌入到微信公众号菜单中(6) 如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中(7) 使用Redis存储微信用户和公众号的对话记录(8) 微信公众号的地图集成:100行代码在微信公众号里集成地图搜索功能( 本文 )(9) 如何将微信用户发送到微信公众号的消息保存到SAP C4C系统(10) 如何在SAP C4C系统直接回复消息给

本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上。


系列目录


(1) 微信开发环境的搭建


(2) 如何通过微信公众号消费API


(3) 微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据


(4) 如何将SAP C4C主数据变化推送给微信公众号


(5) 如何将SAP UI5应用嵌入到微信公众号菜单中


(6) 如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中


(7) 使用Redis存储微信用户和公众号的对话记录


(8) 微信公众号的地图集成:100行代码在微信公众号里集成地图搜索功能( 本文 )


(9) 如何将微信用户发送到微信公众号的消息保存到SAP C4C系统


(10) 如何在SAP C4C系统直接回复消息给微信公众号的订阅者


最近有不少朋友在微信上向我咨询SAP系统和微信公众号集成的问题,因此我把当时写的英文版翻译成中文,重新发布在我的公众号上。


需要注意的是,时隔三年,微信公众号的开发流程可能有所变化,请大家自行鉴别。和微信公众号集成的系统,我三年前选择的是SAP Cloud for Customer.


Jerry之前在SAP成都研究院数字创新空间工作时,经常需要做一些在微信app里展示的原型,而微信里直接进行地图搜索,已经是国内客户公认的一个最基本的需求了。


Jerry当时工作中需要给某个微信公众号增添一个新的菜单,用户点击之后,需要在微信app内嵌的浏览器里,使用地图搜索功能。我当时在网上找了很多例子,都是基于前端框架比如jQuery,Bootstrap,Vue来开发的。我觉得对于实现我那个简单的地图搜索需求来说,这些前端框架太重了,因此自己花了一点时间,把网上找到的一个例子的地图搜索功能,从其前端实现框架中剥离出来,之后这个例子无需任何前端框架即可运行。


image.png


这个地图搜索的功能使用起来很简单,在微信公众号里通过菜单打开我剥离之后,纯HTML/JavaScript实现的百度地图的搜索界面后,在input字段里输入地址,然后点Search按钮,即可自动定位到目的地址。


image.png


地图的放大和缩小,地图类型的切换都是百度地图库本身提供的,开发人员无需任何额外的编程工作。


image.png


完整代码在我的Github上。


下面是部分代码说明。


这个微信公众号地图集成的思路还是和 如何将SAP UI5应用嵌入到微信公众号菜单中 提到的一样,即先在本地开发一个能提供地图搜索的网页应用,测试通过后将其部署到云平台,将部署到云平台后生成的url绑定到微信公众号菜单即可。


我的这个地图搜索网页应用只需要实现唯一的一个index.html,源代码刚好100行:

image.pngimage.png



可以复制粘贴的代码地址如下。


网页加载时,onload hook触发函数findDefaultLocation, 将默认地址,成都,定位并显示在地图上。


image.png


新建一个文件夹map,将index.html放至其内,用url /map映射到map文件夹:


image.png


这样我们在浏览器地址栏里添加/map的片段,就能通过nodejs express库,访问到map文件夹下的index.html网页了。该nodejs应用部署到云平台后的访问效果如下:


浏览器输入https://wechatjerry.herokuapp.com/map/


默认自动定位到成都:


image.png


最后调用 如何将SAP UI5应用嵌入到微信公众号菜单中 提到的微信公众号菜单创建API,将下列JSON负载传入API,即可将云平台上的地图搜索网页应用同新建的微信公众号菜单绑定在一起。


image.png


本系列最后两篇文章,也是最有用的两个场景,即:


(1) 如何将微信用户发送给微信公众号的内容自动转存到SAP C4C系统

(2) 如何在SAP C4C系统内直接回复消息到用户的微信app上


敬请期待。


系列目录


(1) 微信开发环境的搭建


(2) 如何通过微信公众号消费API


(3) 微信用户关注公众号之后,自动在SAP C4C系统创建客户主数据


(4) 如何将SAP C4C主数据变化推送给微信公众号


(5) 如何将SAP UI5应用嵌入到微信公众号菜单中


(6) 如何通过OAuth2获取微信用户信息并显示在SAP UI5应用中


(7) 使用Redis存储微信用户和公众号的对话记录


(8) 微信公众号的地图集成:100行代码在微信公众号里集成地图搜索功能( 本文 )


(9) 如何将微信用户发送到微信公众号的消息保存到SAP C4C系统


(10) 如何在SAP C4C系统直接回复消息给微信公众号的订阅者


相关文章
|
2天前
|
存储 传感器 编解码
LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机
LabVIEW风力涡轮机的雷电流测量系统中集成高速摄像机
|
3天前
|
搜索推荐 Java 数据库
springboot集成ElasticSearch的具体操作(系统全文检索)
springboot集成ElasticSearch的具体操作(系统全文检索)
|
13天前
|
运维 Kubernetes 持续交付
构建高效自动化运维系统:基于容器技术的持续集成与持续部署实践
【4月更文挑战第30天】 在快速发展的云计算时代,传统的运维模式已无法满足敏捷开发和快速迭代的需求。本文将介绍如何利用容器技术搭建一套高效自动化运维系统,实现软件的持续集成(CI)与持续部署(CD)。文章首先探讨了现代运维面临的挑战,接着详细阐述了容器技术的核心组件和工作原理,最后通过实际案例展示了如何整合这些组件来构建一个可靠、可扩展的自动化运维平台。
|
20天前
|
敏捷开发 缓存 Devops
构建高效持续集成系统的策略与实践
【4月更文挑战第23天】 在快速迭代的软件开发过程中,持续集成(CI)是确保代码质量和加速交付的关键。本文深入探讨了构建和维护一个高效CI系统的方法和最佳实践。从自动化测试到部署策略,文中细致分析了各环节的优化技巧,并提供了解决常见问题的实用建议。通过案例研究和工具选型,读者将获得构建强大CI流程的具体指导,以支持敏捷和DevOps环境下的高质量软件发布。
|
1月前
|
运维 Kubernetes 监控
构建高效自动化运维系统:基于容器技术的持续集成与部署策略
【4月更文挑战第4天】在数字化转型的浪潮中,企业对于软件交付的速度和质量要求越来越高。传统的运维模式已无法满足敏捷开发和快速迭代的需求。本文旨在探讨如何利用容器技术构建一个高效的自动化运维系统,实现软件开发生命周期中的持续集成(CI)与持续部署(CD)。通过分析容器技术的核心优势,结合DevOps文化和微服务架构,我们提出了一套系统的构建策略和实践步骤。文章将详细阐述从环境搭建到流程优化的全过程,以及在此过程中可能遇到的挑战和解决方案,为运维专业人员提供参考和指导。
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
32 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
22 0
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
35 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
35 0

热门文章

最新文章