欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信公众平台和微信开放平台的区别(2者区别对比分析)

程序员文章站 2023-11-21 20:18:52
上一篇文章中总结了支付宝支付前后端实现,本篇将对其竞争对手——微信支付进行详细讲解。其中涉及代码来源于目前正在开发的项目,这个项目涉及pc端、h5移动端及app三类用户界面,app基于flutter开...

上一篇文章中总结了支付宝支付前后端实现,本篇将对其竞争对手——微信支付进行详细讲解。其中涉及代码来源于目前正在开发的项目,这个项目涉及pc端、h5移动端及app三类用户界面,app基于flutter开发,前后端目前都由我一人完成,后续将对这个项目中涉及到的技术进行一步步的总结,感兴趣的小伙伴可以关注一下。

1. 微信支付概述

对于线上应用来说,微信支付方式无外乎以下五种:

微信公众平台和微信开放平台的区别(2者区别对比分析)

app:适用于第三方app调用微信支付;pc网站:适用于pc网站发起的微信支付,又称native支付,展示一个二维码页面,供用户通过微信客户端扫描后支付。微信内浏览器:即通过微信浏览器打开的页面,通过jsapi进行支付,可以直接打开微信支付进行直接。这种方式适应于通过微信公众号打开的页面,或者是通过微信分享的链接点击后直接在微信内浏览器打开的场景。小程序:小程序内的支付。移动端非微信浏览器:通过h5支付方式,可直接跳转微信进行支付。

本文主要讲述pc网站、微信内浏览器及移动端非微信浏览器上的支付实现。

2. 开发前准备

微信体系目前比较混乱,据我目前了解的,除qq之外,微信自己都有三个不同的管理平台:微信公众平台、微信开放平台和微信支付商户平台, 但这三个平台更多的是业务上的区分。我们需要先登录公众平台,申请微信支付,同时配置业务域名、js接口安全域名等,如图所示:

微信公众平台和微信开放平台的区别(2者区别对比分析)

公众号设置

然后登录微信支付商户平台,将商户与微信公众号做关联。

如果要使用移动app进行支付,需要登录微信开放平台创建应用:https://open.weixin.qq.com/

在此可以创建app、网站应用、小程序等,同时可以绑定公众平台中的公众号应用。

微信公众平台和微信开放平台的区别(2者区别对比分析)

开放平台配置

我这个项目当前使用的都是公众平台应用来进行支付的,不需要登录开放平台进行配置;目前正在开发app,因此也开始在开放平台上申请了一个移动应用,等待腾讯审核。

配置完后就可以通过公众平台获取到应用id及secret,并在商户平台中获取商户号,在后续的开发中会使用到。

3. 微信支付简要流程

一个简单的微信支付流程如下所示(按我的项目来的,实际每个项目的下单流程肯定会不一样,但关于微信支付的部分基本是一致的):

微信公众平台和微信开放平台的区别(2者区别对比分析)

微信支付流程用户购买商品;后端生成订单号订单信息确认,用户下单后端生成订单,同时调用微信接口生成微信端订单,并返回订单信息给前端前端根据微信订单信息跳转微信支付页面(或者加载二维码)用户支付完成微信端跳转到支付前页面(如未指定重定向页面),同时会推送支付结果给后端应用

4. 支付过程示例图如下所示:

商品选择

微信公众平台和微信开放平台的区别(2者区别对比分析)

商品选择生成订单号并确认

微信公众平台和微信开放平台的区别(2者区别对比分析)

订单确认支付界面(pc)

微信公众平台和微信开放平台的区别(2者区别对比分析)

pc扫码支付支付界面(微信内)

微信公众平台和微信开放平台的区别(2者区别对比分析)

微信内支付

5. 具体实现

考虑代码量太大影响展示,因此下面会将无关代码隐藏,如果有问题可以私信。

5.1 前端订单确认与下单

<template>
    <div class="buy-vip-confirm-page p-1">
        <template v-if="!plan.paymoney">订单已失效或已支付完成</template>
        <template v-else>
            <van-cell-group title="订单信息">
                <van-cell title="订单号" :value="orderno" />
                <van-cell title="订单金额(元)" :value="plan.refillmoney" />
                <van-cell
                    title="获得t币"
                    :value="plan.paymoney * (plan.isvip ? 1.5 : 1)"
                />
            </van-cell-group>

            <div class="buttons">
                <van-button type="primary" @click="dobuy" class="mb-1"
                    >确认并支付</van-button
                >
                <van-button @click="$goback()">取消</van-button>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            plan: {},
            orderno: "",
            paychannel: "wx",
        };
    },
    mounted() {
        this.plan = this.$route.query || {};

        // 生成订单号
        this.$get("/trade/generate-order-no").then((resp) => {
            this.orderno = resp;
        });
    },

    methods: {
        dobuy() {
            var platform = 0;
            // 0表示pc支付,1表示微信内支付; 2表示mweb支付
            // 此处是h5端的页面,因此没有0的情况,0的情况的pc端处理
            platform = this.$iswx() ? 1 : 2;

            this.$post("/pay/refill", {
                orderno: this.orderno,
                fee: this.plan.refillmoney,
                channel: this.paychannel === "wx" ? 2 : 1,
                tbamount: this.plan.paymoney,
                tbsentamount: this.plan.isvip ? this.plan.paymoney * 0.5 : 0,
                platform: platform,
            }).then((resp) => {
                // 生成支付表单成功后跳转支付页面
                resp.platform = platform;
                this.$gopath("/user/pay/wx-pay", resp);
            });
        },
    },
};
</script>

注意iswx是全局的判断是否是微信浏览器的方法,实现如下:

// 判断是否是微信浏览器 
vue.prototype.$iswx = () => {
    let ua = navigator.useragent.tolocalelowercase();
    return ua.indexof("micromessenger") !== -1;
}

用户在确认订单后点击“发起订单并支付”,将调用后台/pay/refill接口生成订单。

5.2 后台订单生成

开发之前需要先下载微信提供的sdk(https://pay.weixin.qq.com/wiki/doc/api/wxpay/ch/pages/sdk.shtml),然后在maven中进行配置:

<dependency>
    <groupid>com.github.wxpay</groupid>
    <artifactid>wxpay-sdk</artifactid>
    <version>0.0.3</version>
    <scope>system</scope>
    <systempath>${project.basedir}/src/main/resources/jar/wxpay-sdk-0.0.3.jar</systempath>
</dependency>

然后定义wxpayconfigimpl类如下:

package com.ttcn.front.common.config;

import com.github.wxpay.sdk.wxpayconfig;

import java.io.inputstream;

public class wxpayconfigimpl implements wxpayconfig {
    public wxpayconfigimpl() {
    }

    public string getappid() {
        return "***";
    }

    public string getmchid() {
        return "***";
    }

    public string getkey() {
        return "***";
    }

    public inputstream getcertstream() {
        return null;
    }

    public int gethttpconnecttimeoutms() {
        return 10000;
    }

    public int gethttpreadtimeoutms() {
        return 0;
    }
}

注意需要将appid及商户号、key配置成从公众平台、商户平台中获取的值。

完成后就可以继续编码了。

/pay/refill接口实现如下:

/**
     * 充值
     *
     * @param refill 充值
     * @return 支付相关信息
     */
    @preauthorize("isauthenticated()")
    @postmapping("/refill")
    public paydto refill(@requestbody @validated refilldto refill) {
        userdto user = this.getloginuserorthrow();

        if (null == tradeservice.findbyno(refill.getorderno())) {
            // 保存订单
            tradedto tradedto = new tradedto();
            ...

            tradeservice.save(user, tradedto);
        }

        // 获取支付二维码
        string openid = user.getwxopenid();
        if (refill.getplatform().equals(1)) {
            openid = user.getmpopenid();
        }
        return wxpayservice.getpayurl(openid, refill.getorderno(), refill.getfee(), tradetype.refill, refill.getplatform());
    }

wxpayservice.getpayurl即用于调用微信接口生成微信端订单,实现如下:

/**
     * 查询支付页面地址
     *
     * @param platform 0 : web端;1: 微信内支付;2: mweb支付(即移动端非微信内支付)
     * @return 支付页面地址
     */
    public paydto getpayurl(string openid, string orderno, double fee, tradetype tradetype, integer platform) {
        platform = optional.ofnullable(platform).orelse(0);
        boolean isjspay = platform.equals(1);

        string ip;
        try {
            ip = inetaddress.getlocalhost().gethostaddress();
        } catch (unknownhostexception e) {
            logger.error("获取ip地址失败", e);
            throw businessexception.create("生成支付二维码失败,请稍后重试");
        }
        string feestr = string.format("%.0f", fee * 100d);

        map<string, string> params = mapenhancer.<string, string>create()
                .put("body", tradetype.getname())
                .put("nonce_str", orderno)
                .put("out_trade_no", orderno)
                .put("total_fee", feestr)
                .put("spbill_create_ip", ip)
                .put("notify_url", notifyurl)
                .put("trade_type", isjspay ? "jsapi" : (platform == 0 ? "native" : "mweb"))
                .putnotnull("openid", isjspay ? openid : null)
                .put("product_id", string.valueof(tradetype.ordinal()))
                .get();

        if (logger.isdebugenabled()) {
            logger.debug("微信支付下单参数: {}", params);
        }

        map<string, string> result;
        try {
            result = wxpay.unifiedorder(params);
        } catch (exception e) {
            logger.error("生成微信支付二维码失败", e);
            throw businessexception.create("生成微信支付二维码失败,请稍候重试");
        }
        if (logger.isdebugenabled()) {
            logger.debug("发送微信支付订单结果: {}", result);
        }

        string resultcode = maputils.getstring(result, "result_code");
        if ("success".equals(resultcode)) {
            if (logger.isdebugenabled()) {
                logger.debug("发送订单成功");
            }

            paydto paydto = new paydto();
            paydto.setfee(fee);
            paydto.setorderno(orderno);

            paydto.setcodeurl(maputils.getstring(result, isjspay ? "prepay_id" : (platform == 0 ? "code_url" : "mweb_url")));

            // 如果是jspay
            if (isjspay) {
                // 需要组装参数并签名
                // 签名
                map<string, string> signparams = new treemap<>();
                signparams.put("appid", config.getappid());
                signparams.put("timestamp", string.valueof(localdatetime.now().toepochsecond(zoneoffset.ofhours(8))));
                signparams.put("noncestr", uuid.randomuuid().tostring().replaceall("-", ""));
                signparams.put("package", "prepay_id=" + maputils.getstring(result, "prepay_id"));
                signparams.put("signtype", "md5");
                try {
                    string sign = wxpayutil.generatesignature(signparams, config.getkey());
                    signparams.put("paysign", sign);
                } catch (exception e) {
                    logger.error("签名失败", e);
                    throw businessexception.create("签名失败");
                }

                paydto.setparams(signparams);
            }

            return paydto;
        }

        logger.error("发送微信支付订单失败,返回结果:{}", result);
        throw businessexception.create("生成微信支付二维码失败,请重试或联系管理员");
    }

可以看到上面主要是组装参数然后调用wxpay.unifiedorder接口生成支付表单;

涉及的参数如下:

body商品简单描述nonce_str随机字符串,长度要求在32位以内out_trade_no商户系统内部订单号,要求32个字符内,且在同一个商户号下唯一 接收支付结果通知时会包括这个参数,因此可以将通知结果与之前的订单关联上; total_fee订单总金额,单位为分spbill_create_ip支持ipv4和ipv6两种格式的ip地址。用户的客户端ipnotify_url异步接收微信支付结果通知的回调地址,通知url必须为外网可访问的url,不能携带参数。 需要在微信公众平台中配置相关域名,否则会报异常trade_type交易类型,jsapi/native/app/mweb等 jsapi用于微信内浏览器打开的界面支付 native用于pc端支付 app用于单独的app应用中进行的支付 mweb用于h5在非微信浏览器中打开的支付openidtrade_type=jsapi时(即jsapi支付),此参数必传,此参数为微信用户在商户对应appid下的唯一标识。 注意只有在微信浏览器支付中才传输该值,其它的不要传,否则会报异常 product_idtrade_type=native时,此参数必传。此参数为二维码中包含的商品id,商户自行定义。

其它参数请参考:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1

生成支付表单后,注意如果是jsapi(也就是微信内浏览器打开的场景)需要进行签名,代码参考上面。

生成的支付表单示例如下(pc):

 {nonce_str=hcf8vr2sg5xnakfy, code_url=weixin://wxpay/bizpayurl?pr=viarg6jzz, appid=**, sign=***, trade_type=native, return_msg=ok, result_code=success, mch_id=1501105441, return_code=success, prepay_id=wx2020212657557887ba533cfa23a2be0000}

5.3 前端跳转支付界面

在5.1中调用/pay/refill接口并返回后,会带上返回的支付表单信息跳转到新的界面:

this.$post("/pay/refill", {
                ...
}).then((resp) => {
    resp.platform = platform;
    this.$gopath("/user/pay/wx-pay", resp);
});

跳转后的wx-pay界面实现如下:

<template>
    <div class="wx-pay-page">
        <div class="code-image p-1 mt-2">
            <div class="bottom">
                请确认支付已完成,如有异议,请在<span
                    @click="$gopath('/feedback')"
                    class="underline"
                    >服务中心</span
                >中进行反馈
            </div>
        </div>
    </div>
</template>

 <script>
export default {
    components: {},
    props: [],
    data() {
        return {
            getresultinterval: null,
            paydialogvisible: false,
            orderno: null,
            iswx: false,
            payinfo: null,
            params: null,
        };
    },
    mounted() {
        this.iswx = this.$iswx();
        this.orderno = this.$route.query.orderno;
        this.payinfo = this.$route.query.codeurl;

        // 支付方式,1:微信内支付,2:mweb支付
        this.platform = this.$route.query.platform;
        this.params = this.$route.query.params;

        this.dopay();
    },
    destroyed() {
        if (this.getresultinterval) {
            clearinterval(this.getresultinterval);
        }
    },
    methods: {
        dopay() {
            if (this.platform === 1 || this.platform === "1") {
                // 微信内支付
                if (typeof weixinjsbridge == "undefined") {
                    if (document.addeventlistener) {
                        document.addeventlistener(
                            "weixinjsbridgeready",
                            this.onbridgeready,
                            false
                        );
                    } else if (document.attachevent) {
                        document.attachevent(
                            "weixinjsbridgeready",
                            this.onbridgeready
                        );
                        document.attachevent(
                            "onweixinjsbridgeready",
                            this.onbridgeready
                        );
                    }
                } else {
                    this.onbridgeready();
                }
            } else {
                 // 非微信内支付(mweb)
                var url = this.payinfo;
                window.open(url, "_self");
            }
        },

        onbridgeready() {
            let _this = this;

            window.weixinjsbridge.invoke(
                "getbrandwcpayrequest",
                this.params,
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示:
                        //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                        alert(
                            "支付成功,您可以在账户中心/消费记录中查看历史订单"
                        );
                        _this.$gopath("/user");
                    }
                }
            );
        },
    },
};
</script> 

对于微信内支付,可以通过其浏览器的weixinjsbridge对象调起微信支付界面。

非微信浏览器,将表单中codeurl(二维码)加载到页面中即可。 (目前我的项目代码在移动端非微信浏览器中展示的仍旧是二维码,暂未做改造,所以上面非微信浏览器的与pc端处理基本一样,后续会对这部分进行改造)

到此就等用户支付完成即可。

5.4 接收支付结果

当用户支付完成后,会跳转到支付前的页面,这个时候可以在这个页面中做一些操作,来查询订单状态并展示给用户。

在5.2生成订单的参数中,我们指定了notify_url,那么在支付成功后微信也会同时往这个所配的地址推送支付结果,代码实现如下:

/**
     * 接收微信支付结果通知
     *
     * @param body 微信支付结果
     */
@postmapping("wx-notify")
public string wxnotify(@requestbody string body) {
    wxpayservice.parseandsavetraderesult(body);
    return "success";
}
/**
     * 支付结果解析
     */
public void parseandsavetraderesult(string body) {
    try {
        if (logger.isdebugenabled()) {
            logger.debug("接收到微信支付结果通知: {}", body);
        }

        map<string, string> map = wxpayutil.xmltomap(body);
        string tradeno = maputils.getstring(map, "out_trade_no");
        if (stringutils.isempty(tradeno)) {
            logger.warn("微信通知消息中订单号为空");
            return;
        }

        tradedto trade = tradeservice.findbyno(tradeno);
        if (null == trade) {
            logger.warn("交易不存在,通知消息:{}", body);
            return;
        }

        if (trade.getstate() == 1) {
            if (logger.isdebugenabled()) {
                logger.debug("订单已成功: {}", body);
            }

            return;
        }

        string result = maputils.getstring(map, "result_code", "");
        if ("success".equals(result)) {
            // 支付成功
            tradeservice.tradesuccess(trade);
        } else {
            logger.warn("支付失败,返回消息:{}", body);

            tradeservice.tradefailed(trade);
        }
    } catch (exception e) {
        logger.error("返回结果:{}", body);
        logger.error("xml转换成map异常", e);
    }
}

接收到消息后更新订单状态,并进行其它一些如账户余额修改等处理。