php-tp5-fastadmin开发H5页面,以微信公众号授权,进行JSAPI支付流程

技术要点(具体开发代码,在(公正年报H5)中实现

1、申请好公众号,获取AppID(公众号ID)AppSecret(公众号密钥)

 2、申请微信支付账户,获取(商户号)和(密钥)

 3、在微信支付账户中绑定公众号,然后在公众号中同意授权绑定,使两者产生关联

代码实现

一、h5页面,调用方法获取code

public function getGzhCode()
{
    $appid = 'xxx';//公众号appid
    $redirect_uri = urlencode('https://abcd/me'); // 用户同意授权后,能够跳转的回调链接地址
    // 获取code
    $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
    header('Location: ' . $url);
    exit();
}

二、在上面设置的回调页面me中(通过code获取access_token和openId),这个openId就是用户在公众号中的身份ID,支付的时候通过这个ID来实现

if (isset($_GET['code'])) {
    $appid = 'xxx';//公众号appid
    $appsecret = 'xxx';//公众号secret
    $code = $_GET['code'];//获取回调传过来的code,通过code再获取token以及openId
    $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$appsecret&code=$code&grant_type=authorization_code";
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $result = curl_exec($ch);
    curl_close($ch);
    $data = json_decode($result, true);
    $openId = $data['openid']; // 用户的openid
    Session::set('openId',$openId);//保存openid到session中
    //判断用户是否已存在,不存在则先保存新用户记录    
    $userData = GznbUserModel::where('openId',$openId)->find();
    if(empty($userData)){
        $save['openId'] = $openId;
        GznbUserModel::create($save);
        $userData = GznbUserModel::where('openId',$openId)->find();
    }
    $this->assign('userData',$userData);
    return $this->view->fetch();
}

至此,已经完成了获取用户openId和保存记录,用户下次登录或支付时,通过这个openId来锁定身份

三、微信公众号-JSAPI支付实现

1、生成微信公众号-JSAPI支付参数,传递给H5页面做为config

public function form()
{
    if(request()->isPost()){
        //支付页面,提交订单,保存订单记录
        $openId = Session::get('openId');
        $status = 0;
        $trade_no = '';
        if($openId){
          $data = $this->request->param();
            $userData = GznbUserModel::where('openId',$openId)->find();
            if($userData){
                $data['userId'] = $userData['id'];
                $data['orderNumber'] = $this->getOrderNumber();
                //生成随机订单号,和回调时对应
                $data['trade_no'] = $data['orderNumber'];
                $res = GznbOrderModel::create($data);
                if($res){
                    $trade_no = $dat
### UNI-APP 开发微信公众号 (H5) 并集成微信支付 #### 一、准备工作 为了在 Uni-app 中开发微信公众号 H5 应用并集成微信支付功能,需先完成如下准备: 1. **注册微信公众平台账号** - 获取 AppID 和 AppSecret。 2. **配置服务器域名** -微信公众平台上设置合法的业务域名、JS接口安全域名等必要信息[^1]。 3. **安装必要的插件和库文件** 对于微信支付的支持,在项目中引入 `wx.js` 文件用于调用微信 JS SDK 接口。同时确保已安装最新版本的 Vue CLI 工具以便更好地管理项目资源。 #### 二、实现流程 ##### (一)初始化环境变量 创建 `.env.development` 或者其他适合当前环境下的配置文件来保存敏感数据如 appId, mchId(商户号), key(密钥),这些参数将在后续请求过程中被使用到。 ```bash VUE_APP_WX_APP_ID=your_app_id_here VUE_APP_MCH_ID=your_merchant_id_here VUE_APP_API_KEY=your_api_key_here ``` ##### (二)获取预支付订单编号(prepay_id) 当用户确认付款金额后,前端应向自己的服务端发起 POST 请求传递商品详情给后台处理逻辑;此时后端负责生成交易单据并向 WeChat Pay API 发送 HTTPS 请求以获得 prepay_id 参数作为响应的一部分返回给客户端应用。 注意:此过程涉及敏感操作建议采用 HTTPS 协议传输数据,并且严格按照官方文档说明构建签名字符串防止篡改攻击风险。 ##### (三)调起微信内嵌浏览器中的支付控件 收到有效的 prepay_id 后即可按照下述方式组装所需参数并通过 wx.chooseWXPay 方法启动内置 Webview 支付界面供顾客输入密码验证身份从而完成整个购物流程: ```javascript // 假设已经获得了prepay_id和其他必需的信息 const payParams = { "appId": process.env.VUE_APP_WX_APP_ID, "timeStamp": new Date().getTime(), "nonceStr": Math.random().toString(36).substr(2), "package": 'prepay_id=' + prepay_id_from_server,// 注意这里的拼接规则可能依据实际情况有所变化 "signType": "MD5", }; // 计算 sign 字段的具体方法请参照 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 let stringA = Object.keys(payParams) .filter(key => payParams[key]) .map(key => `${key}=${encodeURIComponent(payParams[key])}`) .join('&'); stringA += '&key=' + encodeURIComponent(process.env.VUE_APP_API_KEY); payParams.sign = hex_md5(stringA.toUpperCase()); // 调用 chooseWXPay 进行支付 WeixinJSBridge.invoke( 'getBrandWCPayRequest', payParams, function(res){ if(res.err_msg === "get_brand_wcpay_request:ok"){ alert('支付成功!'); }else{ console.error(`支付失败:${res.err_code}`); } }); ``` 上述代码片段展示了如何利用 JavaScript 实现微信支付的核心部分——即通过 WeixinJSBridge 对象访问原生组件进而引导用户至最终结算环节。值得注意的是实际部署之前还需要针对不同场景做充分测试确保兼容性和稳定性。 #### 三、常见问题排查 如果遇到无法正常唤起支付窗口的情况,请检查以下几点: - 是否正确设置了 jsApiList 数组内的权限项; - 检查 URL 地址是否被列入了公众平台的安全白名单之中; - 确认所有参与计算 Sign 的字段都已被正确定义并且顺序无误; - 测试环境中使用的证书是否有效过期等问题也可能会引起异常行为。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值