为何一定要做小程序_详解用vue.js和laravel完成微信

发布时间:2021-01-11 16:50 作者:jianzhan

摘要: 详细说明用vue.js和laravel完成手机微信付款 注:该项是手机微信微信公众号开发设计,请在向下看以前,先完成网页页面手机微信受权登录作用,实际查阅我简书的另外一一篇文章

详解用vue.js和laravel实现微信支付       本篇文章主要介绍了用vue.js和laravel实现微信支付,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:

1.打开app/,配置微信支付参数:

 * 微信支付
 'payment' = [
 'merchant_id' = env('WECHAT_PAYMENT_MERCHANT_ID', 'your-mch-id'),//商家号ID,请将其放在.env文件中
 'key' = env('WECHAT_PAYMENT_KEY', 'key-for-signature'),//商家支付key,请将其放在.env文件中
 'cert_path' = env('WECHAT_PAYMENT_CERT_PATH', storage_path('app/public/apiclient_cert.pem')), //微信支付证书apiclient_cert.pem的绝对路径,我放在storage/app/public/下
 'key_path' = env('WECHAT_PAYMENT_KEY_PATH', storage_path('app/public/apiclient_key.pem')), //微信支付证书apiclient_key.pem的绝对路径,我放在storage/app/public/下径
 // '' = env('WECHAT_PAYMENT_DEVICE_INFO', ''),
 // 'sub_app_id' = env('WECHAT_PAYMENT_SUB_APP_ID', ''),
 // 'sub_merchant_id' = env('WECHAT_PAYMENT_SUB_MERCHANT_ID', ''),
 // ...

以上参数,请依照自己的情况配置,请勿直接拷贝代码!

2.配置微信支付和回调路由

//以下路由我放在api.php路由里,如果你放在web.php路由,请自行调整!
Route::middleware('api')- post('wxpay','');
Route::middleware('api')- post('wx_notify','');

3.在相应的控制器里创建wxpay的方法

 * 这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝!
 public function wxpay(Request $request)
 //本实例传递的参数为user_id 和 broadcast_id,具体
 if($request- has('user_id') $request- has('broadcast_id')){
 $out_trade_no = md5(Carbon::now().str_random(8));
 $user_id = $request- get('user_id');
 $broadcast_id = $request- get('broadcast_id');
 $num = $request- get('num');
 $flag = $request- get('flag');
 $openid = $this- user- getOpenid($user_id);
 $broadcast = $this- broadcast- getById($broadcast_id);
 $speaker_id = $broadcast- speaker_id;
 $body = $broadcast- title;
 $detail = '';
 $paid_at = null;
 $status = 'pre_paid';
 $amount = ($broadcast- price)*$num;
 $attributes = [
 'trade_type' = 'JSAPI', // JSAPI,NATIVE,APP...
 'body' = $body, 
 'detail' = $detail,
 'out_trade_no' = $out_trade_no,
 'total_fee' = $amount, // 单位:分
 'notify_url' = $_ENV['APP_URL'].'/api/wx_notify', // 支付结果通知网址,如果不设置则会使用配置里的默认地址
 'openid' = $openid, // trade_type=JSAPI,此参数必传,用户在商户appid下的唯一标识,
 // ...
 $order = new Order($attributes);
 $result = $this- wechat- payment- prepare($order);
 if ($result- return_code == 'SUCCESS' $result- result_code == 'SUCCESS'){
 //创建预订单
 $param = [
 'out_trade_no'= $out_trade_no,
 'user_id'= $user_id,
 'broadcast_id'= $broadcast_id,
 'speaker_id'= $speaker_id,
 'body'= $body,
 'detail'= $detail,
 'paid_at'= $paid_at,
 'amount'= $amount,
 'flag'= $flag,
 'status'= $status,
 'num'= $num
 $this- bill- store($param);
 //返回
 $prepayId = $result- prepay_id;
 $config = $this- wechat- payment- configForPayment($prepayId,false);
 return response()- json($config);

4.在相应的控制器里添加回调wxnotify方法

 * 这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝!
 public function wxnotify()
 $response = $this- wechat- payment- handleNotify(function($notify, $successful){
 $order = $this- bill- getBillByOrderno($notify- out_trade_no);//查询订单($notify- out_trade_no);
 if (!$order) { // 如果订单不存在
 return 'Order not exist.'; // 告诉微信,我已经处理完了,订单没找到,别再通知我了
 // 如果订单存在
 // 检查订单是否已经更新过支付状态
 if ($order- paid_at) { // 假设订单字段“支付时间”不为空代表已经支付
 return true; // 已经支付成功了就不再更新了
 // 用户是否支付成功
 if ($successful) {
 // 不是已经支付状态则修改为已经支付状态
 $order- paid_at = Carbon::now(); // 更新支付时间为当前时间
 $order- status = 'paid';
 } else { // 用户支付失败
 $order- status = 'paid_fail';
 $order- save(); // 保存订单
 return true; // 返回处理完成
 return $response; 

5.vue.js中methods的方法代码参考

 wechatpay(){
 var param = {
 'user_id':this.getStorage(),
 'broadcast_id':this.id,
 'num':1,
 'flag':'buy',
 this.$http.post(this.GLOBAL.apiUrl+'/wxpay',param).then((response) = {
 WeixinJSBridge.invoke(
 'getBrandWCPayRequest', response.data,
 function(res){
 if(res.err_msg == "get_brand_wcpay_request:ok" ) {
 # 回调成功后跳转
 # router.push({name: 'Room',params:{id:this.id}});

6.微信公众平台配置

1) 在“公众账号设置”—“JS接口安全域名”设置中填写前端域名

2) 在“微信支付”—“开发配置”页面中,公众账号支付下填写“支付授权目录”,注意的是,此授权url为前端支付按钮所在页面的url

7.接下来你就可以测试了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 可以直接下载网页视频的

    必须看一下数据加密方式。不一样的网站应用的数据加密方式不一样,免费下载的方式都不同。 看一下 F12能寻找原视頻详细地址吗? 这类非常简单。第二是维棠免费下载,B站也是

  • 求助:个人网站无法访问?

    建的本人网页无法访问了,访问网页页面啊,手机游戏啊都一切正常,唯有本人网站没法浏览,360访问器,火狐浏览器,Google都用过不好,原本猜疑是买的虚似室内空间那不平稳造成的

  • 如何自己搭建一个个人网

    怎样构建简易的本人展现网站?应用甚么手机软件,专用工具?搭建一个自己网站,初期的精确精准定位十分重要,你尽量要把握你做这一网站的目的,是便于自己呈现、技术专业专业

  • 外国人在国内建立个人网

    便是有一名外国籍中国人文学家要想在中国创建一个网站用以本人著作展现。在阿里巴巴云租了网络服务器和网站域名。想要知道办理备案是如何个步骤,如今文学家自己国外。文学家

  • 有哪些好的视觉设计学习

    由于做 手机微信经营的原因,将会对这些方面必须一些认知能力 从ps到cdr再到ae诸多图象、音频视频类等解决手机软件都是有涉及猎 愿从业这些方面工作中的知友能指导迷津[抱拳]感谢