1.如果只使用config配置的相關js介面 可採用如下方式引入

執行 npm weixin-sdk-js --save

區域性引入 在vue頁面中 import wx from 'weixin-sdk-js';

全域性引入 在vue 的main.js 頁面中 引入後編寫到vue原型鏈上，然後全域性呼叫

import wx from "weixin-sdk-js";

Vue.prototype.$wx = wx;

2.如果要使用agentConfig配置的相關介面 一定不要執行npm命令引入，如果執行了npm 命令，請執行解除安裝指令 npm uninstall weixin-sdk-js --save ，然後在vue專案中的index.html頁面中引入官網相關sdk-js的js

原因：因為agentConfig 使用的js 沒有npm對應的指令(只是因為我沒找到..)。

說明: 第一個js（上面的js）連結為config配置用到的js

第二個js（下面的js）連結為agentconfig配置用的到js

3.引入sdk-js中的wx 使用相關方法 引入方式分全域性引入和區域性引入

a.區域性引入 在要想呼叫 wx sdk相關介面的頁面 （本人使用的區域性，因為就一個頁面使用）

b.全域性引入 在main.js檔案中引入 寫入到vue原型鏈上 方便全域性呼叫

然後再要使用的頁面的script區域程式碼中使用 this.$wx 即可 呼叫 ($wx 為你自定義的變數名)

4.config配置驗證 參照官網例子自行設定相關引數 （如果是全域性配置的 wx用this.$wx 代替）

設定了相關引數，如果驗證通過會立即執行wx.ready()方法了。這時整個頁面就可以呼叫jsApiList中的相關介面方法了。

5.agentConfig 配置驗證 引數自行設定

注入相關配置引數，執行邏輯同config一樣

需要注意的是如果想使用有agentConfig驗證的相關介面方法，最好在config配置認證通過後的ready()函式中執行agentConfig 配置認證 這樣做的原因：

然後整個頁面也就可以呼叫agentConfig配置中jsApiList 裡的所有介面方法了。

注意：jsApiList中的方法不一定可用，因為跟後臺配置有一定關係。詳情參考官網說明。所以最好是校驗一下jsApiList中哪些方法是可用的.

6. 附上本人編寫的前端程式碼，以及後端獲取相關配置引數的java程式碼

前端 vue ：

<script>
import axios from "axios";
let wx = window.wx;

export default {
 name: "Home",data() {
  return {
   config: "",agent_config: ""
  };
 },methods: {
  //獲取相關驗證配置資訊
  getConfig(type) {
   let url = "獲取config或agentConfig配置的引數介面";
   //該paramUrl 為你使用微信sdk-js相關介面的頁面地址 該地址需要配置到應用後臺的可信域名下
   let paramUrl = window.location.href.split("#")[0];
   let that = this;
   let param = { url: paramUrl };
   if (type === "agent_config") {
    param.type = type;
   }
   axios
    .get(url,{
     params: param
    })
    .then(function (rsp) {
     if (rsp.data.success) {
      that[type] = rsp.data.data;
      if (type === "config") {
       that.companyConfigInit(that[type]);
      } else {
       that.appConfigInit(that[type]);
      }
     }
    })
    .catch(function (err) {
     console.log(err);
    });
  },//企業驗證配置
  companyConfigInit(config) {
   let that = this;
   wx.config({
    beta: true,// 必須這麼寫，否則wx.invoke呼叫形式的jsapi會有問題
    debug: false,// 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
    appId: config.appId,// 必填，企業微信的corpID
    timestamp: config.timestamp,// 必填，生成簽名的時間戳
    nonceStr: config.nonceStr,// 必填，生成簽名的隨機串
    signature: config.signature,// 必填，簽名，見 附錄-JS-SDK使用許可權簽名演算法
    jsApiList: [],//你要呼叫的sdk介面
必填，需要使用的JS介面列表，凡是要呼叫的介面都需要傳進來
   });
    // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，
    // config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，
    // 則須把相關介面放在ready函式中呼叫來確保正確執行。
    // 對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

   wx.ready(function () {
//執行你的業務邏輯程式碼
    //......
    //如果要使用到agent_config相關介面 初始化agentConfig配置
    that.getConfig("agent_config");
   });
   wx.error(function (res) {
    console.log(res);
    // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗
    // ，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，
    // 對於SPA可以在這裡更新簽名。
   });
  },//應用驗證配置
  appConfigInit(config) {
   let that = this;
   wx.agentConfig({
    corpid: config.corpid,// 必填，企業微信的corpid，必須與當前登入的企業一致
    agentid: config.agentid,// 必填，企業微信的應用id （e.g. 1000247）
    timestamp: config.timestamp,// 必填，簽名，見附錄-JS-SDK使用許可權簽名演算法
    jsApiList: [],//你要呼叫的sdk介面必填
   
    success: function () {
     //檢視相關介面是否可以呼叫
     //that.checkJsApi();
    },fail: function (res) {
     if (res.errMsg.indexOf("function not exist") > -1) {
      alert("版本過低請升級");
     }
    },});
  },//檢視可呼叫的介面
  checkJsApi() {
   wx.checkJsApi({
    jsApiList: [
     
    ],// 需要檢測的JS介面列表
    success: function (res) {
     // 以鍵值對的形式返回，可用的api值true，不可用為false
     // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
     let obj = res.checkResult;
     alert(
      obj["getCurExternalContact"] +
       "," +
       obj["getContext"] +
       "," +
       obj["agentConfig"] +
       "," +
       obj["selectExternalContact"] +
       ","
     );
    },});
  }
 },created() {
  this.getConfig("config");
 },};
</script>

後端java程式碼 controller ：

Logger logger = LoggerFactory.getLogger(this.getClass());
/**
 * 應用secret
 */
private final String secretId = "";
/**
 * 應用ID
 */
private final String agentId = "";
/**
 * 企業ID
 */
private final String corpId = ""

@GetMapping(value = "/getConfig")
public Result getWeiXinPermissionsValidationConfig(@RequestParam("url") String url,@RequestParam(value = "type",required = false) String type) {
  if (StringUtils.isEmpty(url)) {
    return new Result().fail().put("msg","引數非法");
  }
  Map<String,Object> data = new HashMap<>();
  //臨時票據
  String ticket;
  if (ObjectUtils.isEmpty(type)) {
    ticket = WeChatApiUtil.getJsApiTicket(secretId,null);
    data.put("appId",corpId);
    logger.info("get company temp ticket is ："+ticket);
  } else {
    ticket = WeChatApiUtil.getJsApiTicket(secretId,type);
    data.put("agentid",agentId);
    data.put("corpid",corpId);
    logger.info("get app temp ticket is ："+ticket);
  }

  if (StringUtils.isEmpty(ticket)) {
    return new Result().fail().put("msg","獲取臨時票據失敗!");
  }
  //當前時間戳 轉成秒
  long timestamp = System.currentTimeMillis() / 1000;
  //隨機字串 
  String nonceStr = "Wm3WZYTPz0wzccnW";
  String signature = getSignature(ticket,nonceStr,timestamp,url);
  data.put("timestamp",timestamp);
  data.put("nonceStr",nonceStr);
  data.put("signature",signature);
  return new Result().put("data",data);
}
private String getSignature(String ticket,String nonceStr,long timestamp,String url) {
  try {
    String unEncryptStr = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;
    MessageDigest sha = MessageDigest.getInstance("SHA");
    // 呼叫digest方法，進行加密操作
    byte[] cipherBytes = sha.digest(unEncryptStr.getBytes());
    String encryptStr = Hex.encodeHexString(cipherBytes);
    return encryptStr;
  } catch (NoSuchAlgorithmException e) {
    e.printStackTrace();
  }
  return null;
}
WeChatApiUtil工具類獲取ticket 
/**
 * 存放ticket的容器
 */
private static Map<String,Ticket> ticketMap = new HashMap<>();
@Data
private static class Ticket {
  private String ticket;
  private Long valid;
}
/**
 * 獲取ticket
 * @paran type 
 * @param accessToken
 * @return
 */
public static String getJsApiTicket(String secretId,String type) {
  //getAccessToken()獲取accessToken 請參考官網自行實現就不貼程式碼了
  // https://work.weixin.qq.com/api/doc/90000/90135/91039
  String accessToken = getAccessToken(secretId);
  String key =accessToken;
  if (!StringUtils.isEmpty(accessToken)) {
    if ("agent_config".equals(type)){
      key=type+"_"+accessToken;
    }
    Ticket ticket = ticketMap.get(key);
    long now = Calendar.getInstance().getTime().getTime();
    if (!ObjectUtils.isEmpty(ticket)) {
      Long valid = ticket.getValid();
      //有效期內的ticket 直接返回
      if (valid - now > 0) {
        return ticket.getTicket();
      }
    }
    ticket = getJsApiTicketFromWeChatPlatform(accessToken,type);
    if (ticket != null) {
      ticketMap.put(key,ticket);
      return ticket.getTicket();
    }
  }
  return null;
}

public static Ticket getJsApiTicketFromWeChatPlatform(String accessToken,String type) {
  String url;
  if ("agent_config".equals(type)) {
    url = "https://qyapi.weixin.qq.com/cgi-bin/ticket/get?access_token=" + accessToken+ "&type=" + type;
  } else {
    url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=" + accessToken;
  }
  Long now = System.currentTimeMillis();
  if (!StringUtils.isEmpty(accessToken)) {
    String body = HttpUtil.doGet(url);
    if (!StringUtils.isEmpty(body)) {
      JSONObject object = JSON.parseObject(body);
      if (object.getIntValue("errcode") == 0) {
        Ticket ticket = new Ticket();
        ticket.setTicket(object.getString("ticket"));
        ticket.setValid(now + 7200L);
        return ticket;
      }
    }
  }
  return null;
}
HttpUtil工具類
/**
 * 發起get請求
 * @param url
 * @return
 */
public static String doGet(String url) {
  CloseableHttpClient httpClient = null;
  CloseableHttpResponse response = null;
  String body = "";
  try {
    // 通過址預設配置建立一個httpClient例項
    httpClient = HttpClients.createDefault();
    // 建立httpGet遠端連線例項
    URL newUrl = new URL(url);
    HttpGet httpGet = new HttpGet(String.valueOf(newUrl));
    // 設定請求頭資訊，鑑權 httpGet.setHeader("Authorization","Bearer da3efcbf-0845-4fe3-8aba-ee040be542c0")
    // 設定配置請求引數
    RequestConfig requestConfig = RequestConfig.custom()
        // 連線主機服務超時時間
        .setConnectTimeout(35000)
        // 請求超時時間
        .setConnectionRequestTimeout(35000)
        // 資料讀取超時時間
        .setSocketTimeout(60000)
        .build();
    // 為httpGet例項設定配置
    httpGet.setConfig(requestConfig);
    // 執行get請求得到返回物件
    response = httpClient.execute(httpGet);
    // 通過返回物件獲取返回資料
    HttpEntity entity = response.getEntity();
    // 通過EntityUtils中的toString方法將結果轉換為字串
    if (entity != null) {
      //按指定編碼轉換結果實體為String型別
      body = EntityUtils.toString(entity,"utf-8");
    }
  } catch (Exception e) {
    e.printStackTrace();
  } finally {
    close(response,httpClient);
  }
  return body;
}

到此這篇關於vue專案中企業微信使用js-sdk時config和agentConfig配置方式詳解的文章就介紹到這了,更多相關vue專案企業微信使用js-sdk時config和agentConfig配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！