使用小程序支付，在请求预支付的时候需要带着微信用户的 openid .. 可以在小程序上调用 wx.login 接口获取到一个登录凭证，把这个登录凭证交给后端，再让后端去请求得到用户的 openid 。

先打开小程序的 event 页面的视图 .. 在这个确认支付按钮上 bind 一个 tap 事件 .. 可以使用页面的 pay 这个方法来处理 ..

然后打开页面的逻辑文件 ... 在这个 Page 里面添加一个请求支付用的方法 .. 方法的名字是 pay .. 在这个方法里面，可以先去请求登录凭证 ..

用一下 wx.login 这个接口 .. 一个配置对象参数 .. 成功以后会调用 success ... 得到的响应可以叫 loginResponse .. 如果请求成功的话，这个 loginResponse 里的 code 就是我们需要的登录凭证 ..

下面可以把这它发送给我们的后端服务 ..

wx.request .. 发出一个请求 .. 请求的 url 是 https://sandbox.ninghao.net/checkout/pay

请求的 method 是 POST .. 请求里面带着 data .. 里面添加一个 code .. 对应的值就上面得到的 loginResponse 里的 code 这个属性的值 ..

请求回来的数据，我们期望得到的是调用微信支付的时候需要的一些参数数据 .. 这个参数数据应该就是 checkout/pay 响应的东西 ..

再添加一个 success 方法 ... 得到的响应是 paramsResponse .. 暂时可以把这个响应输出到控制台上 ..

后端

下面再去处理一下后端 .. 请求 checkout/pay 会使用 CheckoutController 这个控制器里的 pay 这个方法来处理 .. 找到这个方法 ..

从小程序那里请求这个地址的时候会带着 code 数据，请求里包含的数据可以使用 reqeust 的 input 方法得到 .. 要得到的是 code ..

然后我们暂时先让这个方法 return 这个 code 的值 .. 主要是先在确定一下是不是能正确地处理从小程序那里过来的请求 ..

请求用的方法是 POST .. 我们的应用默认会对这种类型的请求做保护 .. 要求请求里带着 csrf token .. 这里可以去掉对 checkout/pay 这个地址的保护 ..

打开 config .. shield.js

在 csrf 这里的 filterUris 里面 .. 添加一个 /checkout/pay .. 意思就是不对这个地址做 csrf 保护 ..

回到小程序 ... 在模拟器上可以试一下 ... 按一下确认支付 ...

控制台上输出的东西就是从后端服务那里响应回来的数据 ... 这个数据就是我们在小程序上调用 wx.login 得到的登录凭证 ..