我的思路

说实话，看完官方文档后我还是一脸懵逼的。

我是谁，这是哪，我在干什么？

我觉得很有必要把自己在阅读官方文档过程中的困惑和疑问记录下来，也方便自己以后查阅。

让我们先来看看场景到底是怎么样的。

1.具体场景

假设现在已经存在一个微信公众号，里面内嵌了第三方的网页。

用户点击进入网页；
用户选择好了需要购买的商品，点击支付按钮；
前端调用微信的支付控件，用户开始输入密码；
密码验证通过，支付成功。商户后台得到支付成功的通知；
返回商户页面，显示购买成功；

所以，身为一个前端开发工程师，我们的任务主要还是

3.调用微信的支付控件（重点）
5.显示购买成功的商户页面

那么，
①如何才能调用微信的支付控件？
②调用微信的支付控件需要哪些要求（证书？签名？域名？）？
③可以发送哪些数据？
④可以获得哪些数据？
⑤怎么操作？

官方上是这么介绍设计商户页面的逻辑的：

（1）发起支付时，在网页调用JavaScript的getBrandWCPayRequest接口，发起微信支付请求，用户进入支付流程
（2）用户成功支付后，商户的前端会收到JavaScript的返回值。商户可以直接跳转到支付成功的静态页面进行展示。
（3）商户后台收到来自微信开放平台的支付成功回调通知，标志该笔订单支付成功

从这个设计逻辑里可以注意两点：
1.微信支付的调用接口是getBrandWCPayRequest
2.前端调用支付接口会得到返回值，但是支付是否成功决定于后台得到回调通知

然而看到这里是不是还是感觉毫无头绪？
别慌…我也是。
但是官方文档又提供了一个业务流程，清晰得展示了从用户点击到支付成功，商户前台、后台以及微信服务器之间是如何交互的。
让我们先看一下吧。

2.业务流程

具体的业务流程在这张图上已经非常清楚了，作为前端开发工程师，需要重点关注一下白色的部分。
有这么几个需要关注下的步骤：

1.网页内请求生成支付订单，商户后台系统会返回一些支付参数（prepay_id，paySign等）
2.用户点击发起支付，网页开始调用JSAPI接口请求支付，微信后台检查了参数合法性和授权域权限后返回给前台验证结果，要求支付授权，这时候用户按照提示输入密码，微信后台再次验证，这时候后台和前端得到反馈的步骤是异步并行的，前端展示给用户，支付结束
3.微信跳回H5页面，查询商户后台支付结果，返回支付结果

从这个步骤中我又得到了几点结论：

1.在网页调用JSAPI支付接口之前，还需要生成一个支付订单发送给后台
2.微信后台会验证两次，第一次是用户点击发起支付后，先验证参数合法性和域名是否被授权，第二次是验证用户输入的支付密码。

现在对整体步骤有个大概的了解，但是更多的是依旧模糊，继续阅读思考。
同样也多生成了下列这些疑问：

⑥订单如何生成并发布给后台
⑦该发布怎么样的参数以及如何给定被授权的域名

3.H5调起支付API

在上述文章内容我们已经知道了微信支付接口是getBrandWCPayRequest，so go on！

首先要注意一点：
getBrandWCPayRequest是接口，但是这个接口是在WeixinJSBridge对象下的，而WeixinJSBridge对象只在微信浏览器中才有。

让我们看一下getBrandWCPayRequest这个接口需要哪些参数（以下参数全是必填），以及这些参数如何获得：

appId（公众号id）

appId是商户注册具有支付权限的公众号成功后即可获得的唯一公众号ID，类型是String（16）。

例子：

wx8888888888888888

timeStamp（时间戳）

timeStamp时间戳是当前的时间，类型是String（32）。
标准北京时间，时间为东八区，自1970年1月1日 0点0份0秒以来获得的秒数（注意部分系统取到的值为毫秒级，需要换算成秒）。

// getTime()返回数值的单位是毫秒
var timeStamp = Math.round(new Date().getTime()/1000)

nonceStr（随机字符串）

随机字符串是长度不长于32位的随机字符串，类型是String(32)。
微信推荐生成随机数的算法如下：调用随机数函数生成，将得到的值转换为字符串。

function randomString(len) {var len = len || 32;var chars =  'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';var maxPos = chars.length;var result = '';for (var i = 0; i < len; i++) {result += chars.charAt(Math.floor(Math.random()*maxPos));}return result;
}

package（订单详情扩展字符串）

订单详情扩展字符串，统一下单接口返回的prepay_id参数值，类型是String(128)，提交格式如：

 // prepay_id是微信服务器返回的预付单信息prepay_id=123456789

signType（签名方式）

签名方式即签名算法，暂支持MD5，类型为String(32)。

MD5

paySign（签名）

签名类型为String(64)。

签名算法的生成步骤如下：

第一步，设所有发送或者接收到的数据为集合M，将集合M内非空参数值的参数按照参数名ASCII码从小到大排序（字典序），使用URL键值对的格式（即key1=value2&key2=value2）拼接成字符串stringA。

注意
◆ 参数名ASCII码从小到大排序（字典序）；
◆ 如果参数的值为空不参与签名；
◆ 参数名区分大小写；
◆ 验证调用返回或微信主动通知签名时，传送的sign参数不参与签名，将生成的签名与该sign值作校验。
◆ 微信接口可能增加字段，验证签名时必须支持增加的扩展字段

第二步，在stringA最后拼接上key得到stringSignTemp字符串，并对stringSignTemp进行MD5运算，再将得到的字符串所有字符转换为大写，得到sign值signValue。

key设置路径：微信商户平台 => 账户设置 => API安全 => 密钥设置

举个例子：
假设传送的参数如下：

appid： wxd930ea5d5a258f4fmch_id： 10000100device_info： 1000body： testnonce_str： ibuaiVcKdpRxkhJA

第一步：对参数按照key=value的格式，并按照参数名ASCII字典序排序如下：

stringA="appid=wxd930ea5d5a258f4f&body=test&device_info=1000&mch_id=10000100&nonce_str=ibuaiVcKdpRxkhJA";

第二步：拼接API密钥：

stringSignTemp=stringA+"&key=192006250b4c09247ec02edce69f6a2d"sign=MD5(stringSignTemp).toUpperCase()="9A0A8659F005D6984697E2CA0A9CF3B7"

最终得到最终发送的数据：

<xml><appid>wxd930ea5d5a258f4f</appid><mch_id>10000100</mch_id><device_info>1000<device_info><body>test</body><nonce_str>ibuaiVcKdpRxkhJA</nonce_str><sign>9A0A8659F005D6984697E2CA0A9CF3B7</sign></xml>

getBrandWCPayRequest返回值

网页内支付接口err_msg返回结果值说明：

 get_brand_wcpay_request:ok            支付成功get_brand_wcpay_request:cancel        支付过程中用户取消get_brand_wcpay_request:fail          支付失败

示例代码如下：

// WeixinJSBridge.invoke('getBrandWCPayRequest',{},callback)
function onBridgeReady(){WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     "package":"prepay_id=u802345jgfjsdfgsdg888",     "signType":"MD5",         //微信签名方式：     "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 },function(res){     if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 }); 
}
if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}
}else{onBridgeReady();
}

getBrandWCPayRequest参数小结

在继续下一步前，让我们看看前面提出的问题：

①如何才能调用微信的支付控件？
②调用微信的支付控件需要哪些要求（证书？签名？域名？）？
③可以发送哪些数据？
④可以获得哪些数据？
⑤怎么操作？
⑥订单如何生成并发布给后台
⑦该发布怎么样的参数以及如何给定被授权的域名

上述问题解决了几个？

①如何才能调用微信的支付控件？
②调用微信的支付控件需要哪些要求（证书？签名？域名？）？
③可以发送哪些数据？
④可以获得哪些数据？
⑤怎么操作？
在微信浏览器内就可以通过WeixinJSBridge内置对象来调用微信的支付控件（在不考虑授权域名的情况下，授权域名决定了支付控件能不能使用）。

授权域可以在微信支付的开发配置里面设置。

稍微注意下测试的支付目录和正式支付目录是不太一样的。

可以发送的数据以及接受的数据已在上面已经提到。参数合法性会被第一次验证。

所以还剩下：
⑥订单如何生成并发布给后台
⑦该发布怎么样的参数以及如何给定被授权的域名
以及又多了个问题：
⑧package（订单详情扩展字符串）怎么玩= =？

另外看了这么多我又开始懵逼了，
上面这些参数就把接口请求支付的全用完了，参数只有appId/timeStamp/nonceStr/package/signType/paySign。
好，通过上面这些参数，我们可以让微信服务器知道是哪个该支付请求针对哪个公众号，时间戳、随机字符串、签名方式、签名可以经过第一次验证。后续可以提示用户输入密码。

但是，
⑨买什么东西，付多少钱，谁付钱，付钱给哪个账户之类的各种参数在哪里？莫非在package里？

4. 订单

一直在想package是干嘛用的，后来又看到中文名“订单详情扩展包”，扩展是个关键词啊，说明咱们之前一直纠结的信息应该都在订单里。

没错，之前也提到过了，在调用微信支付接口前，是需要先网页内请求生成支付订单的。

所以接下来让我们看看官网的一些关于订单的API：

统一下单

应用场景
除被扫支付场景以外，商户系统先调用该接口在微信支付服务后台生成预支付交易单，返回正确的预支付交易回话标识后再按扫码、JSAPI、APP等不同场景生成交易串调起支付。

接口链接
URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder

是否需要证书
否

请求参数
见官网吧。
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

举例：

<xml><appid>wx2421b1c4370ec43b</appid><attach>支付测试</attach><body>JSAPI支付测试</body><mch_id>10000100</mch_id><detail><![CDATA[{ "goods_detail":[ { "goods_id":"iphone6s_16G", "wxpay_goods_id":"1001", "goods_name":"iPhone6s 16G", "quantity":1, "price":528800, "goods_category":"123456", "body":"苹果手机" }, { "goods_id":"iphone6s_32G", "wxpay_goods_id":"1002", "goods_name":"iPhone6s 32G", "quantity":1, "price":608800, "goods_category":"123789", "body":"苹果手机" } ] }]]></detail><nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str><notify_url>http://wxpay.wxutil.com/pub_v2/pay/notify.v2.php</notify_url><openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid><out_trade_no>1415659990</out_trade_no><spbill_create_ip>14.23.150.211</spbill_create_ip><total_fee>1</total_fee><trade_type>JSAPI</trade_type><sign>0CB01533B8C1EF103065174F50BCA001</sign>
</xml>

订单、退款以及其他的一些API以及接口在官网上都有，这里就不多叙述了。
但是这些数据，不管是发送还是接收的都是XML格式。

那么问题又来了：
⑩如何把数据导入到XML里面，然后又如何把XML文件发送给后台？

推荐

看到一篇文章，感觉还不错
http://www.jianshu.com/p/f1df7ed364c6

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

关于ActivityGroup使用过程中遇到的一点问题
在工作中使用ActivityGroup的时候犯了一个严重的错误，后来经过头的点播，才豁然开朗，明白了这中间的道理，现在这些心得记录下来。在刚开始接触ActivityGroup的时候我把它当成了J2EE中的框架集（framset）来使用，framset也是可以同时加载多个jsp页面。而ActivityGroup也是是…...
2024/4/17 4:16:12
Linux下Matlab安装
=摘要=在ubuntu下面学也有好一大段时间了,这个学期有图像处理课程.需要用到matlab这个矩形实验系统...在windows下面有一个matlab7..但是我想在linux下面用...于是有了一段google matlab for linu的历程...google很强大...不一会我就找到了下载链接...matlab 2009b这个版本..今…...
2024/5/5 22:10:53
关于android系统Binder机制解析
刚刚开始写博客，这次讲一下我对android Binder机制的理解。Binder机制主要是为了进程间通信机制，也有别的方式（当然别的也没了解过），但是在android中用的最多的是Binder机制，在开始说Binder机制前先说一下这个机制的成员，1 ServiceManager（即是Client端也是Server端，…...
2024/4/17 4:15:48
909422229_数据爬虫：爬虫的基本原理介绍
技术交流群：958923746，有学习视频，文档等。一、什么是爬虫爬虫：请求网站并提取数据的自动化程序百科：网络爬虫（又被称为网页蜘蛛，网络机器人，在FOAF社区中间，更经常的称为网页追逐者），是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。另外一些不常使用的…...
2024/4/4 22:23:13
笔记：《高效能人士的七个习惯》第三章习惯一积极主动——个人愿景的原则
1、人性的本质是主动而非被动的，人类不仅能针对特定环境选择回应方式，更能主动创造有利的环境。采取主动不等于胆大妄为、惹是生非或滋事挑衅，而是要让人们充分认识到自己有责任创造条件。 2、凭借自我意识，我们可以客观地检讨我们是如何“看待”自己的——也就是我们的“自…...
2024/4/18 18:01:31
Android系统的Binder机制分析
本文转自云中漫步一个Android爱好者的博客， http://my.unix-center.net/~Simon_fu/?p=988 前面我们已经介绍了Android Binder机制的Service Manager，Service对象代理1，Service对象代理2。本文将介绍一下Android机制的另外一个重要部分——系统Service。 1、系统Service实例…...
2024/4/17 4:16:06
Java微信公众号开发之接入
微信官方接入指南一、环境准备1、申请一个公众号，公众号接口权限说明如下：根据不同的需求申请不同的公众号。个人只能申请订阅号，而且不能进行微信认证，但是可以申请公众平台测试账号，拥有全部的权限，(首页—>开发者工具—>公众平台测试账号）2、准备一台外网服务…...
2024/4/20 10:15:55
Linux下matlab打开出现error starting desktop启动桌面时错误
ubuntu 16.04 刚装上MATLAB2014a，结果发现，sudo matlab可以正常打开matlab，但是直接matlab却出现错误，提示error starting desktop，以及一堆java错误提示。也就是说只能以超级用户的方式打开，而普通用户方式打开不了，上网搜了一下后发现只要执行下面这个语句即可普通用户…...
2024/4/17 4:17:49
高效能人士的七个习惯——由内而外全面造就自己
由内而外全面造就自己品德成功提醒人们，高效能的生活是有基本原则的，只有当人们学会并遵循这些原则，把他们融入到自己的品格中去，才能享受真正的成功与恒久的幸福。一个重要的原则：要改变现状，首先要线改变自己；要改变自己，先要改变我们对问题的看法。思维定式的力量…...
2024/5/5 18:25:48
微博爬虫总结：构建单机千万级别的微博爬虫系统
微博语料库是一个巨大且珍贵的中文语料资源，在舆情监控、商业分析、兴趣挖掘等诸多领域都有广泛的应用。而获取微博语料库的方法就是构建一个稳定高效微博语料抓取系统。本次 Chat 首先会带着大家分析微博 PC 端/移动端各个站点的实际情况，以及能够抓取的数据维度，随后会逐个…...
2024/4/17 4:17:19
微信公众号开发之配置开发服务器
微信公众号开发详细教程微信公众号开发文档需不需要开发服务器应该根据自己的业务需求来决定。如果你只是简单使用微信公众号，发送推文等简单需求，你就不需要的配置自己的开发服务器，微信公众号平台功能十分强大，不懂技术的用户也可以简单开发一个自己公众号。如果你有像成…...
2024/4/29 22:56:47
android 使用Fragment 代替ActivityGroup
1.创建activity_main.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"…...
2024/5/5 18:53:26
Java爬虫基础及提高
随着大数据时代的到来，网络数据已经开始泛滥了，如何才能从大量的数据中得到自己数据呢？爬虫，已经是一个必不可少的工具。说到爬虫，很多人第一会想到Python，但是我要告诉你们的是，Java爬虫并不比Python爬虫效率差，并且Java有自己得天独厚的资源和使用人群，能够可以很轻…...
2024/5/5 16:52:32
高效能人士的七个习惯读后感与总结概括-（第六章）
本章内容这篇主要告诉我们要有良好的人际关系诚信该怎么做到有良好关系，其实最重要的就是诚信。这里用到了一个理念叫做：为感情开账户我们生活中有在银行开账户，存钱，当有不时之需的时候拿来使用。而情感账户存的则是信赖，也就是当别人与我相处时，别人对我的安全感。…...
2024/4/26 12:51:48
Android系统Binder机制学习总结
一、Binder机制概述在Android开发中，很多时候我们需要用到进程间通信，所谓进程间通信，实现进程间通信的机制有很多种，比如说socket、pipe等，Android中进程间通信的方式主要有三种： 1.标准Linux Kernel IPC 接口； 2.标准D-BUS接口； 3.Binder接口。其中，Binder机制是使…...
2024/4/17 4:16:12
Matlab7.0安装之后Runtime Error警告解决办法
Win7系统正常安装Matlab7.0软件之后，但是不能正常运行，出现Runtime Error错误警告如下：解决办法如下：点击右键->属性->兼容性兼容性窗口点开之后，在以兼容模式运行这个程序前打对勾，在下拉菜单中找到Windows2000，完毕之后如下图所示，其他设置不用动，并且点击…...
2024/4/17 4:16:43
android ActivityGroup中跳转activity的关键代码
LinearLayout container = (LinearLayout)((ActivityGroup)getParent()).getWindow().findViewById(R.id.body);//注意这里，还是获取group的viewcontainer.removeAllViews();Intent intent=new Intent(a.this,b.class);intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);Windo…...
2024/4/17 4:17:07
《高效能人士的七个习惯》读书笔记(1)--如何善用本书
最近领导听说我对7habits这本书有兴趣, 提议我做一个关于高效能人士的七个习惯的演讲, 因为之前也受这本书的影响很深, 所以接受了.但是有时候有体会了, 写出来与大家分享, 演说, 却也不是一件容易的事情. 带着目的, 我重新认真重读此书.我注意到了在如何善用本书一节中, 有这…...
2024/4/27 6:28:49
学习爬虫总结（一）
作为一名大三狗，以前的两年似乎也没有坚持学习什么。现在我决定我要每天坚持学一点东西，来提升自己。爬虫这个名词第一次出现在我的印象中是学习中国大学MOOC里面的python语言程序设计慕课，那时候我对爬虫并不了解，也没有学习的兴趣。最近在看一些有关信息安全的书，发现网…...
2024/4/17 4:16:49
Binder机制（非常好理解）
Binder是一种进程间通信机制，用来实现不同进程之间的通信。 Binder机制主要由四大块组成，分别是客户空间的client、server，serverManager，还有内核的Binder驱动。下面我先看下图，利于理解Binder内部工作机制：服务器端。一个Binder服务器端就是一个Binder类的对象。当创建…...
2024/4/17 4:16:55

微信公众号支付（开发文档）笔记