HbuildX 用vue打包app调用微信支付

203 阅读1分钟

我有一个项目是用vue写的,现在要打包成app用的是hbuilderX,目前想到的唯一方法就是用5+app里的调用支付代码,然后去看5+app文档,微信官方支付文档

	// 获取请求参数
      this.axios({
        url: 后端给的请求接口' + 发送请求获取的订单编号,
        headers: {
          Authorization: localStorage.getItem("token"),
        },
        method: 'post',
      }).then((res2 => {
      // 此处res2获取的是支付需要的参数 详细对照微信官方文档
        console.log(res2)
        if (res.status === 200) {
          // 获取支付通道
          plus.payment.getChannels((channels) => {
            for (var i in channels) {
              var channel = channels[i];
              if (channel.id === "wxpay") {
                this.channel = channel;
                console.log('this.channel------------', this.channel)
              }
            }
			// this.channel为支付的通道是微信还是支付宝 此处演示微信
            console.log('channels==============2222222', this.channel);
            // 此处的参数必须转换为字符串, 对应参数已经贴在下面
            // 此处获取的key必须跟微信官方文档一致,标点符号都不能错
            plus.payment.request(this.channel, JSON.stringify({
              appid: res2.data.data.appId,
              noncestr: res2.data.data.nonceStr,
              package: res2.data.data.package,
              partnerid: res2.data.data.partnerid,
              prepayid: res2.data.data.prepay_id,
              timestamp: res2.data.data.timeStamp,
              sign: res2.data.data.sign
            }), (result) => {
              plus.nativeUI.alert("支付成功!", () => {
                console.log('支付成功','console')
                back();
              });
            }, (e) => {
              console.log('支付失败的参数---------------', e)
              console.log("支付失败:" + e.message);
              plus.nativeUI.alert("支付失败:" + e);
            });

image.png

第一次写文档 只为记录自己的学习过程 感谢大家支持

接下来的文章 会更新其他的支付方式

支付类型

  • 微信浏览器内微信支付
  • 手机自带浏览器微信支付
  • pc端微信扫码实现知否功能