活字格对接小程序实现微信支付

葡萄城社区文章征稿活动系列文章:王文兵 —— 活字格对接小程序实现微信支付

发布于 2024/09/28 16:13

活字格

本文作者(昵称):王文兵

内容来自葡萄城社区技术文章征稿活动

前言

最近自己做了一个手机版的商城分销商城系统,整个大体的框架使用了官方的小程序工程,再此工程上改一改,最终就实现了一个小程序用户注册-邀请码-商品上架-购买-发货-退款-分销佣金的全部功能。那今天我着重分享我是如何调用小程序支付的全部流程。当然也有佣金的发放功能、就用到了商家付款到零钱的接口了,官方没有、这个就需要单独的开发插件了,目前还在抽空进行中,后面实现了我在进行分享吧。

关于小程序支付在论坛上有很多帖子,但是都没有直接解决的方法。So 我就整理一篇,正好官方还有征文活动,我就写了一篇关于小程序支付的文章,希望能帮到其他格友,少走一些弯路。


需要用到的参考文件:

当然,如果你嫌用插件太麻烦的话,你也可以直接去葡萄城市场,里面有一个官方上架的【在线商城Lite版在线商城Lite版 - 葡萄城市场 (grapecity.com.cn)】的系统中有支付功能,版本号为9.0.6,将把相关的支付功能和服务端都写好了。你下载工程导入对应的命令,去改改配置参数就可以实现支付下单了。对于如何被配置、需要哪些参数、以上的教程说的够明白了,这里都相对简单就不过多讲述了。


实现过程

接下来就进入正题,介绍一下我是如何操作的,

微信支付的思路:

  1. 使用 JSAPI 的接口进行下单,获取到"prepay_id" : "wx201410272009395522657a690389285100"。

  2. 在获取到支付请求后,跳转到小程序原生页面的页面加载函数中调用wx.requestPayment(OBJECT)发起微信支付

  3. 支付后微信会进行回调我们系统中的一个接口(当然官方插件已经帮我做好了,只需要改自己的逻辑即可)。

走过的弯路

看到这,你可能就有疑问了,官方这个是 JSAPI 的支付形式啊,可要对接小程序啊,怎么对接的?你是怎么去下单的?你的请求头怎么出来的?你是怎么对证书加解密的?

经过我不断的恶补知识,找代码、看代码、看文档、搜教程………….。终于一顿操作猛如虎,干出来了。


最终发现没用,白搞……..

然后我仔细的看了微信的开发者文档,发现小程序支付和JSAPI的下单的接口是同一个,所以我就可以使用官方的插件了去完成下单操作。下单完成带着参数去小程序页面,然后在调用wx.requestPayment就完成支付操作了。

解决方法

理解了之后紧接着就是实践:

1)下单:使用上面工程里面的命令 CreateJSApiOrder(创建 JSAPI 下单)。


2)获取使用js请求访问该接口

贴源代码:

var page =  Forguncy.Page;

//该接口的需要的参数
var orderid = page.getCell("orderid").getValue();
var user_address_id = page.getCell("用户地址ID").getValue();
var remarks = page.getCell("remarks").getValue();

//请求下单接口的路径
var url = "ServerCommand/MiniCreateJSApiOrder";

//封装请求参数
var data = {
    "orderID": orderid,
    "userAddress_id": user_address_id,
    "remarks": remarks
}
console.log(data);

// 发送请求,执行下单逻辑获取支付请求所需的参数
Forguncy.Helper.post(url, data, function (message) {
     if (message)
     {
        let obj = JSON.parse(message);  
        console.log(obj.appId);
        //package、paySign这个两个参数需要特殊处理,原因是微信的接口会自动忽略"="后的内容,这两个参数中存“=”,请求前先转义一下,确保请求参数完整
        var package = encodeURIComponent(obj.package);
        let paySign = encodeURIComponent(obj.paySign);
        //设置跳转到小程序页面,将所有的参数传入
        var gotourl=`/pages/pay/h5pay?timeStamp=${obj.timeStamp}&nonceStr=${obj.nonceStr}&package=${package}&signType=${obj.signType}&paySign=${paySign}`
        console.log(gotourl);
        console.log(message);
//打开小程序页面
        wx.miniProgram.navigateTo({
                    url: gotourl,
                    extraData: {
                        // 传递给目标小程序的数据,可选参数
                    },
            success(res) {
                console.log("成功");
                //console.log(res);
                // 打开成功
            },

            fail(err) {
                console.log("失败");
                //console.log(err);
                // 打开失败
            }
        })    
     }
});

请求后返回的信息。这样就拿到了微信支付所需要的全部参数了


3)看到上面的信息,就说明下单成功了、现在就需要在工程文件上引用微信 SDK(做跳转使用):res.wx.qq.com/open/js/jweixin-1.6.0.js,配置完成就可以发布了,在活字格的工作就算完成了。


4)开发小程序的支付页面,在官方的小程序工程中的pages文件夹下右击,创建一个新的页面【h5pay】;


(1)进行 h5pay.wxml 注释全部内容,我这里使用的是一个空白的页面。在页面加载时就调用了支付接口。

(2)进入 h5pay.js 的 onLoad(options)添加代码

let option =  wx.location.query(options)
// console.log(JSON.stringify(options))
//之前转义的两个参数在进行解码
    options.package = decodeURIComponent(options.package);
    options.paySign = decodeURIComponent(options.paySign);  
    //console.log(options)
  // options 里面可以拿到h5传递过来的参数
  // 调起支付
  wx.requestPayment({
    ...options,
    success(res) {
      // 支付成功后,设置一个全局变量,然后返回到那个vwebview页面
      console.log(res)
      wx.$payResult = {...res, paycode: 1};
      wx.navigateBack();
    },
    fail() {
      //支付失败,同样设置一个全局变量,然后返回到那个vwebview页面
      console.error();
      console.log()
      wx.$payResult = {paycode: 0};
      wx.navigateBack();
    },
  });

(5)好了现在就可以支付测试了。

总结

以上就是我用活字格实现微信支付的全过程,希望可以帮助到正在学习或者有这方需求的格友们,当然如果有更多想了解活字格的朋友们,也欢迎去葡萄城的官网了解。

活字格企业级低代码开发平台 | 下载试用

活字格 是葡萄城基于在专业控件领域 40 年的技术积累而推出的企业级低代码开发平台 ,由简单易用的可视化设计器和部署灵活的服务器构成,能帮助开发人员、IT 技术人员和业务人员快速构建美观易用、架构专业、安全可控的企业级多终端应用,并随需而变。活字格高度开放灵活,支持云部署和本地部署,能与微信、钉钉及各行业应用软件无缝集成,并可对接智能硬件、AI 等技术,全面支撑核心业务系统开发。

了解更多关于活字格企业级低代码开发平台内容,请点击此处访问官网,立即下载体验。

相关产品
推荐相关案例
推荐相关资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态