引入微信 JS-SDK 后，我们的网站也会拥有和对应绑定公众号的全部权限，比如现在很流行的网页分享到微信好友或者朋友圈时，除了公众号会自己带上小 LOGO 和标题外，其它的外链页面都是一个灰色链接图标和一长串 url，通过接入 JS-SDK 后，我们可以让分享的链接带上我们自定义的小图标以及文章标题。

工具

IDE
微信开发者工具（调试模拟微信打开网页）
任意后端服务（我以 PHP 举例，Laravel 框架）

准备工作

AppID，AppSecret，IP白名单，绑定安全域名

微信公众平台后台登录后，在公众号开发信息内获取。

其中IP白名单内，需要填入你的后端服务器真实公网 IP 地址，这是为了接口调用安全考虑，除了白名单之外的终端，都没有权限调用接口。

绑定安全域名也是在此操作，具体是在设置-公众号设置-功能设置-JS接口安全域名中填入，填入规则请只保留你的域名，如 famio.cn，不需要 http/https 协议头和末尾的任何参数。

后端配置

在服务端，我们根据微信官方接口文档提示，需要进行三个前置数据的获取工作，分别是access_token，随机字符串nonce以及jsapi_ticket。

access_token 获取

请求接口地址

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET

将之前准备好的AppID和AppSecret的值，代替掉上述请求接口地址中的APPID和SECRET。

请求方式

GET

返回结果

如果返回的结果（Json Object）中包含access_token字段，则表示请求成功，我们取它对应的值即可。

如果没有，则说明请求失败，会返回errMessage字段的错误信息，具体返回体说明可参照官方微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

随机字符串 nonce 获取

这个很简单，从a-z，A-Z和0-9之间取随机数，拼成一个长度为 16 的随机字符串。

/**
     * 生成nonce
     * @param int $length
     * @return string
     */
    static function createNonceString($length = 16)
    {
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $string = "";
        for ($i = 0; $i < $length; $i++) {
            $string .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }
        return $string;
    }

jsapi_ticket 获取

前提条件：获取到了access_token。

请求接口地址

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$ACCESS_TOKEN&type=jsapi

将之前获取的access_token的值，代替掉上述请求接口地址中的ACCESS_TOKEN。

请求方式

POST

返回结果

如果返回的结果（Json Object）中包含ticket字段，则表示请求成功，我们取它对应的值即可。

如果没有，则说明请求失败，会返回errMessage字段的错误信息。

jsapi_ticket有请求频次限制，每次请求到的jsapi_ticket都可以在一定的生命周期内被重复使用，官方默认有效时间为7200秒，因此，强烈建议将jsapi_ticket的值存放到缓存中，并赋予7200秒的 TTL，取值前优先从缓存中获取，如果缓存中没有值，则请求接口获取jsapi_ticket，并将其值存放进缓存供下次调用。

构造签名请求控制器&路由

当我们获取到了以上三个参数后，我们需要构造签名控制器和路由了，假设：
/api/wechat/mp/sign通过GET绑定到了WeChatController控制器的getSignPackage方法。

在getSignPackage方法中，我们首先要获取接入JS-SDK站点的当前url，这个可以通过传入参数。其次结合之前的工作，得到以下这些参数：

$appid //对应之前取得的AppID
$ticket //对应之前取得的jsapi_ticket
$nonceStr //对应之前取得的nonce
$timestamp //直接通过time()全局方法获取

然后将以上参数通过字符串拼接的方式，形成以下一个字符串：

$string = "jsapi_ticket=$ticket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

接着，将这个$string通过sha1签名：

$signature = sha1($string);

最后，我们构建并返回这样一个数组：

$signPackage = array(
            "appId" => $appid,
            "nonceStr" => $nonceStr,
            "timestamp" => $timestamp,
            "url" => $url,
            "signature" => $signature,
            "rawString" => $string,
            "ticket" => $ticket,
        );

将上述数组以 Json Object 形式返回，此控制器就完成了。

前端

以最传统的原生JavaScript为例，因为只要掌握了原生处理的办法，针对其他前端框架，也是很容易就理解了。

引用 JS 库

在你的网站中引入以下 JS 文件：

https://res.wx.qq.com/open/js/jweixin-1.6.0.js

接入

然后在需要分享的页面上构建以下JavaScript代码：

$.ajax({
  type: "get",
  url: "这里填你之前写的后端签名控制器对应的路由?url=" + window.location.href,
  success: function (res, textStatus, request) {
    //初始化配置
    wx.config({
      // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      debug: false,
      // 必填，公众号的唯一标识
      appId: res.data.appId,
      // 必填，生成签名的时间戳
      timestamp: res.data.timestamp,
      // 必填，生成签名的随机串
      nonceStr: res.data.nonceStr,
      // 必填，签名
      signature: res.data.signature,
      // 必填，需要使用的JS接口列表
      jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"],
    });
    //这里写你自己的逻辑执行代码，比如你要写分享到朋友圈或者发送给好友的时候，链接带上小图和标题说明文字，那么就在这里写上以下代码

    //需在用户可能点击分享按钮前就先调用
    wx.ready(function () {
      //分享到朋友圈
      wx.onMenuShareTimeline({
        // 分享标题，可以指定，也可以像我一样动态获取当前页面标题
        title: document.title,
        // 分享描述
        desc: "时刻保持冷静，沸腾只会更快蒸发",
        // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        link: window.location.href,
        // 分享图标，图标地址可以是相对路径或者是绝对路径，格式为图片文件
        imgUrl: "",
        success: function () {
          // 设置成功
        },
      });
      //分享给好友（发送消息）
      wx.onMenuShareAppMessage({
        title: "",
        desc: "",
        link: window.location.href,
        imgUrl: "",
        success: function () {
          // 设置成功
        },
      });
    });
  },
  error: function (res) {
    console.log;
  },
});

到这里，JS-SDK引入完成，并且你的网站也拥有了公众号的全部权限。

坑

如果在wx.onMenuShareTimeline这样的接口方法中写死link的值，务必保证这样的格式https://famio.cn/，而不是https://famio.cn，最后一个/是需要保留的，这样微小的差异会给签名时的sha1结果带来翻天覆地的改变，结果自然会是错误的。
wx.onMenuShareTimeline这样的接口方法已经即将被废弃，具体参考官方微信开发文档描述。
看仔细noncestr和nonceStr的字段名。
timestamp是一个10位长度的数字，必须是10位。
我想到了再补充