现在，我们可以再去准备一下在前端用 JSAPI 支付的时候需要用的一些参数 .. 准备好以后，可以把这些参数的值返回给前端 ..

添加一个 wxJSApiParams .. 一个对象 .. 需要的参数是 appId .. 注意这个参数的写法 .. 对应的值就是上面定义好的 appid ..

还需要一个 timeStamp ... 时间戳 .. 这个时间戳是 unix 标准的 .. 上面添加一个 timeStamp .. 用一下之前我们安装好的 moment .. moment .. local .. unix .. 这个方法可以返回 unix 标准的时间戳 ..

这个 timeStamp 的值可以这样处理一下 .. 让它变成一个字符串 ..

还需要一个 nonceStr .. 对应的值可以是上面定义的 nonce_str .. 还得再添加一个 package .. 它的值用一个字符模板 .. 先添加一个 prepay_id 等于 .. 后面是请求统一下单接口返回来的 prepay_id ..

在上面再定义一个 prepay_id .. 它的值就是 data ，也就是请求响应回来的数据里面的 prepay_id 这个属性的值 ..

在这个参数里面再添加一个 signType .. 设置一下签名用的方法 .. 默认是 MD5 ..

然后可以再根据这些数据去创建一个签名 .. 添加一个 paySign .. 用一下 this.wxPaySign 这个方法 .. 要签名的数据是 wxJSApiParams .. 还需要用到一个 key，就是密钥 ..

有了签名，重新再设置一下 wxJSApiParams 的值 .. 先把它原有的东西放进来 ... 下面再添加一个 paySign ..

最后我们让方法 return 的东西就是这个 wxJSApiParams ..

支付

请求支付要在前端去做 .. 打开支付页面用的自定义脚本 .. main.js .. 按一下确认支付，会请求统一下单，成功以成会得到 response，这个 response 就是 jsapi 需要的一些参数 ..

在这个成功回调里面，我们可以再去调起支付 .. 用一下 wxPay .. 把 response 交给这个函数 .. 下面可以再找个地方去定义一下这个函数 ..

添加一个 wxPay .. 接收的参数是 wxJSApiParams ... 函数里面用一下 WeixinJSBridge 的 invoke ..

这个 WeixinJSBridge 对象只在微信应用内部的浏览器里面才有 ..

第一个参数设置成 getBrandWCPayRequest .. 第二个参数是一些参数值.. 这里就是 wxJSApiParams ... 就是这个方法接收的一个参数 ..

然后是一个回调 ... 得到的响应是 response ... 可以把它输出到控制台上 ... console.log(response)

预览

下面可以再试一下 ... 打开支付页面 ... 确认支付 ... 这样会调起微信 App ，用户可以再确认一下支付 ..

完成 .. 又会回到支付页面 .. 再按一下 支付成功 .. 这样会调用微信支付的订单查询接口 .. 验证了结果以后，如果支付成功的话，就会把用户再带到这个成功提示的页面上 ...