目录
准备测试公众号 (已有公众号appid secret 且公众号已配置jsapi安全域名的此步骤可以忽略)
安装微信开发SDK - easywechat
根据php版本和安装中的因素 选择不同的easywechat版本 https://www.easywechat.com/docs/5.x/installation 文档地址，在这里我用5.0版本
composer require overtrue/wechat:~5.0 -vvv分享具体参照文档地址 easywechat-jssdk
准备测试公众号 (已有公众号appid secret 且公众号已配置jsapi安全域名的此步骤可以忽略)
- 登录测试微信公众号
- 修改接口配置信息
-
JS接口安全域名
注意：复制测试公众号的appid与secret 配置完测试公众号的必要参数，务必要将测试分享的微信关注第3步骤的测试公众号，否则分享无效果。
后端代码
-
<?php
-
-
namespace
app\
wx\
controller;
-
-
use
EasyWeChat\
Factory;
-
use
think\
Controller;
-
-
/**
-
* Thinkphp 5.1
-
* Class Index
-
* @package app\wx\controller
-
*/
-
class Index extends Controller
-
{
-
/**
-
* Notes: 初始化加载分享页面
-
* User: Jartin
-
* Url: /index.php/wx/index/index
-
*/
-
public
function index()
-
{
-
if (
$this->request->isAjax()) {
-
$jssdk =
$this->getJsapi();
-
return json([
-
'data' => $jssdk
-
]);
-
}
-
return view();
-
}
-
-
/**
-
* Notes: 获取分享必要参数
-
* User: Jartin
-
*/
-
private
function getJsapi()
-
{
-
-
$config = [
-
'app_id' =>
'公众号APPID',
-
'secret' =>
'公众号APPSECRET',
-
'token' =>
'公众号配置的参数token',
-
// 指定 API 调用返回结果的类型：array(default)/collection/object/raw/自定义类名
-
'response_type' =>
'array',
-
'log' => [
-
'level' =>
'debug',
-
'file' =>
__DIR__ .
'/../../wechat.log',
-
],
-
];
-
-
$app = Factory::officialAccount($config);
-
$menu =
array(
-
'updateAppMessageShareData',
-
'updateTimelineShareData',
-
'onMenuShareTimeline',
-
'onMenuShareAppMessage');
-
-
// 以下参数的具体释义参考文档 https://www.easywechat.com/docs/5.x/basic-services/jssdk
-
$jssdk = $app->jssdk->buildConfig($menu,
true,
false,
false);
-
return $jssdk;
-
}
-
-
/**
-
* Notes: 微信公众号配置开发域名token验证地址（已验证的忽略该方法）
-
* User: Jartin
-
*/
-
public
function wx_check()
-
{
-
$config = [
-
'app_id' =>
'公众号APPID',
-
'secret' =>
'公众号APPSECRET',
-
'token' =>
'公众号配置的参数token',
-
// 指定 API 调用返回结果的类型：array(default)/collection/object/raw/自定义类名
-
'response_type' =>
'array',
-
-
'log' => [
-
'level' =>
'debug',
-
'file' =>
__DIR__ .
'/../../wechat.log',
-
],
-
];
-
$app = Factory::officialAccount($config);
-
$response = $app->server->serve();
-
$response->send();
// Laravel 里请使用：return $response;
-
}
-
}
前端代码
-
<!doctype html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport"
-
content=
"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">
</script>
-
！！！！ ↓↓↓↓↓↓ 这个微信分享的js代码版本必须为 1.5.0 否则无效
-
<script src="http://res.wx.qq.com/open/js/jweixin-1.5.0.js">
</script>
-
<title>标题
</title>
-
</head>
-
<script>
-
$(
document).ready(
function () {
-
$.get(
'/wx/index/index',
'',
function (res) {
-
wx.config({
-
debug:
true,
// 开启调试模式,调用的所有api的返回值会在客户端alert出来。
-
appId: res.data.appId,
// 必填，公众号的唯一标识
-
timestamp: res.data.timestamp,
// 必填，生成签名的时间戳
-
nonceStr: res.data.nonceStr,
// 必填，生成签名的随机串
-
signature: res.data.signature,
-
jsApiList:[
'checkJsApi',
'updateAppMessageShareData',
'updateTimelineShareData']
-
});
-
})
-
wx.ready(
function () {
-
wx.updateAppMessageShareData({
-
title:
'标题',
-
desc:
'描述文字' ,
-
link:
'http://域名/wx/index/index',
-
imgUrl:
'https://www.imooc.com/static/img/index/logo2020.png' ,
-
success:
function () {
-
}
-
});
-
wx.updateTimelineShareData({
-
title:
'标题',
-
desc:
'描述文字' ,
-
link:
'http://域名/wx/index/index',
-
imgUrl:
'https://www.imooc.com/static/img/index/logo2020.png' ,
-
type:
'link',
-
dataUrl:
'',
-
success:
function () {
-
}
-
});
-
});
-
wx.error(
function (res) {
-
console.log(
"shareerror")
-
alert(res.errMsg);
-
});
-
})
-
</script>
-
<body>
-
</body>
-
</html>
-
No newline at end of file
成功！
可能会出现的问题
- 旧的前端微信分享sdkjs链接未替换为最新而导致的分享失败
- jsApiList列表中的行为不是微信最新分享的行为，要确保列表中有的 wx.方法都有
- js代码置后而导致的加载异常导致的分享失败
转载：https://blog.csdn.net/jartins/article/details/110918226
查看评论