微信公众号开发
2020-03-23 本文已影响0人
诺之林
目录
测试账号
-
开发者工具 => 公众平台测试账号
-
测试号管理 => 测试号信息 => appID & appsecret
appID=wx641a9fcc89526bad
appsecret=***
image.png
内网穿透
-
购买隧道 => 获取authtoken
-
下载https://natapp.cn/#download => 启动客户端
chmod +x natapp
mv natapp /usr/local/bin
natapp -authtoken=***
Powered By NATAPP Please visit https://natapp.cn (Ctrl+C to Quit)
Tunnel Status Online
Version 2.3.9
Forwarding http://yl33643.nat300.top -> 127.0.0.1:8000
Web Interface http://127.0.0.1:4040
Total Connections 0
购买付费隧道的域名是固定的 便于开发调试
接口配置
校验接口
composer create-project laravel/laravel wechat-demo --prefer-dist "5.5.*"
cd wechat-demo
composer require "overtrue/laravel-wechat:~4.0"
php artisan vendor:publish --provider="Overtrue\LaravelWeChat\ServiceProvider"
vim .env
# WECHAT_OFFICIAL_ACCOUNT_APPID=wx641a9fcc89526bad
# WECHAT_OFFICIAL_ACCOUNT_SECRET=***
# WECHAT_OFFICIAL_ACCOUNT_TOKEN=a-token
vim routes/web.php
<?php
Route::prefix('official-account')->group(function () {
Route::get('verify', 'OfficialAccountController@verify');
});
vim app/Http/Controllers/OfficialAccountController.php
<?php
namespace App\Http\Controllers;
class OfficialAccountController
{
public function verify()
{
$app = app('wechat.official_account');
return $app->server->serve();
}
}
php artisan serve
代码逻辑参考微信文档消息接口使用指南
配置接口
-
开发者工具 => 公众平台测试账号
-
测试号管理 => 接口配置信息 => URL & Token
URL => http://yl33643.nat300.top/official-account/verify
Token => a-token
image.png
JSSDK
安全域名
-
开发者工具 => 公众平台测试账号
-
测试号管理 => JS接口安全域名 => 域名 (yl33643.nat300.top)
image.png
注意上述域名需要去除HTTP或HTTPS前缀
测试页面
vim resources/views/index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a id="result">日志</a>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.get("/official-account/config", { url: location.href }, function (data) {
wx.config(JSON.parse(data))
wx.ready(() => {
$('#result').text('wx.ready')
wx.onMenuShareAppMessage({
link: `${location.href}?hello=world`,
success: function () {
$('#result').text(`${location.href}?hello=world`)
}
});
})
})
})
</script>
</body>
</html>
vim routes/web.php
<?php
Route::prefix('official-account')->group(function () {
Route::get('verify', 'OfficialAccountController@verify');
Route::get('index', 'OfficialAccountController@index');
Route::get('config', 'OfficialAccountController@config');
});
vim app/Http/Controllers/OfficialAccountController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class OfficialAccountController
{
public function index() {
return view('index');
}
public function config(Request $request) {
$url = $request->get('url');
$apis = [
'onMenuShareAppMessage'
];
$app = app('wechat.official_account');
$app->jssdk->setUrl($url);
return $app->jssdk->buildConfig($apis, app()->isLocal());
}
}
php artisan serve
代码逻辑参考微信文档微信JSSDK开发文档
开发调试
-
安装微信开发者工具
-
公众号网页项目 => 公众号网页 => 输入域名
http://yl33643.nat300.top/official-account/index
image.png
网页授权
回调域名
-
开发者工具 => 公众平台测试账号
-
测试号管理 => 网页授权获取用户基本信息 => 修改 (yl33643.nat300.top)
image.png
测试页面
vim app/Http/Kernel.php
<?php
namespace App\Http;
use Illuminate\Foundation\Http\Kernel as HttpKernel;
class Kernel extends HttpKernel
{
protected $routeMiddleware = [
'auth' => \Illuminate\Auth\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'wechat.oauth' => \Overtrue\LaravelWeChat\Middleware\OAuthAuthenticate::class,
];
}
vim routes/web.php
<?php
Route::prefix('official-account')->group(function () {
Route::get('verify', 'OfficialAccountController@verify');
Route::get('index', 'OfficialAccountController@index');
Route::get('config', 'OfficialAccountController@config');
Route::get('user', 'OfficialAccountController@user')->middleware('wechat.oauth');
});
vim app/Http/Controllers/OfficialAccountController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class OfficialAccountController
{
public function user() {
$user = session('wechat.oauth_user.default');
return view('user', ['openid' => $user->getId()]);
}
}
vim resources/views/user.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>{{ $openid }}</p>
</body>
</html>
php artisan serve
代码逻辑参考微信文档网页授权获取用户基本信息
开发调试
-
打开微信开发者工具
-
公众号网页项目 => 公众号网页 => 输入域名
http://yl33643.nat300.top/official-account/user
- 点击授权 => 获取微信用户信息(OpenID)如下
image.png
上述微信用户信息与"测试号管理"中的信息一致
image.png
