干货分享！微信公众平台开发笔记，接入微信登录、微信支付、百度地图、GPS定位等多种接口

　　今天要与大家分享的干货是我公司为客户研发的一款微信公众号的项目，通过在微信中搜索公众号“瑜伽之旅”，并添加关注后，可体验项目中的各项功能。

　　瑜伽之旅是一款为瑜伽馆、瑜伽教练和瑜伽爱好者之间搭建一个社交关系平台的微信公众号，用户在此平台上可以搜索离自己最近的瑜伽馆、学习瑜伽知识、预约瑜伽课程，也可通过微信支付进行相关付费。

　　千助在本项目的开发上历时 2-3 个月的时间，前端采用了 HTML5 + CSS3 的响应式布局，项目中涉及了多个移动端的技术应用，下面我们一起来分享一下。

　　一、使用 HTML5 Geolocation 地理定位技术，找到用户所在位置

　　通过点击微信公众号下方的菜单“瑜伽馆”，可以进入到瑜伽之旅的界面，在此界面中，当我们点击“查找场馆”时，系统将通过程序调用GPS功能，定位用户的移动设备所在的地区 ( 例如北京 ) ，并显示该地区的瑜伽馆列表，供用户选择。

　　调用GPS定位功能采用的是 HTML5 Geolocation ( 地理定位 ) 技术，对于拥有 GPS 的设备，比如 iPhone或其他的智能移动终端，地理定位会非常精确。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。所以，当使用GPS功能时，微信会主动询问我们是否允许将自己的当前位置开放给该平台，以保证隐私安全。

　　二、通过经纬度计算地球表面两点间的距离，为用户找到最近的瑜伽馆

　　无论是系统通过定位获取的用户地理位置，还是瑜伽馆商家在地图上标点的瑜伽馆位置，都是通过经纬度来表示的。在项目研发中，我们通过一种计算公式，结合两点的经度和纬度坐标，可以计算出地球表面两点间的距离。将该公式应用到微信用户与各个瑜伽馆的距离计算中，可换算为公里数为用户列出离自己最近的瑜伽馆，方便用户就近选择。

　　我们再来看下商家在后台是如何为自己的瑜伽馆在地图上标点的吧。

　　商家在后台可以通过百度地图搜索自己瑜伽馆所在的大概位置，并通过地图的缩放功能，显示出精确的街道场景，并手动在地图上进行准确标点，提交保存。

　　三、接入百度地图接口，全城展示您身边的瑜伽馆

　　定位搜索功能，通过接入百度地图 API 接口，并结合GPS定位，在地图上展示出移动终端用户周边的瑜伽馆，供用户更加直观地选择。

　　在该功能中，系统甚至可以准确地判断出小编所在的位置是“北京市海淀区上地东路1号院6号楼附近”，实际上，这正是我公司千助目前的办公位置 —— 盈创动力大厦的地址。而此时，小编正在通过手机使用该功能，这也体现了移动定位的强大精准度。

　　四、接入微信开发者中心的网页账号接口，实现不注册无密码的会员登录

　　点击微信公众号下方的菜单“我”，可以进入到我的中心界面，首次进入是未登录状态，用户头像显示为系统默认的微信图标。

　　项目开发中，我们通过接入微信开发者中心的网页账号接口，采用静默授权模式，获得微信用户的 openid ( 微信用户的唯一标识 ) ，进而通过 openid 获得该用户在微信中的基本信息以及登录状态，实现不注册无密码的会员登录。

　　对于用户而言，他们感知到的就是点击上图中的“用微信帐号登录”后，就直接登录进会员中心了 ( 系统将自动完成注册、密码设置及会员登录等一系列操作，对用户是完全透明的 ) 。

　　成功登录后，系统会自动获取用户的微信头像和昵称，并显示在我的中心界面中。以后用户再通过微信公众号进入平台时，系统将根据用户微信号自动登录，无需用户再次点击登录按钮。

　　五、接入微信支付接口，实现微信公众平台内的快速支付

　　这里我们一概使用的是测试数据。在瑜伽馆列表界面中，点击进入任何一家瑜伽馆都可以进行课卡的购买 ( 课程、课卡和价格都需要商家在后台提前设置好 ) ，点击“立即购买”按钮，即可将课卡加入购物车。

　　在购物车页面点击确认支付，系统将调起微信的 JSAPI 公众号支付接口，并显示出微信支付的进度图标，为用户打开支付界面。

　　这里为了测试使用，我们暂时将商品价格改为1分钱。用户确认支付并输入支付密码，成功后即返回微信的支付结果界面，整个的交易流程在半分钟内即可完成。如果您的移动设备还支持指纹识别功能，您甚至可以通过指纹支付，而无须输入支付密码，获得更佳的支付体验。

　　至此，主要的移动端技术我们已分享完毕，除此之外，平台中还有课程管理、课卡管理、约课流程管理、订单管理、商家管理、招募伙伴管理等多项大型功能，由于在PC端中也经常遇到，此处不再详述。

　　写在最后

　　在整个的项目过程中，我们协助客户完成了微信公众平台的注册、服务号的认证、微信支付的资质审核和账户验证，并以最优方式配置了微信开发者中心的参数，为客户能够正常上线运营提供了全面的技术保障和咨询服务。