目錄

• 1.背景
• 2.技術棧
• 3.需求
• 4.實現步驟
  • 4.1 配合webpack安裝對應的npm包
  • 4.2 抽取獲得code的js方法
  • 4.3 在需要使用code的頁面中引入js檔案,匯入方法
  • 4.4 在剛才的頁面需要呼叫的方法裡呼叫剛才導進來的js方法
• 5.就提莫的結束了!!!

1.背景

​ 最近公司開發一個企業內部釘釘微應用,有個需求是動態獲取釘釘免登陸code,之前從沒玩過

百度+google了半天還是c了個有bug的(免登陸code只能用一次,且在非同步函式中呼叫),網上的蛇皮解決方案真是讓人頭禿........

​ 無奈今天是deadline,無更多時間c錯誤程式碼,只能昨晚請教我的室友---全南京最強大前端架構獅丶俊俊

​ 然後推匯出---這就是callback最佳實踐!(主題是我編的,愛你是真的)

2.技術棧

Vue.js(cli3+)整合dingtalk-jsapi

3.需求

如上所述,需要動態獲取一次性的釘釘免登陸code,我採用的是安裝依賴的方法

4.實現步驟

4.1 配合webpack安裝對應的npm包

npm install dingtalk-jsapi

4.2 抽取獲得code的js方法

import * as dd from 'dingtalk-jsapi';

export function getCode(callback) {
  let corpId = '你公司的corpId';
  if (dd.env.platform !== "notInDingTalk") {
    dd.ready(() => {
      //使用SDK 獲取免登授權碼
      dd.runtime.permission.requestAuthCode({
        corpId: corpId,
        onSuccess: (info) => {
          // 根據釘釘提供的api 獲得code後,再次呼叫這個callback方法
          // 由於是釘釘獲取code是非同步操作,不知道什麼時候執行完畢
          // callback 函式會等他執行完畢後在自己呼叫自己
          callback(info.code)
        },
        onFail: (err) => {
          alert('fail');
          alert(JSON.stringify(err));
        },
      });
    });
  }
}
 

以上 getCode(callback){} 中的callback就是一個回撥函式,稍後在使用中介紹使用方法

4.3 在需要使用code的頁面中引入js檔案,匯入方法

4.4 在剛才的頁面需要呼叫的方法裡呼叫剛才導進來的js方法

注意: 所有關於code的操作都要在此 回撥函式中執行

5.就提莫的結束了!!!

所以,專業的是還是交給專業的人比較好,節省時間成本,但是誰讓我NP的朋友多呢~

以上~