- 最近做了个项目是关于微信网页开发的，今天记录下在做项目中的关于微信这块遇到的一些坑
- 关于微信这块，用的是EasyWeChat，提高了开发的效率．在看EasyWeChat这个文档的时候发现了有专门针对laravel 框架的包，所以就用了laravel-wechat
首先是安装这个composer包
composer require "overtrue/laravel-wechat:~3.0"
接着注册ServiceProvider，由于看github文档说明时，文档上有错误LaravelWeChat写成了小写Laravelwechat 在phpstorm中按ctr点击鼠标也能跳转方法，但是在运行项目的时候报找不到这个类，最后看了github上的issue有人遇到同样的问题，发现了这个大小写问题，此为第一个坑．
Overtrue\LaravelWeChat\ServiceProvider::class
- 接着是token验证，该配置的地方都没问题了，但是这个token验证老师失败，最后发现由于laravel 自带的CSRF 中间件要排除路由,和这个中间件平级,同时CSRF排除这个url
Route::any(\'/wechat\', \'WeChatController@serve\');
Route::group([\'middleware\' => \'web\'], funcation(){})
过滤url
class VerifyCsrfToken extends BaseVerifier
{
protected $except = [
//
\'wechat\', \'web/pay/callback\', \'web/pay/signCallback\'
];
}
- 关注回复相关代码
namespace App\Http\Controllers;
use App\Http\Controllers\Web\Controller;
use Illuminate\Http\Request;
use App\Http\Controllers\Web\UserController as User;
use App\Models\Setting;
use App\Models\WechatReply;
use EasyWeChat\Message\News;
class WechatController extends Controller
{
public function serve()
{
$app = app(\'wechat\');
$app->server->setMessageHandler(function($message) use ($app){
if ($message->MsgType==\'event\') {
$userOpenid = $message->FromUserName;
switch ($message->Event) {
case \'subscribe\':
$userInfo[\'openid\'] = $userOpenid;
$userService = $app->user; //获取用户服务
$user = $userService->get($userInfo[\'openid\']);
$userInfo[\'nickname\'] = $user[\'nickname\'];
$userInfo[\'headimgurl\'] = $user[\'headimgurl\'];
if (userAttention($userInfo)) {
return $this->reply(\'follow_keyword\');
}else{
return \'您的信息由于某种原因没有保存，请重新关注\';
}
break;
case \'unsubscribe\':
if (userCancelAttention($userOpenid)) {
return \'已取消关注\';
}
break;
default:
# code...
break;
}
} elseif ($message->MsgType==\'text\') { //关键字回复
$replay = WechatReply::where(\'keyword\', $message->Content)->first();
if ($replay) {
} else {
}
}
});
return $app->server->serve();
}
- 网页授权,EasyWeChat进行网页授权非常简单，这个项目中，我主要用了静默授权,只要将路由包含在这个中间件中，通过session就可以获得这个用户的openid
Route::group([\'middleware\' => \'wechat.oauth\'], function () {
});
$user = session(\'wechat.oauth_user
$openid = $user[\'id\'];
- 菜单的设置 ,通过注入的方式获得菜单的实例
use EasyWeChat\Foundation\Application;
use Illuminate\Http\Request;
class MenuController extends Controller
{
public $menu;
public function __construct(Application $app)
{
$this->menu = $app->menu;
}
public function create()
{
//这里进行菜单数组格式的组装
$this->menu->add($buttons);
}
- 模板消息 ,写一个全局辅助函数，来发送模板消息,获得模板消息应用实例
function sendTemplateMsg($templateId, $userId, $data, $url)
{
$user = \App\Models\User::where(\'id\', $userId)->first();
$app = new \EasyWeChat\Foundation\Application(config(\'wechat\'));
$notice = $app->notice;
$result = $notice->uses($templateId)->withUrl($url)->andData($data)->andReceiver($user->openid)->send();
return $result;
}
- 支付，支付这边用的是jssdk方式支付,最主要的是要获得统一下单的prepay_id．
前端页面这个$js要在控制器传到这个待支付界面
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script> //微信的js库文件
wx.config(<?php echo $js->config(array(\'chooseWXPay\'), false) ?>);
点击支付调用此方法
function pay() {
$.ajax({
url: siteUrl + \'/web/pay/create\',
type: \'get\',
dataType: \'json\',
data: {
\'id\': "{{ $order->id }}",// 订单ID
\'coupon_id\': "{{ $coupon_id }}",// 优惠券ID
\'actual_payment_amount\': deposit // 实际支付金额
},
headers: {
\'X-CSRF-TOKEN\': $(\'meta[name="csrf-token"]\').attr(\'content\')
},
success: function (data) {
if (data[\'code\'] === 0) {
data = data[\'data\'];
wx.ready(function() {
wx.chooseWXPay({
timestamp: data[\'timestamp\'],
nonceStr: data[\'nonceStr\'],
package: data[\'package\'],
signType: data[\'signType\'],
paySign: data[\'paySign\'],
success: function (res) {
// 支付成功跳转新页面
window.location.href = siteUrl + "/web/order/paySuccess";
}
});
});
} else {
// 统一下单失败
alert(data[\'data\'][\'err_code_des\']);
}
}
});
}
create方法代码
use EasyWeChat\Foundation\Application;
use EasyWeChat\Payment\Order as WechatOrder;
use Illuminate\Support\Facades\Log;
class PayController extends Controller
{
private $app;
public function __construct()
{
$this->app = new Application(config(\'wechat\'));
}
// 微信统一下单
public function createOrder(Request $request)
{
$order = Order::find($request->id);
$attributes = [
\'trade_type\' => \'JSAPI\',
\'body\' => \'\',
\'detail\' => \'订单号: \' . $order->order_no,
\'out_trade_no\' => $order->order_no,
\'total_fee\' => $request->actual_payment_amount * 100, // 单位：分
\'openid\' => getOpenId(), // trade_type=JSAPI，此参数必传，用户在商户appid下的唯一标识，
\'notify_url\' => url(\'/web/pay/callback\'), //支付回调方法
\'attach\' => \'\' //这里是带给回调方法的一些字段，用于业务逻辑处理
];
$order = new WechatOrder($attributes);
$result = $this->app->payment->prepare($order);
if ($result->return_code == \'SUCCESS\' && $result->result_code == \'SUCCESS\') {
$prepayId = $result->prepay_id;
$config = $this->app->payment->configForJSSDKPayment($prepayId); // 返回数组
return apiReturn(SUCCESS, \'统一下单成功\', $config);
}
return apiReturn(ERROR, \'统一下单失败\', $result);
}
由于callback方法也是post类型所以在CSRF中间件中也要过滤，这也是有的人发现支付完了，但是没有调用callback方法
class VerifyCsrfToken extends BaseVerifier
{
/**
* The URIs that should be excluded from CSRF verification.
*
* @var array
*/
protected $except = [
//
\'wechat\', \'web/pay/callback\'
];
}
callback方法
// 微信支付回调
public function callback(Request $request)
{
$response = $this->app->payment->handleNotify(function($notify, $successful) {
// 记录日志
Log::info(\'微信支付: \' . json_encode($notify));
// 使用通知里的 "微信支付订单号" 或者 "商户订单号" 去自己的数据库找到订单
$order = Order::where(\'order_no\', $notify->out_trade_no)->first();
// 检查订单是否已经更新过支付状态
if ($order->pay_time) {
return true;
}
// 用户是否支付成功
if ($successful) {
//业务逻辑代码，处理
$attach = json_decode($notify->attach);
apiReturn(SUCCESS, \'支付成功\', $notify);
} else {
apiReturn(SUCCESS, \'支付失败\', $notify);
}
$order->save(); // 保存订单
$this->sendPayMessage($order->id);
return true; // 返回处理完成
});
return $response;
}
- 分享朋友，分享朋友圈，本来以为点击页面中的某一个按钮能直接分享给朋友呢，其实不是的，要使用微信的发送朋友，使用jssdk可以自定义分享的地址
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
wx.config(<?php echo $js->config(array(\'onMenuShareTimeline\', \'onMenuShareAppMessage\'), false) ?>);
wx.ready(function() {
wx.onMenuShareAppMessage({
title: \'\', // 分享标题
desc: \'\', // 分享描述
link: \'\', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: \'\', // 分享图标
type: \'link\', // 分享类型,music、video或link，不填默认为link
dataUrl: \'\', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
alert(\'分享成功\');
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
},
fail: function () {
alert(\'fail\');
}
});
wx.onMenuShareTimeline({
title: \'推荐拿红包\', // 分享标题
link: \'\', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: \'\', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
alert(\'分享成功\')
},
cancel: function () {
// 用户取消分享后执行的回调函数
alert(\'请重新分享\')
}
});
});
起初我没有用wx.ready包住这两段代码，结果是分享的是我当前界面，而不是自定义的url地址，但是微信开发文档写的是：
- wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
我理解的是分享也是手动触发的应该也不需要放在ready中， 但是实际不行．