1、微信后台配置
设置与开发/ 公众号设置 / 功能设置 / JS接口安全域名 (配置网页所用的域名, 【需通过备案】) 基本配置 / IP白名单 (将服务器公网ip配置到此处)
2、后端代码
PHP版 参照官网给出的示例，稍作改造
PHP版本 7.1
目录结构：
./ JSSDK.php 微信分享必要参数获取基本接口 JSSDKCache.php 通过继承，实现对access_token、jsapi_ticket数据的缓存 RedisService.php Redis缓存服务 WeixinService.php 配置具体的微信参数，调用JSSDKCache.php WeixinController.php 对外提供数据接口
用到的第三方库
# 网络请求 composer require rmccue/requests # Redis客户端 composer require predis/predis
JSSDK.php
<?php namespace app\utils\weixin; use Requests; /** * 微信分享必要参数获取基本接口 * * Class JSSDK * @package app\utils\weixin */ class JSSDK { // 开发者ID protected $appId; // 开发者密码(AppSecret) protected $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret; } public function getSignPackage($jsapi_ticket, $url) { $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapi_ticket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; } private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } /** * 获取 Access token * https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html */ public function getAccessToken() { $params = [ 'grant_type' => 'client_credential', 'appid' => $this->appId, 'secret' => $this->appSecret ]; $url = "https://api.weixin.qq.com/cgi-bin/token?" . http_build_query($params); $data = self::httpGet($url); if ($data) { return empty($data['access_token']) ? null : $data['access_token']; } else { return null; } } /** * 获取 jsapi_ticket * https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 */ public function getJsapiTicket($access_token) { $params = [ 'access_token' => $access_token, 'type' => 'jsapi', ]; $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?" . http_build_query($params); $data = self::httpGet($url); if ($data) { return empty($data['ticket']) ? null : $data['ticket']; } else { return null; } } private function httpGet($url) { $response = Requests::get($url); if ($response->success) { return json_decode($response->body, true); } else { return null; } } }
JSSDKCache.php
<?php namespace app\utils\weixin; use app\service\RedisService; /** * 自定义实现缓存： access_token、jsapi_ticket * * Class JSSDKCache * @package app\utils\weixin */ class JSSDKCache extends JSSDK { public function getSignData($url) { $jsapi_ticket = $this->getJsapiTicketFromCache(); $data = $this->getSignPackage($jsapi_ticket, $url); return $data; } public function getAccessTokenFromCache() { $cache_key = 'access_token.' . $this->appId; $access_token = RedisService::get($cache_key); if (!$access_token) { // 获取access_token $access_token = $this->getAccessToken(); // 7200 RedisService::set($cache_key, $access_token, 7100); } return $access_token; } public function getJsapiTicketFromCache() { $cache_key = 'jsapi_ticket.' . $this->appId; $jsapi_ticket = RedisService::get($cache_key); if (!$jsapi_ticket) { // 获取access_token $access_token = $this->getAccessTokenFromCache(); $jsapi_ticket = parent::getJsapiTicket($access_token); // 7200 RedisService::set($cache_key, $jsapi_ticket, 7100); } return $jsapi_ticket; } }
<?php namespace app\service; use Predis\Client; /** * 使用Redis 缓存 * * Class RedisService * @package app\service */ class RedisService { // 可能有多个网站，每个网站给一个前缀 private static $prefix = 'www'; public static function getClient() { $client = new Client(); return $client; } public static function getKey($key) { return self::$prefix . '.' . $key; } public static function get($key) { $client = self::getClient(); $key = self::getKey($key); return $client->get($key); } public static function set($key, $value, $expire = null) { //https://learnku.com/laravel/t/3563/using-predis-to-operate-the-redis-database-how-to-set-the-key-life-cycle-expires $client = self::getClient(); $key = self::getKey($key); if ($expire) { // SET key value [EX seconds] [PX milliseconds] [NX|XX] $client->set($key, $value, 'EX', $expire); } else { $client->set($key, $value); } } }
WeixinService.php
<?php namespace app\service; use app\utils\weixin\JSSDKCache; class WeixinService { // 公众号 开发者ID private static $APP_ID = ''; // 开发者密码(AppSecret) private static $APP_SECRET = ''; public static function getWeixinConfig($url) { $jssdk = new JSSDKCache(self::$APP_ID, self::$APP_SECRET); return $jssdk->getSignData($url); } }
WeixinController.php
<?php namespace app\api\controller; use app\BaseController; use app\service\WeixinService; class WeixinController extends BaseController { public function getWeixinConfig() { $url = input('url'); return WeixinService::getWeixinConfig($url); } }
3、前端代码weixin-share.html
方式一：后端渲染
<!--微信分享--> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> wx.config({ debug: false, // 开启调试模式 appId: '{$appId}', // 必填，公众号的唯一标识 timestamp: '{$timestamp}', // 必填，生成签名的时间戳 nonceStr: '{$nonceStr}', // 必填，生成签名的随机串 signature: '{$signature}',// 必填，签名 // 必填，需要使用的JS接口列表 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 可选，获取开放标签权限 openTagList: ['wx-open-launch-app'] }); // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '{$title}', // 分享标题 desc: '{$summary}', // 分享描述 link: '{$url}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "{$cover_icon}", // 分享图标 success: function () { // 设置成功 } }); // 分享到朋友圈 wx.updateTimelineShareData({ title: '{$title}', // 分享标题 link: '{$url}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: "{$cover_icon}", // 分享图标 success: function () { // 设置成功 } }) }); wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log("config验证失败") }); </script>
方式二：前端通过接口获取
<!-- Axios --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!--微信分享--> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> url = window.location.href.split('#')[0]; axios.post('/api/getWeixinConfig', {url: url}).then(res=>{ let data = res.data.data; wx.config({ debug: false, // 开启调试模式 appId: data.appId, // 必填，公众号的唯一标识 timestamp: data.timestamp, // 必填，生成签名的时间戳 nonceStr: data.nonceStr, // 必填，生成签名的随机串 signature: data.signature,// 必填，签名 // 必填，需要使用的JS接口列表 jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 可选，获取开放标签权限 // openTagList: ['wx-open-launch-app'] }); // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容 wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '{{ detail.title }}', // 分享标题 desc: '{{ detail.summary }}', // 分享描述 link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '{{ detail.head_image }}', // 分享图标 success: function () { // 设置成功 } }); // 分享到朋友圈 wx.updateTimelineShareData({ title: '{{ detail.title }}', // 分享标题 link: data.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '{{ detail.head_image }}', // 分享图标 success: function () { // 设置成功 } }) }); wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 console.log("config验证失败") }); }) </script>
