安装

 npm install weixin-js-sdk --save

引入

一般我会在src/common/js目录下新建weixinSDK.js(可凭个人习惯自行创建到相应位置)。weixinSDK.js用来封装我们的分享接口。

import {httpGet} from 'api/api' // 引入axios的http请求
import address from '../../api/apiAdd.js' // 引入请求的url路径
import wx from 'weixin-js-sdk' // 引入微信SDK
import {commFunc} from "./util";引入工具函数

权限验证

接入微信接口的最主要也是最重要一步步就是填写下面这些信息，填完这些信息之后，基本就好了。

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

上面这些信息通常是通过后端接口来获取的，向后端请求数据的方法如下。

注意address.weChatSignCheck是封装在apiAdd.js中的url, httpGet是api.js中的axios封装。

/**
 * @param {param} 页面传过来的数据
 */
function sign(param) {
  var pageUrl = window.location.href
  httpGet(address.weChatSignCheck + '?pageUrl=' +pageUrl).then((res) => {
  param.downloadUrl = res.data.downloadUrl
  initAPIs(res.data,param)
  })
}

这里要注意的就是url的问题，如果url没有正确传递，后端也会返回信息，但是签名信息会是错误的。完整url指的是：’http(s)://‘部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。可以通过location.href来获取。

注意： 如果你的vue项目，路由没有开启history模式,也就是你的url上面包含“#”，这个时候要从后端正确获取签名，就需要去掉url上#后面的字符。（url去掉’#'hash部分，可用location.href.split('#')[0]）

处理验证结果

这里通过ready接口处理成功验证。当然error接口是处理失败验证，这里可以不做处理，因为我在配置时候将debug设为false。

/**
 * @param {data} 后端返回的基本配置数据
 * @param {param} 页面传过来的数据
 */
function initAPIs(data,param) {
... 
 wx.ready(function () {
   if (commFunc.isNotEmpty(param.callback)) {
    share(param.callback)
   }
  })
}

上面代码中commFunc.isNotEmpty()方法主要用来判断前台页面参数param.callback是否为空，如果部位空，则将参数传进使用share()方法封装的分享模板中。

判断指定JS接口

checkJsApi接口是客户端6.0.2新引入的一个预留接口，主要同来判断当前客户端版本是否支持指定JS接口。

/**
 * @param {data} 后端返回的基本配置数据
 * @param {param} 页面传过来的数据
 */
function initAPIs(data,param) {
... 
wx.checkJsApi({
    jsApiList:param.APIs,
    success: function (res) {
      return res
    }
  })
}

分享内容封装

将要分享的内容分装成tempParam对象，然后传入分享方法里。

/**
 * @param {param} 页面传过来的数据
 */
export function share(param) {
  var title = param.title
  var imgUrl = param.imgUrl
  var description =param.description
  var url=param.url
  var successMethod = param.successMethod
  var tempParam = {
    'title': title, // 分享标题
    'desc': description, // 分享描述
    'link': url, // 分享链接
    'imgUrl': imgUrl, // 分享图标
    success: successMethod // 设置成功信息
  };

分享方法调用
根据要分享到具体哪里，调用不同的方法。

//分享给朋友
wx.onMenuShareAppMessage(tempParam);
//分享给朋友圈
wx.onMenuShareTimeline(tempParam);

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

//分享给朋友
wx.updateAppMessageShareData(tempParam);
//分享给朋友圈
wx.updateTimelineShareData(tempParam);

具体使用方法

/**
 * @param {param} 页面传过来的数据
 */
export function init(param) {
  if (!param) {
    return
  }
  sign(param)
}

这里使用init方法给页面调用分享功能。

页面调用方法

<template>
    ...
</template>
<script>
import { init } from 'common/js/weiXinSDK'
import wx from 'weixin-js-sdk'
let origin = window.location.origin
export default {
    mode: 'history',
    data() {
      return {
        imgUrl: '../../common/image/axa-logo.png'
      }
    },
    created() {
      init({
        APIs: ['hideOptionMenu', 'hideAllNonBaseMenuItem', 'showMenuItems', 'hideMenuItems', 'onMenuShareTimeline', 'onMenuShareAppMessage'],
        callback: {
          'title': '微信分享',
          'imgUrl': this.imgUrl,
          'description': '分享',
          'url': origin + '/#/produtList?isShare=1&openId=' + this.$store.state.openId,
          successMethod: ''
        }
      })
<script>

上面代码APIs根据自己的实际场景自行配置。

分享接口基本完成，分享接口的完整代码

weixinSDK.js完整代码：

history模式

import {httpGet} from 'api/api'
import address from '../../api/apiAdd.js'
import wx from 'weixin-js-sdk'
import {commFunc} from "./util";

// 分享内容填充和调用分享方法
export function share(param) {
  var title = param.title
  var imgUrl = param.imgUrl
  var description =param.description
  var url=param.url
  var successMethod = param.successMethod
  var tempParam = {
    'title': title,
    'desc': description,
    'link': url,
    'imgUrl': imgUrl,
    success: successMethod
  };
  //分享给朋友
  wx.onMenuShareAppMessage(tempParam);
  //分享给朋友圈
  wx.onMenuShareTimeline(tempParam);
}

// 页面调用分享功能的方法
export function init(param) {
  if (!param) {
    return
  }
  sign(param)
}

// 向后端请求权限验证配置的基本数据
function sign(param) {
  var pageUrl = window.location.href
  httpGet(address.weChatSignCheck + '?pageUrl=' +pageUrl).then((res) => {
  param.downloadUrl = res.data.downloadUrl
  initAPIs(res.data,param)
  })
}
// 权限验证数据填充
function initAPIs(data,param) {
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: data.appId,
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: param.APIs
  })
  // 验证成功后执行的方法
  wx.ready(function () {
   if (commFunc.isNotEmpty(param.callback)) {
     console.log(param.callback)
    share(param.callback)
   }
  })
  // 判断客户端是否支持指定js的接口
  wx.checkJsApi({
    jsApiList:param.APIs,
    success: function (res) {
      return res
    }
  })
}

vue使用hash模式 location.href.split('#')[0]

/**
 * 微信js-sdk
 * 参考文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
 */
import wx from 'weixin-js-sdk'
import * as api from '@/api/index'
import util from './index'
const shareUtil = {
  /**
   * [wxRegister 微信Api初始化]
   */
  getQueryVariable (variable) {
    var query = window.location.href.split('&');
    for (var i = 0; i < query.length; i++) {
      var pair = query[i].split('=')
      if (pair[0] === variable) return pair[1]
    }
    return (false);
  },
  /**
   * 微信分享
   * @param {Object} shareData 微信分享数据
   * @param {Boolean} isNotShare 是否开发分享 ---- 流量协同平台
   */
  async wxRegister (shareData, isNotShare) {
    //vue使用hash模式 location.href.split('#')[0]
    let href = window.location.href.split('#')[0]
    let h = 'https:'
    if (href.indexOf('http') > -1) {
      h = 'http:'
    } else {
      h = 'https:'
    }
    if (shareData.img.includes('https') || shareData.img.includes('http')) {
    } else {
      shareData.url = h + shareData.url
      shareData.img = h + shareData.img
    }
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
    // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
    // 则须把相关接口放在ready函数中调用来确保正确执行。
    // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    // shareData.control  因流量协同平台产品分享需要频繁请求，所以流量协同平台产品分享如有缓存取缓存数据，其他请求接口
    try {
      // 传递自己网页url
      let hrefUrl = window.location.href.split('#')[0]
      let data = {
        hrefUrl
      }
      let resultData = {}
      if (shareData.control) {
        resultData = JSON.parse(sessionStorage.getItem('wxresultData'))
        if (!resultData) {
          resultData = await api.getWeChatSign(data)
          sessionStorage.setItem('wxresultData', JSON.stringify(resultData))
        }
      } else {
        resultData = await api.getWeChatSign(data)
      }
      wx.config({
        debug: false, // 是否开启调试模式
        appId: resultData.appId, // 必填，公众号的唯一标识
        timestamp: resultData.timestamp, // 必填，生成签名的时间戳
        nonceStr: resultData.nonceStr, // 必填，生成签名的随机串
        signature: resultData.signature, // 必填，签名
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'showOptionMenu', 'hideOptionMenu'] // 必填，需要使用的JS接口列表
      });
      wx.ready(function() {
        if (shareData.control) {
          if (isNotShare) {
            console.log('微信右上角分享显示');
            wx.showOptionMenu()
          } else {
            console.log('微信右上角分享隐藏');
            wx.hideOptionMenu()
          }
        }
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
        wx.updateAppMessageShareData({
          title: shareData.title, // 分享标题
          desc: shareData.desc, // 分享描述
          link: shareData.url, // 分享链接
          imgUrl: shareData.img, // 分享图标
          success () {
            // 用户成功分享后执行的回调函数
          },
          cancel () {
            // 用户取消分享后执行的回调函数
          }
        });
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        wx.updateTimelineShareData({
          title: shareData.title, // 分享标题
          link: shareData.url, // 分享链接
          imgUrl: shareData.img, // 分享图标
          success () {
            // 用户成功分享后执行的回调函数
          },
          cancel () {
            // 用户取消分享后执行的回调函数
          }
        })
      });
    } catch (e) {
      console.log('微信分享异常')
    }
  }
}
export default shareUtil