使用 Laravel 与 Vue.js 进行微信开发

Question

目标

本文的目标是实现与微信服务器的通信。

环境

• MacOS
• Laravel 5.1
• Vue.js 2.1
• EasyWeChat

安装 EasyWechat

composer require "overtrue/laravel-wechat:~3.0"

配置

• 注册 ServiceProvider:
  • Overtrue\LaravelWechat\ServiceProvider::class,
• 创建配置文件
  • php artisan vendor:publish
• 修改 config/wechat.php
  • app_id：微信测试号 appID
  • secret：微信测试号 appsecret
  • token：自定义，要与微信测试号填写的 Token 保持一致
  • aes_key：加密信息用的，本文采用明文的方式，暂不填写

创建微信分组路由

修改文件 app/Http/routes.php，代码如下：

Route::group([
    'prefix' => 'wechat',
    'namespace' => 'WeChat',
    'middleware' => [],
], function() {
    require_once __DIR__ . '/Routes/wechat.php';
});

新增文件 app/Http/Routes/wechat.php，代码如下：

Route::any('/request-handler', 'WeChatServerController@requestHandler');

关闭路由 CSRF

修改文件 app/Http/Middleware/VerifyCSsrfToken.php，代码如下：

protected $except = [
    '/wechat/request-handler'
];

创建控制器

新增文件 app/Http/Controllers/WeChat/WeChatServerController.php，代码如下：

<?php

namespace App\Http\Controllers\WeChat;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use EasyWeChat\Foundation\Application as WeChat;

class WeChatServerController extends Controller
{
    /**
     * 处理微信的请求消息
     * @return string
     */
    public function requestHandler(WeChat $weChat)
    {
        $weChat->server->setMessageHandler(function($message) {
            return "欢迎关注 {$message}!";
        });

        return $weChat->server->serve();
    }
}

验证

• 配置微信公众平台测试号
  • 接口配置信息
    • URL：域名/wechat
    • Token：自定义，要与 wechat.php 文件的 token 一致
  • JS 接口安全域名
    • 填写域名，例如 baidu.com ，不需要写 www 和 http[s]://
  • 测试号二维码
    • 添加测试用户

URL 和 Token 通过验证之后，关注微信公众平台测试号，并发送测试消息，成功的话。

目标

本文的目标是实现微信用户授权，当用户进入 Web App 的时候，能够获取用户的信息。

配置回调地址

微信公众平台 -> 开发者工具 -> 公众平台测试帐号 -> 测试号管理 -> 体验接口权限表 -> 功能服务 -> 网页帐号 -> 修改 -> 填写回调域名，格式如：www.baidu.com

修改配置文件

可以修改文件 config/wechat.php ，也可以在 .env 文件进行配置

wechat.php 文件配置

/*
 * OAuth 配置
 *
 * only_wechat_browser: 只在微信浏览器跳转
 * scopes：公众平台（snsapi_userinfo / snsapi_base），开放平台：snsapi_login
 * callback：OAuth 授权完成后的回调页地址（如果使用中间件，则随便填写。。。)
 */
 'oauth' => [
     'only_wechat_browser' => false,
     'scopes'   => array_map('trim', explode(',', env('WECHAT_OAUTH_SCOPES', 'snsapi_userinfo'))),
     'callback' => env('WECHAT_OAUTH_CALLBACK', '/examples/oauth_callback.php'),
 ],

.env 文件配置

WECHAT_APPID=****
WECHAT_SECRET=***
WECHAT_TOKEN=****
WECHAT_AES_KEY=

WECHAT_OAUTH_SCOPES=snsapi_userinfo
WECHAT_OAUTH_CALLBACK=/wechat/oauth-callback

新增路由

修改文件 app/Http/Routes/wechat.php，代码如下：

<?php
/* 处理微信发送消息 */
Route::any('/request-handler', 'WeChatServerController@requestHandler');

/* 处理微信授权回调 */
Route::any('/oauth-callback', 'WeChatServerController@oauthCallback');

/* 微信应用首页 */
Route::get('/', [
    'as' => 'wechat.index',
    'uses' => 'WeChatApplicationController@index',
    'middleware' => [],
]);

关闭路由 CSRF

修改文件 app/Http/Middleware/VerifyCSsrfToken.php，代码如下：

protected $except = [
    '/wechat/request-handler',
    '/wechat/oauth-callback'
];

获取授权

1.授权页面

新增文件 app/Http/Controllers/WeChat/WeChatApplicationController.php，代码如下：

<?php

namespace App\Http\Controllers\WeChat;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use EasyWeChat\Foundation\Application as WeChat;

class WeChatApplicationController extends Controller
{
    public function index(Request $request, WeChat $wechat)
    {
        // 如果 Session 中没有用户信息，则跳转至微信授权页面
        if (empty($request->session()->has('weChatUserInfo'))) {
            $oauth = $wechat->oauth;

            return $oauth->redirect();
        }
        $user = $request->session()->get('weChatUserInfo');
        dump($user);
    }
}

2.回调操作

修改文件 app/Http/Controllers/WeChat/WeChatServerController.php，代码如下：

<?php
/**
 * 微信用户授权回调
 * @param Request $request
 * @param WeChat $weChat
 * @return \Illuminate\Http\RedirectResponse
 */
public function oauthCallback(Request $request, WeChat $weChat)
{
    $oauth = $weChat->oauth;
    $user = $oauth->user();
    $request->session()->put('weChatUserInfo', $user->toArray());

    return redirect()->route('wechat.index');
}

3.访问首页

下载微信的 Web 开发者工具，在工具中访问授权首页，比如访问:你的域名/wechat,可以跳转至授权页。

目标

本文的目标是实现微信公众号菜单的创建与删除

创建路由

/* 微信菜单创建 */
Route::get('/create-menus', [
    'as' => 'wechat.create.menus',
    'uses' => 'WeChatServerController@createMenus',
]);

/* 微信菜单创建 */
Route::get('/destroy-menus', [
    'as' => 'wechat.destroy.menus',
    'uses' => 'WeChatServerController@destroyMenus',
]);

修改控制器

修改控制器 app/Http/Controllers/WeChat/WeChatServerController.php，新增代码如下：

/**
 * 创建新的微信菜单
 * @param WeChat $weChat
 * @return string
 */
public function createMenus(WeChat $weChat)
{
    $menu = $weChat->menu;
    $buttons = [
        [
            "type" => "view",
            "name" => "进入好答",
            "url" => route('wechat.index'),
        ],
        [
            "type" => "click",
            "name" => "听我唱歌",
            "key" => "K0001_LET_ME_SING_MY_SONG",
        ],
    ];

    $json = $menu->add($buttons);
    $result = json_decode($json, true);

    if ($result['errcode'] == 0 && $result['errmsg'] == 'ok') {
        echo "创建菜单成功";
    } else {
        echo "创建菜单失败";
    }
}

/**
 * 删除所有微信菜单
 * @param WeChat $weChat
 * @return string
 */
public function destroyMenus(WeChat $weChat)
{
    $result = $weChat->menu->destroy();

    if ($result['errcode'] == 0 && $result['errmsg'] == 'ok') {
        echo "删除菜单成功";
    } else {
        echo "删除菜单失败";
    }
}