一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務(wù)器之家:專注于服務(wù)器技術(shù)及軟件下載分享
分類導(dǎo)航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務(wù)器之家 - 編程語言 - JavaScript - vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

2021-12-13 20:36java小菜比 JavaScript

這篇文章主要介紹了vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.如果只使用config配置的相關(guān)js接口 可采用如下方式引入

執(zhí)行 npm weixin-sdk-js --save

局部引入 在vue頁面中 import wx from "weixin-sdk-js";

全局引入 在vue 的main.js 頁面中 引入后編寫到vue原型鏈上,然后全局調(diào)用

import wx from "weixin-sdk-js";

Vue.prototype.$wx = wx;

2.如果要使用agentConfig配置的相關(guān)接口 一定不要執(zhí)行npm命令引入,如果執(zhí)行了npm 命令,請(qǐng)執(zhí)行卸載指令 npm uninstall weixin-sdk-js --save ,然后在vue項(xiàng)目中的index.html頁面中引入官網(wǎng)相關(guān)sdk-js的js

原因:因?yàn)閍gentConfig 使用的js 沒有npm對(duì)應(yīng)的指令(只是因?yàn)槲覜]找到..)。

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

說明: 第一個(gè)js(上面的js)鏈接為config配置用到的js

第二個(gè)js(下面的js)鏈接為agentconfig配置用的到j(luò)s

3.引入sdk-js中的wx 使用相關(guān)方法 引入方式分全局引入和局部引入

a.局部引入 在要想調(diào)用 wx sdk相關(guān)接口的頁面 (本人使用的局部,因?yàn)榫鸵粋€(gè)頁面使用)

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

b.全局引入 在main.js文件中引入 寫入到vue原型鏈上 方便全局調(diào)用

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

然后再要使用的頁面的script區(qū)域代碼中使用 this.$wx 即可 調(diào)用 ($wx 為你自定義的變量名)

4.config配置驗(yàn)證 參照官網(wǎng)例子自行設(shè)置相關(guān)參數(shù) (如果是全局配置的 wx用this.$wx 代替)

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

設(shè)置了相關(guān)參數(shù),如果驗(yàn)證通過會(huì)立即執(zhí)行wx.ready()方法了。這時(shí)整個(gè)頁面就可以調(diào)用jsApiList中的相關(guān)接口方法了。

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

5.agentConfig 配置驗(yàn)證 參數(shù)自行設(shè)置

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

注入相關(guān)配置參數(shù),執(zhí)行邏輯同config一樣

需要注意的是如果想使用有agentConfig驗(yàn)證的相關(guān)接口方法,最好在config配置認(rèn)證通過后的ready()函數(shù)中執(zhí)行agentConfig 配置認(rèn)證 這樣做的原因:

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

然后整個(gè)頁面也就可以調(diào)用agentConfig配置中jsApiList 里的所有接口方法了。

注意:jsApiList中的方法不一定可用,因?yàn)楦笈_(tái)配置有一定關(guān)系。詳情參考官網(wǎng)說明。所以最好是校驗(yàn)一下jsApiList中哪些方法是可用的.

vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解

6. 附上本人編寫的前端代碼,以及后端獲取相關(guān)配置參數(shù)的java代碼

前端 vue :

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

export default {
 name: "Home",
 data() {
  return {
   config: "",
   agent_config: ""
  };
 },
 methods: {
  //獲取相關(guān)驗(yàn)證配置信息
  getConfig(type) {
   let url = "獲取config或agentConfig配置的參數(shù)接口";
   //該paramUrl 為你使用微信sdk-js相關(guān)接口的頁面地址 該地址需要配置到應(yīng)用后臺(tái)的可信域名下
   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);
    });
  },

  //企業(yè)驗(yàn)證配置
  companyConfigInit(config) {
   let that = this;
   wx.config({
    beta: true, // 必須這么寫,否則wx.invoke調(diào)用形式的jsapi會(huì)有問題
    debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會(huì)通過log打出,僅在pc端時(shí)才會(huì)打印。
    appId: config.appId, // 必填,企業(yè)微信的corpID
    timestamp: config.timestamp, // 必填,生成簽名的時(shí)間戳
    nonceStr: config.nonceStr, // 必填,生成簽名的隨機(jī)串
    signature: config.signature, // 必填,簽名,見 附錄-JS-SDK使用權(quán)限簽名算法
    jsApiList: [], //你要調(diào)用的sdk接口
必填,需要使用的JS接口列表,凡是要調(diào)用的接口都需要傳進(jìn)來
   });
    // config信息驗(yàn)證后會(huì)執(zhí)行ready方法,所有接口調(diào)用都必須在config接口獲得結(jié)果之后,
    // config是一個(gè)客戶端的異步操作,所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口,
    // 則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。
    // 對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口,則可以直接調(diào)用,不需要放在ready函數(shù)中。

   wx.ready(function () {
//執(zhí)行你的業(yè)務(wù)邏輯代碼
    //......
    //如果要使用到agent_config相關(guān)接口 初始化agentConfig配置
    that.getConfig("agent_config");
   });
   wx.error(function (res) {
    console.log(res);
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù),如簽名過期導(dǎo)致驗(yàn)證失敗
    // ,具體錯(cuò)誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看,
    // 對(duì)于SPA可以在這里更新簽名。
   });
  },
  //應(yīng)用驗(yàn)證配置
  appConfigInit(config) {
   let that = this;
   wx.agentConfig({
    corpid: config.corpid, // 必填,企業(yè)微信的corpid,必須與當(dāng)前登錄的企業(yè)一致
    agentid: config.agentid, // 必填,企業(yè)微信的應(yīng)用id (e.g. 1000247)
    timestamp: config.timestamp, // 必填,生成簽名的時(shí)間戳
    nonceStr: config.nonceStr, // 必填,生成簽名的隨機(jī)串
    signature: config.signature, // 必填,簽名,見附錄-JS-SDK使用權(quán)限簽名算法
    jsApiList: [], //你要調(diào)用的sdk接口必填
   
    success: function () {
     //查看相關(guān)接口是否可以調(diào)用
     //that.checkJsApi();
    },
    fail: function (res) {
     if (res.errMsg.indexOf("function not exist") > -1) {
      alert("版本過低請(qǐng)升級(jí)");
     }
    },
   });
  },
  //查看可調(diào)用的接口
  checkJsApi() {
   wx.checkJsApi({
    jsApiList: [
     
    ], // 需要檢測(cè)的JS接口列表
    success: function (res) {
     // 以鍵值對(duì)的形式返回,可用的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());
/**
 * 應(yīng)用secret
 */
private final String secretId = "";
/**
 * 應(yīng)用ID
 */
private final String agentId = "";
/**
 * 企業(yè)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", "參數(shù)非法");
  }
  Map<String, Object> data = new HashMap<>();
  //臨時(shí)票據(jù)
  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", "獲取臨時(shí)票據(jù)失敗!");
  }
  //當(dāng)前時(shí)間戳 轉(zhuǎn)成秒
  long timestamp = System.currentTimeMillis() / 1000;
  //隨機(jī)字符串 
  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");
    // 調(diào)用digest方法,進(jìn)行加密操作
    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 請(qǐng)參考官網(wǎng)自行實(shí)現(xiàn)就不貼代碼了
  // 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();
      //有效期內(nèi)的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工具類
/**
 * 發(fā)起get請(qǐng)求
 * @param url
 * @return
 */
public static String doGet(String url) {
  CloseableHttpClient httpClient = null;
  CloseableHttpResponse response = null;
  String body = "";
  try {
    // 通過址默認(rèn)配置創(chuàng)建一個(gè)httpClient實(shí)例
    httpClient = HttpClients.createDefault();
    // 創(chuàng)建httpGet遠(yuǎn)程連接實(shí)例
    URL newUrl = new URL(url);
    HttpGet httpGet = new HttpGet(String.valueOf(newUrl));
    // 設(shè)置請(qǐng)求頭信息,鑒權(quán) httpGet.setHeader("Authorization", "Bearer da3efcbf-0845-4fe3-8aba-ee040be542c0")
    // 設(shè)置配置請(qǐng)求參數(shù)
    RequestConfig requestConfig = RequestConfig.custom()
        // 連接主機(jī)服務(wù)超時(shí)時(shí)間
        .setConnectTimeout(35000)
        // 請(qǐng)求超時(shí)時(shí)間
        .setConnectionRequestTimeout(35000)
        // 數(shù)據(jù)讀取超時(shí)時(shí)間
        .setSocketTimeout(60000)
        .build();
    // 為httpGet實(shí)例設(shè)置配置
    httpGet.setConfig(requestConfig);
    // 執(zhí)行g(shù)et請(qǐng)求得到返回對(duì)象
    response = httpClient.execute(httpGet);
    // 通過返回對(duì)象獲取返回?cái)?shù)據(jù)
    HttpEntity entity = response.getEntity();
    // 通過EntityUtils中的toString方法將結(jié)果轉(zhuǎn)換為字符串
    if (entity != null) {
      //按指定編碼轉(zhuǎn)換結(jié)果實(shí)體為String類型
      body = EntityUtils.toString(entity,"utf-8");
    }
  } catch (Exception e) {
    e.printStackTrace();
  } finally {
    close(response, httpClient);
  }
  return body;
}

到此這篇關(guān)于vue項(xiàng)目中企業(yè)微信使用js-sdk時(shí)config和agentConfig配置方式詳解的文章就介紹到這了,更多相關(guān)vue項(xiàng)目企業(yè)微信使用js-sdk時(shí)config和agentConfig配置內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家!

原文鏈接:https://www.cnblogs.com/cndjl/archive/2020/12/13/14128807.html

延伸 · 閱讀

精彩推薦
主站蜘蛛池模板: 欧美最新在线 | 美女张开大腿让男人桶 | 男男羞羞视频网站国产 | 午夜大片在线观看 | 精品湿| 国语自产自拍秒拍在线视频 | 男女做性视频 | 精品麻豆国产 | 久久精品亚洲热综合一本 | 好妈妈7在线观看高清 | 午夜爱情动作片P | yy6080午夜国产免费福利 | 狠狠色伊人亚洲综合网站色 | a级在线看 | 日本三级成人中文字幕乱码 | 火影忍者小南裸羞羞漫画 | 色戒完整版2小时38分钟 | 国产福利专区精品视频 | 国产成人咱精品视频免费网站 | 九九热综合 | 男人的私人影院 | 波多野结衣护士 | 男女18一级大黄毛片免 | 四虎在线最新永久免费 | 国产在线精品99一卡2卡 | 亚洲国产99999在线精品一区 | 精品国产日韩亚洲一区在线 | 青青草原社区 | 99久久免费视频 | 视频亚洲一区 | 精品女同同性视频很黄很色 | 欧美 亚洲 一区 | 精品一区二区三区在线成人 | 久久成人精品免费播放 | 丁香六月色 | 日韩欧一级毛片在线播无遮挡 | 99热这里只有精品在线 | 特黄未满14周岁毛片 | 久久机热视频 这里只有精品首页 | 青青青国产精品国产精品久久久久 | 久久黄色大片 |