wechat

微信jsdk

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

微信JS-SDK说明文档

基础接口, 分享接口, 图像接口, 音频接口, 智能接口, 设备信息, 地理位置, 摇一摇周边, 界面操作, 微信扫一扫, 微信小店, 微信卡卷, 微信支付, 快速输入

  1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名
  2. 引入JS文件
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

  3. 后端请求jsdk配置, 返回config

    public function wxjsdk()
    {
        $url = request('url');
        if (empty($url)) {
            return response()->json(['code' => 500, 'msg' => 'url is not found']);
        }
        $url = urldecode($url);
        app('wechat')->js->setUrl($url);
        $config = app('wechat')->js->config(['scanQRCode']);
    
        return response()->json(['code' => 200, 'data' => $config]);
    }
  4. 通过config接口注入权限验证配置
    wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
    });

微信jsdk本地调试

  1. 在公众号设置->功能设置->js接口安全域名(非https也行,只能是80/443端口),记得上传txt文件到该域名的目录下,否则报权限错误
  2. 本地如果是vue编译运行,一般是120.0.0.1:8080,使用frp穿透至本地(由于微信80/443端口的限制,启动frps,服务器80/443将关闭)
  3. 前端调用接口调试可以用localhost,但必须将公网IP添加到公众号安全中心->IP白名单方可
  4. 向服务器获取jsdk配置(示例代码,尤其是ios调取系统扫码功能)
    • 服务器用laravel的overture的微信扩展包请求jsdk,这里是请求二维码
    • 服务器的ip一定要设置白名单才可以(本地调试则添加本地公网IP)
  5. 调用jsdk成功

微信支付

  • 微信商户配置
  • jsapi 支付

    JSAPI支付是指商户通过调用微信支付提供的JSAPI接口,在支付场景中调起微信支付模块完成收款。 应用场景有:
    线下场所:调用接口生成二维码,用户扫描二维码后在微信浏览器中打开页面后完成支付
    公众号场景:用户在微信公众账号内进入商家公众号,打开某个主页面,完成支付
    PC网站场景:在网站中展示二维码,用户扫描二维码后在微信浏览器中打开页面后完成支付

  1. 安装laravel插件("overtrue/laravel-wechat": "~3.0",)并配置
  2. 配置.env
    WECHAT_APPID=wx7887cc4bf072eaf7  //公众号appid
    WECHAT_SECRET=775815e2862f2a3955e9f4bff618233f  //公众号秘钥
    WECHAT_PAYMENT_MERCHANT_ID=12345678     //产品中心-》开发配置-》商户号
    WECHAT_PAYMENT_KEY=1xKE8HAFfWxB27pR1ggP3siQsZFikyCQ  // 我的账号-》账户设置-》API安全-》API秘钥设置并记录
  3. 后端请求获取prepay_id

    public function prepay(Request $request)
    {
        $validate = validator(request()->all(), [
            'archive_id'=>'required|int',
            'order_id'=>'required|int'
        ]);
        if($validate->fails()) {
            return response()->json(['code' => 500, 'msg' => $validate->errors()->first()]);
        }
    
        $order = Order::self()->findOrfail($request->order_id);
    //        $openid = \Auth::guard('api')->user()->open_id;
        $openid = 'o53N90qHtPEuag07j746N_TvFgeU';
        $payment = app('wechat')->payment;
        $orderAttributes = [
            'trade_type'       => 'JSAPI',
            'body'             => 'Test Pay',
            'out_trade_no'     => $request->order_id.time(),  //订单号 + 时间戳
            'total_fee'        => intval($order->price * 100), // 单位:分
            'notify_url'       => $_SERVER['REQUEST_SCHEME'] .'://'. $_SERVER['HTTP_HOST'].'/api/order-notify', // 支付结果通知网址,如果不设置则会使用配置里的默认地址
            'openid'           => $openid // trade_type=JSAPI,此参数必传,用户在商户appid下的唯一标识,
        ];
    
        $wxPrepare = $payment->prepare(new EsayWechatOrder($orderAttributes));
    
        if ($wxPrepare->return_code == 'SUCCESS' && $wxPrepare->result_code == 'SUCCESS') {
    
            $order->update(['out_trade_no' => $orderAttributes['out_trade_no']]);
    
            return response()->json(['code'=>200, 'data'=>$payment->configForJSSDKPayment($wxPrepare->prepay_id)]);
        }
    
        return response()->json(['code'=>500, 'msg'=> $wxPrepare]);
    }
  4. 前端vue页面发起支付

    methods: {
    
            submit:function () {
                this.jsSDK(this.params);
            },
            jsSDK:function (params) {
                if (typeof window.WeixinJSBridge === 'undefined') {
                    console.log('undefined');
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(params) }, false)
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', function () { onBridgeReady(params) })
                        document.attachEvent('onWeixinJSBridgeReady', function () { onBridgeReady(params) })
                    }
                } else {
                    console.log('ready');
                    this.onBridgeReady(params)
                }
            },
            onBridgeReady:function (params) {
                window.WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        'appId': params.appId, // 公众号名称,由商户传入
                        'timeStamp': params.timestamp, // 时间戳,自1970年以来的秒数
                        'nonceStr': params.nonceStr, // 随机串
                        'package': params.package,
                        'signType': params.signType, // 微信签名方式:
                        'paySign': params.paySign // 微信签名
                    },
                    function (res) {
                        // location.href = params.Url
                        console.log(res);
                    }
                )
            }
        }
  5. 微信开发工具会报(‘chooseWXPay:fail, the permission value is offline verifying’)所以必须真机调试
  6. 最好是线上调试,如果有多余服务器,可使用frps穿透本地调试(但必须停止80或443端口)使用免费的ngroc的话可以穿透,但其域名好像已被微信举报,无法访问。
  7. 支付成功后,微信post支付结果到notify_url设定的地址,来更改支付状态。
  • h5 支付

    H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。

小程序获取SessionKey 和 openid

  • 获取 SessionKey 和 openid
    1. .env 设置公众号(WECHAT_APPID, WECHAT_SECRET),
    小程序(WECHAT_MINI_PROGRAM_APPID, WECHAT_MINI_PROGRAM_SECRET)
    2. 设置服务器IP在公众平台白名单,若本地接口设置公网IP为白名单
    3. 小程序开发工具,更新小程序appid
    $wechat = app('wechat')->mini_program->sns->getSessionKey($code)->toArray();
    = [
      "session_key" => "+z/Z4xXxUIglgvRMlgBsHw==",
      "openid" => "oPuu05Gqy66o-jMVxyzq1SfwS5bw"
    ]
  • 解密encryptedData (用户信息unionID需要认证开放平台, 用户微信步数。。。等)
    app('wechat')->mini_program->encryptor->decryptData($sessionKey, $iv, $encryptedData);

composer

composer update --ignore-platform-reqs // 忽略版本匹配

评论数量: 0

0
点赞
293
浏览
0
评论

贡献 24