uniapp微信小程序支付前端生成签名，并调起微信支付

一、安装npm包、引入npm包

npm install jsrsasign

页面引入依赖

import jsrsasign from 'jsrsasign'

签名方式使用的是SHA256withRSA

二、准备签名的数据

let str = {
    appId: 'xxxxxxxxxxx',   //appId后端返回,可在小程序开发平台获取
    timeStamp: 'xxxxxxxxxxx', //10时间戳
    nonceStr: 'xxxxxxxxxxx',  //随机字符串
    package: 'prepay_id=' + prepay_id, //通过JSAPI下单接口获取到发起支付的必要参数prepay_id
 }

①、登录小程序开发者平台获取appId，如图所示

②、前端获取10位时间戳

const time = Math.round(new Date().getTime()/1000).toString();
console.log(time);

③、前端获取随机字符串

getRandomString(length) {
      var result = ''
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      var charactersLength = characters.length
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      return result
},

④、prepay_id

调用后端发起支付接口返回，后端返回

三、签名封装

singH5(data) {
      let encipher = new jsrsasign.RSAKey()
      // 私钥 在微信端申请好后会有，一般由后端提供
      const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
      // 把私钥转成16进制并设置秘钥
      encipher = jsrsasign.KEYUTIL.getKey(key)
      // 设置SHA256withRSA方式加密
      const sig = new jsrsasign.KJUR.crypto.Signature({
        alg: 'SHA256withRSA',
      })
      // 初始化
      sig.init(encipher)
      // 需要加密的字段，这里注意下一定要按每一个字段一行，切末位加上 \n
      const str = `${data.appId}\n` + 
      			  `${data.timeStamp}\n` + 
      			  `${data.nonceStr}\n` + 
      			  `${data.package}\n`
      const paySign = sig.updateString(str)
      // 加密后,转成base64
      return jsrsasign.hextob64(sig.sign())
    },

①、私钥如果找不到，可以在商户号平台获取

四、全部代码

import jsrsasign from 'jsrsasign'

//SHA256签名
singH5(data) {
      let encipher = new jsrsasign.RSAKey()
      // 私钥 在微信端申请好后会有，一般由后端提供
      // 在商户号平台可以找到
      const key = `-----BEGIN PRIVATE KEY-----
xxxxxxxxxxxxxxxxxxxxxx
-----END PRIVATE KEY-----`
      // 把私钥转成16进制并设置秘钥
      encipher = jsrsasign.KEYUTIL.getKey(key)
      // 设置SHA256withRSA方式加密
      const sig = new jsrsasign.KJUR.crypto.Signature({
        alg: 'SHA256withRSA',
      })
      // 初始化
      sig.init(encipher)
      // 需要加密的字段，这里注意下一定要按每一个字段一行，切末位加上 \n
      const str = `${data.appId}\n` + 
      			  `${data.timeStamp}\n` + 
      			  `${data.nonceStr}\n` + 
      			  `${data.package}\n`
      const paySign = sig.updateString(str)
      // 加密后,转成base64
      return jsrsasign.hextob64(sig.sign())
    },
	
	//获取随机字符串，长度可自定义
    getRandomString(length) {
      var result = ''
      var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      var charactersLength = characters.length
      for (var i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      return result
},
 // 微信支付
    async setRecharge(price01, price02) {
      let _this = this
      let obj = {
       //个人数据
       //发起请求
      }
      let res = await setRechargeAPI(obj)
      if (res.code == 200) {
      	let prepay_id = res.data.prepay_id
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
 //从这里开始,上面为发起订单支付获取  prepay_id
 //准备数据
        let str = {
          appId: 'xxxxxxxxx',  //你自己的appId
          timeStamp: Math.round(new Date().getTime() / 1000).toString(),
          nonceStr: this.getRandomString(31),
          package: 'prepay_id=' + prepay_id,
        }
        //获取签名
        let sign = this.singH5(str)
        uni.requestPayment({
          provider: 'wxpay', //支付类型-固定值 这里是微信支付
          appId: str.appId,  //appId
          timeStamp: str.timeStamp, // 时间戳（单位：秒）要和上面签名的一致
          nonceStr: str.nonceStr, // 随机字符串
          package: str.package, // 固定值
          signType: 'RSA', //固定值
          paySign: sign, //签名

          success: function (res) {
            console.log('支付成功')
            uni.showToast({
              icon: 'success',
              title: '支付成功',
            })
			//此处为自己的刷新数据方法
            //_this.getUserInfo()
          },

          fail: function (err) {
            console.log('支付失败', err)
            uni.showToast({
              icon: 'none',
              title: '支付失败',
            })
          },
        })
 //结束
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
 //---------------------------------------------------------------------------------------------
      }
    },