想要查看前面的笔记请翻阅我的CSDN博客,作者码字不易,喜欢的话点赞,加个关注吧,后期还有很多干货等着你!
1.获取当前url
let url = location.href.split('#')[0]
坑点:1. 这里要注意的就是url的问题,如果url没有正确传递,后端也会返回信息,但是签名信息会是错误的。
2. 上面提到的完整url指的是:'http(s)‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。可以通过 location.href 来获取。
3. 如果你的vue项目,路由没有开启history 模式,也就是你的url上面包含“#”,这个时候要从后端正确获取签名,就需要 去掉url上#后面的字符 。(url去掉’#‘hash部分,可用 location.href.split(’#’)[0] )
2.将url传入后端
export function getJssdk (url) {
let para = {
params: { signurl: url }
}
const res = service.get('wx/getsign', para)
return res
}
这里我使用了get方法,将url传入到后端解析后端主要操作的是生成signature,具体后端生成方法这里不做讨论,详见,点击->企业微信SDK文档,其实也比较简单,网上Demo也比较多
后端会给我返回我需要的值
{
code: 0,
ticket:"XXXXXXXX",
appid: "XXXXXXXX",
sign: "XXXXXXXX",
signurl: "XXXXXXXX",
noncestr: "XXXXXXXX",
timestamp: XXXXXXXX
}
返回字段 | 字段解释 |
---|
ticket | H5应用调用企业微信JS接口的临时票据 |
appid | 企业微信的corpID |
sign | 签名 |
signurl | 授信url |
noncestr | 随机字符串 |
timestamp | 时间戳 |
3.将后端返回的配置文件放入jssdk配置文件中
先下载微信提供的weixin-js-sdk,微信封装好的工具,以便我们去操作
npm isntall weixin-js-sdk --save
将配置信息传入
import wx from 'weixin-js-sdk'
getJssdk(url)
.then(res => {
console.log(res)
this.signature = res.sign;
this.appId = res.appid;
this.noncestr = res.noncestr;
this.timestamp = res.timestamp;
wx.config({
beta: true,
debug: false,
appId: this.appId,
timestamp: this.timestamp,
nonceStr: this.noncestr,
signature: this.signature,
jsApiList: ['previewFile']
});
wx.ready(function () {
console.log("接入sdk")
});
wx.error(function (res) {
console.log('执行失败');
});
}).catch(err => {
console.log(err);
})
},
注意这里 当我们需要用到页面加载就要触发的方法时,这里需要踩坑
wx.ready(function(){
});
4.当你需要使用异步的方法时
注意这里,微信weixin-js-sdk中有个天坑,有部分调用的方法时没办法直接调用的。比如我现在要用的previewFile(文件预览)
wx.invoke(
"previewFile",
{
url: this.downloadAttachmentUrl,
name: name,
size: size
}
);
以下是weixin-js-sdk支持直接调用的api
config: ƒ (t)
ready: ƒ (e)
error: ƒ (e)
checkJsApi: ƒ (e)
onMenuShareTimeline: ƒ (e)
onMenuShareAppMessage: ƒ (e)
onMenuShareQQ: ƒ (e)
onMenuShareWeibo: ƒ (e)
onMenuShareQZone: ƒ (e)
updateTimelineShareData: ƒ (e)
updateAppMessageShareData: ƒ (e)
startRecord: ƒ (e)
stopRecord: ƒ (e)
onVoiceRecordEnd: ƒ (e)
playVoice: ƒ (e)
pauseVoice: ƒ (e)
stopVoice: ƒ (e)
onVoicePlayEnd: ƒ (e)
uploadVoice: ƒ (e)
downloadVoice: ƒ (e)
translateVoice: ƒ (e)
chooseImage: ƒ (e)
getLocation: ƒ (e)
previewImage: ƒ (e)
uploadImage: ƒ (e)
downloadImage: ƒ (e)
getLocalImgData: ƒ (e)
getNetworkType: ƒ (e)
openLocation: ƒ (e)
hideOptionMenu: ƒ (e)
showOptionMenu: ƒ (e)
closeWindow: ƒ (e)
hideMenuItems: ƒ (e)
showMenuItems: ƒ (e)
hideAllNonBaseMenuItem: ƒ (e)
showAllNonBaseMenuItem: ƒ (e)
scanQRCode: ƒ (e)
openAddress: ƒ (e)
openProductSpecificView: ƒ (e)
addCard: ƒ (e)
chooseCard: ƒ (e)
openCard: ƒ (e)
consumeAndShareCard: ƒ (e)
chooseWXPay: ƒ (e)
openEnterpriseRedPacket: ƒ (e)
startSearchBeacons: ƒ (e)
stopSearchBeacons: ƒ (e)
onSearchBeacons: ƒ (e)
openEnterpriseChat: ƒ (e)
launchMiniProgram: ƒ (e)
openBusinessView: ƒ (e)
miniProgram: {navigateBack: ƒ, navigateTo: ƒ, redirectTo: ƒ, switchTab: ƒ, reLaunch: ƒ, …}
invoke: ƒ (t,n,r)
on: ƒ (t,n)