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