生产环境踩坑记：Vue接入jssdk踩坑记

想要查看前面的笔记请翻阅我的CSDN博客，作者码字不易，喜欢的话点赞，加个关注吧，后期还有很多干货等着你！

1.获取当前url

//获取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,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: this.appId, // 必填，企业微信的corpID
            timestamp: this.timestamp, // 必填，生成签名的时间戳
            nonceStr: this.noncestr, // 必填，生成签名的随机串
            signature: this.signature,// 必填，签名，见附录1
            jsApiList: ['previewFile'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.ready(function () {
    
    
            console.log("接入sdk")
          });
          wx.error(function (res) {
    
    //通过error接口处理失败验证
            // config信息验证失败会执行error
            console.log('执行失败');
          });
        }).catch(err => {
    
    
          console.log(err);
        })
    },

注意这里 当我们需要用到页面加载就要触发的方法时，这里需要踩坑

wx.ready(function(){
    
    
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
    // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
    // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
    // 则可以直接调用，不需要放在ready函数中。
});

4.当你需要使用异步的方法时

注意这里，微信weixin-js-sdk中有个天坑，有部分调用的方法时没办法直接调用的。比如我现在要用的previewFile（文件预览）

      wx.invoke(
        "previewFile",
        {
    
    
          url: this.downloadAttachmentUrl, // 需要预览文件的地址(必填，可以使用相对路径)
          name: name, // 需要预览文件的文件名(不填的话取url的最后部分)
          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)