Vue 单页应用中中引入微信 JS-SDK，实现微信分享

引入微信 JS-SDK

使用 npm 安装

npm install weixin-js-sdk

使用方法

main.js 中

import wx from 'weixin-js-sdk'
Vue.prototype.$share = (title = '', imgUrl = 'https://img.vhiphop.top/web/logo-icon.jpg') => {
  title = `${title ? title + '-' : ''}Vhiphop 唯舞`;
  document.title = title;
  const link = window.location.href;
  api.post('sign/wx', {link}).then(e => {
    wx.config({
      debug: false, // 关闭调试模式
      appId: e.appId, // 必填，公众号的唯一标识
      timestamp: e.timestamp, // 必填，生成签名的时间戳
      nonceStr: e.nonceStr, // 必填，生成签名的随机串
      signature: e.signature,// 必填，签名
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData',
      ] // 必填，需要使用的JS接口列表
    });
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
      wx.updateAppMessageShareData({
        title, // 分享标题
        desc: '更多精彩，尽在 Vhiphop 唯舞。', // 分享描述
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        success: function () {
          // 设置成功
        }
      });
      wx.updateTimelineShareData({
        title, // 分享标题
        link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl, // 分享图标
        success: function () {
          // 设置成功
        }
      });
    });
  }, e => console.log(e));
};

如上，在 Vue 原型上声明 $share 方法，该方法接受 2 个参数：

title：将要分享出去的标题
imgUrl：将要分享出去的封面图片 URL

每次调用 $share 方法都会重新设置页面的 title，并且请求服务端接口，获取微信分享需要的配置参数。

服务端生成配置参数

服务端需要返回的配置参数包含以下 4 个参数：

apppId：公众号的唯一标识
timestamp：生成签名的时间戳
nonceStr：生成签名的随机字符串
signature：签名

PHP 示例：

// get请求
protected static function get($url)
{
    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);// 设置是否将响应结果存入变量  1 : 存入 0 : 直接echo
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);// 设置禁止证书校验 否则https地址无法访问
    curl_setopt($ch, CURLOPT_TIMEOUT, 20);// 设置最大响应时间
    $res = curl_exec($ch);// 存入变量
    curl_close($ch);
    return $res;
}

// 生成微信配置参数
public function wxSign(Request $r)
{
    $url = $r->get('link');
    !$url && self::error('分享URL不能为空');

    $appId = 'wx25********';// 你的appId
    if (!$ticket = Rds::get('web:ticket')) {// 直接从redis中读取
        $appSecret = 'b5a7************';// 你的appSecret

        $res = self::get("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appId}&secret={$appSecret}");
        $res = json_decode($res, true);

        !isset($res['access_token']) && self::error('access_token获取失败, 请重新尝试');
        $access_token = $res['access_token'];

        $res = self::get("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi");
        $res = json_decode($res, true);
        !isset($res['errcode']) && self::error('ticket请求失败');
        $res['errcode'] !== 0 && self::error("ticket获取失败, 请重新尝试, 错误码: {$res['errcode']}");
        $ticket = $res['ticket'];
        Rds::setex('web:ticket', 7000, $ticket);// ticket过期时间为7200秒, 设置redis过期时间7000秒即可
    }

    $nonceStr = substr(str_shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz'), mt_rand(0, 46), 16);
    $time = time();

    self::go([
        'appId' => $appId,
        'timestamp' => $time,
        'nonceStr' => $nonceStr,
        'signature' => sha1("jsapi_ticket={$ticket}&noncestr={$nonceStr}&timestamp={$time}&url={$url}")
    ]);
}

如上，在 wxSign 方法中返回了 4 个需要的参数，前端请求该接口获取参数即可。

在组件中调用

原则：URL 每次发生变化，就需要重新调用一次 $share 方法，刷新微信分享的 URL，避免路由发生改变后分享出去的依然是第一次进入的 URL。

示例：

beforeRouteUpdate(to, from, next) {// 如果使用了该钩子, 则在 next() 后调用 $share
    const {sort} = to.query;

    this.api.get('video', {sort: +sort || 0}).then(e => this.videos = e, this.err);
    next();
    this.$share('视频');// 标题, 封面都可以自定义
},
async beforeMount() {// 初次进入组件, 正常请求完毕后再调用 $share
    const {api, sort} = this;

    await Promise.all([
        api.get('home/sort').then(e => this.sorts = e),
        api.get('video', {sort}).then(e => this.videos = e),
    ]).catch(this.err);

    this.isLoading = false;
    this.$share('视频');// 标题, 封面都可以自定义
},

如上，第一次进入路由，在 beforeMount 中正常请求业务数据完毕后，再调用 $share 方法。

如果路由发生改变，并且复用该组件，则在 beforeRouteUpdate 钩子中正常请求业务数据后，重新调用 $share 方法。

完成后的效果：