准备工作

1. 配置微信公众平台域名白名单

2. 前端引入JSSDK

PHP服务器端配置

使用PHP脚本获取token及签名的代码如下：

<?php// curl获取数据function curl_get_contents($url, $timeout = 8){ $curlHandle = curl_init(); curl_setopt($curlHandle, CURLOPT_URL, $url); curl_setopt($curlHandle, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curlHandle, CURLOPT_TIMEOUT, $timeout); $result = curl_exec($curlHandle); curl_close($curlHandle); return $result;}// 获取tokenfunction getToken () { $appid = 'wx************';; $appsecret = '************'; return curl_get_contents(';appid='.$appid.'&secret='.$appsecret);}// 获取ticketfunction getTicket ($token) { return curl_get_contents(''.$token.'&type=jsapi');}// 生成无序字符串function genNonceStr ($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str;}// 生成配置function genConfig () {// 获取 access_token $access_token = json_decode(getToken(), true)['access_token']; // 获取 ticket $ticket = json_decode(getTicket($access_token), true)['ticket']; // 生成签名 $nonstr = genNonceStr(); $url = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : ''; $time = time(); $query = [ 'jsapi_ticket' => $ticket, 'noncestr' => $nonstr, 'timestamp' => $time, 'url' => $url ]; $signStr = "jsapi_ticket=$ticket&noncestr=$nonstr&timestamp=$time&url=$url"; $signature = sha1($signStr); $appid = 'wx************'; return json_encode([ 'code' => 1, 'data' => [ 'query' => $query, 'signStr' => $signStr, 'appId' => $appid, 'timestamp' => $time, 'nonceStr' => $nonstr, 'signature' => $signature, 'url' => $url ] ]);}echo genConfig();

获取签名的方法：先获取ticket，然后使用ticket换取token，最后使用获取到的token计算出签名（signature）。

客户端配置

1. 获取服务器端签名

2. 配置wx.config参数

3. 配置权限列表

weixinInit () { const time = new Date().getTime() axiosBase.get(`/wechat/genConfig?t=${time}`).then(function (response) { if (response.data.code !== 1) { return } let parm = response.data.data wx.config({ debug: false, appId: parm.appId, timestamp: parm.timestamp, nonceStr: parm.nonceStr, signature: parm.signature, jsApiList: [ 'getLocation', 'checkJsApi', 'chooseWXPay', 'closeWindow', 'openLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'hideMenuItems', 'scanQRCode' ] }) })}// 封装微信各种分享weixinShare (title, link, imgUrl, desc) { this.weixinInit() wx.ready(() => { wx.hideMenuItems({ menuList: [ 'menuItem:copyUrl', 'menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email', 'menuItem:share:brand' ] }) // 分享到朋友圈 wx.onMenuShareTimeline({ title: title, // 分享标题 link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 success: function () {}, cancel: function () {} }) // 分享给朋友 wx.onMenuShareAppMessage({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 type: '', // 分享类型,music、video或link，不填默认为link dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 success: function () {}, cancel: function () {} }) // 分享到QQ wx.onMenuShareQQ({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function () {}, cancel: function () {} }) // 分享到腾讯微博 wx.onMenuShareWeibo({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function () {}, cancel: function () {} }) // 分享到QQ空间 wx.onMenuShareQZone({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 imgUrl: imgUrl, // 分享图标 success: function () {}, cancel: function () {} }) })}

菜单相关:

wx.hideMenuItems 隐藏菜单项wx.showMenuItems 显示菜单项

分享相关:

wx.onMenuShareTimeline 分享到朋友圈wx.onMenuShareAppMessage 分享给朋友wx.onMenuShareQQ 分享到QQwx.onMenuShareWeibo 分享到腾讯微博wx.onMenuShareQZone 分享到QQ空间

位置相关:

wx.openLocation 使用微信内置地图查看位置接口wx.getLocation 获取地理位置接口

其他常用:

wx.chooseWXPay 支付wx.scanQRCode 扫一扫注意事项

关于iOS单页应用分享失败的解决

在iOS中使用JSSDK的时候，使用单页应用的方式开发，会发现微信只认入口页面的配置，如果路由改变，复制链接，仍然还是入口页面路径，因此导致微信分享等等功能也无效，分享出去的配置仍然还是入口页面配置的分享参数。

要解决此问题，必须在每次使用微信接口之前都重新初始化微信JSSDK。

结束语

更新有点晚, 这篇文章是我以前博客里面的一篇文章, 主要是微信JSSDK的一些使用记录, 至于前面的Docker系列文章实战部分将隔段时间再继续发表, 一次性发完也不是那么容易消化, 敬请期待。