现在我们已经得到了微信用户的会话信息，它里面有我们需要用的 openid .. 添加一个 openid .. 对应的值应该是 wxSession 里的 openid ..

这个 pay 方法里面，准备好了一些数据，要去请求一个预支付 ... 注意这个 trade_type 应该设置成 JSAPI ..

下面这个 openid 是我们在实施公众号支付的时候添加的 .. 暂时可以先把它们去掉 ..

获取到了预支付以后，又去组织好了一些参数数据，这些数据要在前端请求支付的时候使用 .. 在小程序里面调用支付跟使用公众号支付需要的参数数据是一样的 ..

方法最终返回的就是这些参数的值 .. 也就是用户在小程序上按了确认支付按钮以后，最终小程序就会得到这些参数数据 ..

小程序

下面回到小程序的支付页面 .. 这里我用的是这个现成的 event 页面 ..

请求后端 checkout/pay 这个地址，返回了调用支付的时候需要用的一些数据 .. 添加一个 params .. 它的值就是 paramsResponse 里的 data .. 就是请求回来的具体的数据 ..

现在我们就可以在小程序里去请求支付了 ..

用一下小程序提供的 wx.requestPayment .. 一个配置对象参数 .. 里面需要一些参数数据 .. 这些数据是在 params 里面，用一个 spread 操作符，把 params 里面的东西放进来 ..

请求成功以后 .. 会调用 success 方法 .. 添加一个 success .. 收到的响应可以叫 paymentResponse ..

然后判断一下 .. 如果 paymentResponse 里的 errMsg 的值，等于 .. requestPayment:ok .. 应该就是支付成功了 ..

这样的话我们可以显示一个提示 .. 用一下 wx.showToast .. title 是支付成功 .. icon 是 success .. duration 持续的时长是 2000 ，表示两秒钟 ..

下面再用一个 setTimeout ... 设置一下在 2 秒钟以后 .. 执行一下 wx.switchTab ，切换显示标签 .. url 是 /pages/index/index ..

预览

最后再找个手机去试一下 ..

回到微信开发者工具 .. 按一下预览 ... 打开手机上的微信 ... 扫一下页面上的这个二维码 .. 这样会打开我们正在开发的小程序 ..

调试

按一下 确认支付 .. 应该会打开微信支付 .. 不过这里提示了一个 JSAPI 缺少参数 ..

回到项目 ... 可以打开应用的日志看一下 ..

这里提示了一个 appid 跟 openid 不匹配 ..

这个错误的原因是 .. 我在申请预支付的时候，用的这个 appid 的值是之前的微信支付的 appid .. 使用小程序支付的时候，这个 appid 的值应该是小程序的 appid ..

我把小程序的 appid 放在了 wxapp 这个配置里了 .. 修改一下 ...

另外我发现在 iOS 设备上 .. 我的标签栏的文字的颜色有点问题 ..

打开小程序的 app.json .. 去掉 tabBar 里面设置的 color 这个属性 ..

回到开发者工具 .. 重新再点一下预览 ..

然后用微信扫一下页面上这个二维码 .. 确认支付 ...

这次就会打开微信支付了 ..

按一下完成，回到支付页面 .. 显示成功提示 .. 两秒以后，又会把用户带到应用的首页上 ...