Vue H5微信分享功能实现

微信网页开发/JS-SDK说明文档

概述

        微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

        通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

        JSSDK使用步骤可以详细查看说明文档

分享接口

        请注意，不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题

        请注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

1、首先请求接口，通过config接口注入权限验证配置

ps：接口封装

/**
 * SDK 可以在 index.html 引入 https://res.wx.qq.com/open/js/jweixin-1.6.0.js
 * 也可以下载下来本地引入JS 文件
 */
import wx from "@/utils/WeChat/jweixin-1.6.0";
/**
 * loadWeChatShare 是权限验证接口，需要根据自己的项目接口调整
 * export function loadWeChatShare(params) {
 *   return mGet("/mobile/wechat/share", params);
 * }
 */
import { loadWeChatShare } from "@/api/wechat";

/**
 * config 初始化
 * @param params {object} 其他参数
 * @param callback {function} 回调函数
 */
export function lWeChatConfig(params, callback) {
  loadWeChatShare({
    id: params.id,
    url: params.url || window.location.href.split("#")[0]
  }).then(res => {
    const { data } = res;

    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: data.appId, // 必填，公众号的唯一标识
      timestamp: data.timestamp, // 必填，生成签名的时间戳
      nonceStr: data.nonceStr, // 必填，生成签名的随机串
      signature: data.signature, // 必填，签名
      jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
    });

    wx.ready(() => {
      if (callback) callback();
    });

    wx.error(err => {
      console.error("config fail:", err);
    });
  });
}

2、使用 wx.config 注册分享功能

/**
 * 分享接口
 * @param params {Object} config 参数
 * @param data {Object} 分享参数
 * @param callback {Function} 回调函数
 */
export function lWeChatShare(params, data, callback) {
  lWeChatConfig(params, () => {
    console.log("分享标题", data.title);
    console.log("分享描述", data.desc);
    console.log("分享链接", data.link);
    console.log("分享图标", data.imgUrl);

    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    wx.updateAppMessageShareData({
      title: data.title, // 分享标题
      desc: data.desc, // 分享描述
      link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: data.imgUrl, // 分享图标
      success: function() {
        callback();
      }
    });

    // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    wx.updateTimelineShareData({
      title: data.title, // 分享标题
      link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: data.imgUrl, // 分享图标
      success: function() {
        callback();
      }
    });
  });
}

3、在页面中调用分享

import { lWeChatShare } from "@/utils/WeChat/jwx";


// 标题、描述、链接、图片地址根据自己的项目调整
lWeChatShare({
  id: this.id
}, {
  title: "微信分享标题",
  desc: "这是微信分享描述",
  link: "https://test.wechat.com?id=1",
  imgUrl: "https://avatar.csdnimg.cn/A/7/A/1_qq_34707272_1577265439.jpg"
},() => {
  console.log("详情页面分享成功");
});

 附：jwx 源码