微信公众账号平台支付接口

来源：蜘蛛抓取(WebSpider) 时间：2018-09-07 20:11 标签： 微信公众账号

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第三方支付：微信公众号接入支付宝支付开发

这篇文章使用一些简单的代码例子来解释微信接入支付宝支付功能的操作步骤，即使新手也可以轻松参透的。

第三方支付是指具备一定实力和信誉保障的独立机构，采用与各大银行签约的方式，通过与银行支付结算系统接口对接而促成交易双方进行交易的网络支付模式。

使用第三方支付，我们只要申请一个帐号平台即可以支持所以银行卡信用卡支付功能，具体支付功能由第三方支付平台来完成。本文所要介绍的是支付宝手机网站支付功能，而且是微信端的。

支付宝接入说难也难，说易也容易，正应正了那句话，难了不会会了不难。

商户H5网站先向自己的后台系统发送请求，由后台系统向支付宝系统发送请求，请求生成订单数据，当商户系统收到支付宝返回的订单数据后（注意支付宝是以form表单的形势返回订单数据的字符串），我们后台系统将数据返回给前端，前端页面通过Form表单的形式请求到支付宝，支付宝验证签名后进入支付宝路由页面，如果用户手机已经安装支付宝客户端，则它会尝试唤起支付宝客户端，如果没安装客户端，则路由页面会以web形势打开付款页面，成功后会弹出输入密码框供用户输入。

输入正确密码后，支付宝根据商户在手机网站支付API中传入的前台回跳地址return_url自动跳转回商户页面，同时在URL请求中以Query String的形式附带上支付结果参数，支付宝还会根据原始支付API中传入的异步通知地址notify_url，通过POST请求的形式将支付结果作为参数通知到商户系统。我们return_url地址负责前端展示，notify_url负责页面处理逻辑。其实notify_url不一定非要是jsp页面，（虽然官方demo里使用的是jsp页面），也可以是接口，入参是request和response，后面会提供样例。

// 页面跳转同步通知页面路径 需http://或者https://格式的完整路径，不能加?id=123这类自定义参数，必须外网可以正常访问 // 商户可以自定义同步跳转地址

2.3 由于微信端限制了支付宝，故引起用户打开系统浏览器。这里使用了一个jsp页面做页面引导。

请在菜单中选择在浏览器中打开,<br/>

红色部分找向pay.jsp页面。 

 

 其中红色部分找向的pay.jsp页面，如果pay.jsp页面和ap.js不在同一目录下，需要做进一步调整。
 
 

 需要在我们的支付目录下引入ap.js文件，然后如下请求即可：
 
 

 
 

 只要把请求支付宝构造支付订单数据的请求填到pay()方法里即可。参数根据需求来写，和正常的业务开发一样。
 
 

 
 

 


 


 


 4.4 支付宝路由页面
 


 4.5 支付宝路由尝试唤起支付宝客户端界面
 


 4.6 弹出支付确认界面
 


 4.7 弹出输入密码框界面
 


 


 当然这里的提示“支付成功，请您手动退回微信！“是我自己提示的。
 
 

 4.9 回界面显示，后台会收到支付宝的支付结果异步通知回调，程序执行完后必须打印输出“success”（不包含引号）。如果商户反馈给支付宝的字符不是success这7个字符，支付宝服务器会不断重发通知，直到超过24小时22分钟。一般情况下，25小时以内完成8次通知（通知的间隔频率一般是：4m,10m,10m,1h,2h,6h,15h）；
 
 

 如果你对于接入支付宝的流程依然不清晰，那么最好的方式就是运行一下上面的例子，看看会发生什么。读懂一篇长篇大论要比理解一个例子难的多。

共计60课时，配有番外篇，目前视频已在网易云课堂上线


您可以在遵守开源协议的前提下用于研究或商用。
● 帮助更多有理想的开发者实现价值，倡导开放共享的开发生态圈；
● 扒光了给需了解我们的人看个够，因为我们不愿意浪费时间吹牛；
● 助力中国开源事业，同时也感恩一路上给我们提供帮助的朋友们。

我要回帖

更多关于 微信公众账号 的文章

 

随机推荐