目录
安装微信开发SDK - easywechat
准备测试公众号 (已有公众号appid secret 且公众号已配置jsapi安全域名的此步骤可以忽略)
后端代码
前端代码
可能会出现的问题
安装微信开发SDK - easywechat
根据php版本和安装中的因素 选择不同的easywechat版本/docs/5.x/installation文档地址,在这里我用5.0版本
composer require overtrue/wechat:~5.0 -vvv
分享具体参照文档地址 easywechat-jssdk
准备测试公众号 (已有公众号appid secret 且公众号已配置jsapi安全域名的此步骤可以忽略)
登录测试微信公众号修改接口配置信息JS接口安全域名
注意:复制测试公众号的appid与secret 配置完测试公众号的必要参数,务必要将测试分享的微信关注第3步骤的测试公众号,否则分享无效果。
后端代码
<?phpnamespace 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');// 以下参数的具体释义参考文档 /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="/ajax/libs/jquery/3.5.1/jquery.js"></script>!!!! ↓↓↓↓↓↓ 这个微信分享的js代码版本必须为 1.5.0 否则无效<script src="http://res./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:'/static/img/index/logo.png' ,success: function () {}});wx.updateTimelineShareData({title: '标题',desc: '描述文字' ,link: 'http://域名/wx/index/index',imgUrl:'/static/img/index/logo.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
成功!