准备工作

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;
}
// 获取token
function getToken () {
 $appid = 'wx************';;
 $appsecret = '************';
 return curl_get_contents('
}
// 获取ticket
function getTicket ($token) {
 return curl_get_contents('
}
// 生成无序字符串
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 gen config  () {
// 获取 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 分享到QQ
• wx.onMenuShareWeibo 分享到腾讯微博
• wx.onMenuShareQZone 分享到QQ空间

位置相关:

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

其他常用:

• wx.chooseWXPay 支付
• wx.scanQRCode 扫一扫

注意事项

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

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

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

结束语

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