vue 中使用weixin-js-sdk实现微信分享

安装

 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} 页面传过来的数据
 *