258资源分享网

早有耳闻微信小程序的支付功能开发是一步一坑，这两天果然踩了个遍。除了简要到令人愤怒的官方文档外，网上所有能搜到的相关文章，也没有任何一篇提供的代码是能够顺利跑通的。好在还有一部分前人的经验可以吸取，再加上个人的一点直觉引导，终于在凌晨的时候真机测试通过。

趁热打铁把踩过的坑罗列一遍，最后会附上真机跑通的代码。

首先是小程序支付功能的申请。在半年前我有另一个小程序项目，虽然当时没有开通小程序微信支付的需求，但是我留意过应用号（小程序号）后台微信支付的相关选项。当时，这个小程序因为绑定过已认证的服务号，因此小程序支付是可以直接申请的，无需任何费用。但是这次的项目，同样是另一个已经绑定过认证服务号的小程序，在微信支付界面，提示我要认证当前的小程序号才能开通微信支付，也就是说，绑定服务号无用，必须把这个小程序号也交300元认证后，才给开通支付功能！真的很坑，好在客户没有什么怨言，非常配合地就把认证给办了…

一天后小程序号认证通过，就有了申请支付的入口：

果断选右边那个，根据给出的提示，到商户平台里面用小程序的appid绑定就行了。

第二个坑，获取openid。在网上能找到的大部分实例代码里，都把获取openid的接口调用直接写在了小程序代码里。这个接口的地址是这样的：

https://api.weixin.qq.com/sns/jscode2session?appid=********&secret=********&js_code=********&grant_type=authorization_code 

其中js_code是通过wx.login获得的，这个没问题；appid也没问题；问题在secret上，即appsecret，这个密钥如果直接写在小程序端，本来就不太安全。果不其然，开发工具报错如下：

于是我尝试把api.weixin.qq.com域名加入request域名列表，人家不给我加…

那就很奇怪了，为啥网上很多例子给出的代码是直接请求api.weixin.qq.com接口的，没道理啊！花了我很多时间查证，小程序是今年年初的时候禁止了api.weixin.qq.com域名的直接请求的，目的就是为了避免开发者把appsecret直接写在小程序端的代码里，造成安全隐患。虽说是为了安全着想，但这真的很坑爹，官方在开发资料里面并没有提到这事情，导致很多人在此绕了弯路。

此外，我在开发过程中，其实是一路绕过这个坑的。因为发现虽然开发工具会报错不能请求这个域名，但是在开发工具提供的远程调试功能里，在手机上是可以直接请求这个接口的。于是获取openid这个过程在最初的开发调试中并没有暴露问题，而是在我觉得已经大功告成，即将提供对外测试的版本中，在手机上关闭了vconsole后，微信支付功能拉不起来，并且因为关闭了vconsole就看不到任何报错信息，是直觉告诉我这个请求域名发生了问题。微信开发就是这么操蛋，很多时候得靠程序员的直觉，而不是文档…

解决这个问题的唯一办法就是写一个PHP扔到自己的服务器上，借助这个PHP请求openid的接口，再返回给小程序端。

接下来第三个坑，是签名验证。首先我们要进行商户这里的统一支付签名，把appid、商品名、商户id、nonce值、notify_url、openid、订单号、金额….等等一连串的值，按照key=value&key=value&…格式，key为字母顺序排列下来，最后加上”商户key”（在商户后台获得），组成一个字符串，并经过MD5加密后生成一串签名值。

这些值，获取的地方哪里都有，光收集他们就得费一番力气；收集完毕后，还要按既定顺序排列，不能颠倒，并且商户key值是例外，得排在最后。MD5加密方法是gitHub上找的现成代码，给出地址：

https://github.com/leibing8912/WxMD5

以上签名完成后，还要把这些值去掉最后的商户key，加上已经完成的签名，封装成一个XML格式字符串，把这个字符串作为参数请求接口https://api.mch.weixin.qq.com/pay/unifiedorder，在返回的值中提取一串”prepay_id=”值，再用刚才的连接键值的方法获得长字符串，进行第二次次MD5加密签名。真TNND绕啊！我为了调试成功两次签名值，也费了不少力气。好在在前人的文章里看到有微信官方提供的调试工具，帮了不少忙，这是调试工具链接： https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1