uniapp之微信小程序 支付

　　一、注册微信支付商户号（由上级或法人注册）

　　　　注册链接：https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal#none，如图

　　　　

　　　　

　　　　　　注意：需要由主管及更上级领导进行注册，成为公司收款账户 （企业注册需要材料：营业执照、对公银行账户信息，法人身份证）

　　二、注册小程序账号（由上及或者领导注册）

　　　　企业一般注册为企业小程序，非个人。地址链接：https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　三、登录商户号绑定小程序

　　　　当小程序ID绑定至此商户，就可以调用此商户支付的相关接口，地址链接：https://pay.weixin.qq.com/index.php/core/home/login

　　四、后端写接口

　　　　根据前端传入数据，返回微信支付核心数据

　　　　

　　五、前端调用接口

　　　　① 获取openid（当前用户真实id）

　　　　　　openid为当前用户真实id，无法直接用任何接口获得，需要先调用微信login接口登录，获取登录凭证code，再通过此code（登录凭证，5分钟有效），向微信服务器换取用户openid。

　　　　　　uniapp官方文档地址链接：https://uniapp.dcloud.net.cn/api/plugins/login.html#login

uni.login({
  provider: 'weixin',
  success (res) {
    if (res.code) {
     //code: 用户登录凭证（有效期五分钟）使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

　　　　　　发送请求调用微信官方接口，用code凭证换取用户openid（真实用户id）

uni.request({
  url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
  data: {
    appid: '小程序appId',
    secret: '小程序密钥，在小程序appId下一行，放一块在',
    js_code: '刚才获取的code', 
    grant_type: 'authorization_code' //固定值
  },
  success: (res) => {
    //获取openid：用户真实唯一id
    console.log(res.data.openid);
  }
})

　　　　② 调用公司后端接口，获取支付核心数据

// 调用接口
uni.request({
  url: '调用你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    console.log(obj)
  }
})

　　　　该接口必须返回以下6个核心数据,都是由后台计算生成。

　　　　　　"appId": "xxxx",

       　　　　"nonceStr": "xxxx",

       　　　　"packageValue": "prepay_id=xxxxx",

        　　　  "paySign": "xxxxxx",

        　　　  "signType": "MD5",

                     "timeStamp": "xxxxxx"

　　　　③ 调用微信官方支付接口，弹出支付界面

uni.request({
  url: '调用后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {

    //调用微信官方支付接口弹出付款界面,输入密码扣款
    wx.requestPayment({
      timeStamp: obj.xxxx.timeStamp,  //后端返回的时间戳
      nonceStr:  obj.xxxx.nonceStr,   //后端返回的随机字符串
      package:  obj.xxxx.packageValue, //后端返回的prepay_id
      signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
      paySign:  obj.xxxx.paySign,  //后端返回的签名
      success (res) {
        console.log('用户支付扣款成功', res)
      },
      fail (res) { 
        console.log('用户支付扣款失败', res)
      }
     })

  }
})

　　　　　　调用后，弹出付款界面，模拟器需要扫码支付。

　　　　　　点击真机调试会直接弹出微信付款界面。

　　六、项目中的微信支付

　　　　一般情况下，支付界面都是在用户登录后，但是在我们开发微信小程序的支付功能时，到支付的时候用户已经登录该小程序，所以我们不需要从uni.login去获取code,再拿code获取openid，这个时候后端在登录的时候已经可以保存用户的登录信息，前端只需要调用后端接口，传商品id去获取所需要的的五个核心参数及需要的信息   

　　　　uniapp官方文档链接：https://uniapp.dcloud.net.cn/api/plugins/payment.html#requestpayment

async confirmPayment() {
	let res = await postPrepayReq({goodsId: this.payId})   // 调用后端接口去获取所需要的的数据
	
	if (res.code == 0) {
		let tempObj = {
			...res.data
		}
　　　　　// 处理后端返回数据为JSON字符串转为对象
		for (let key in tempObj) {
			if (key == 'payData') {
				tempObj[key] = JSON.parse(tempObj[key])
			}
		}
		console.log(698, tempObj);
　　　　 // 解构所需要的的数据
		let {
			　　appId,
				nonceStr,
				paySign,
				signType,
				timeStamp,
				packageValue
			} = tempObj.payData
　　　　　// 调用微信支付
		uni.requestPayment({
			provider: 'wxpay', // 支付服务提供商，此处为微信支付
			timeStamp,
			nonceStr,
			package: packageValue,
			signType,
			paySign,
			prepayid: tempObj.mchOrderNo,
				success: payRes => {
					console.log("支付成功", payRes);
				},
				fail: payErr => {
					console.log("支付失败", payErr);
				}
		})
	}
},

　　七、支付过程图

　　

 

 　　　　注：该文档为个人理解所写，有误可建议修改