釘釘微應用的開發——主前端

經濟基礎決定上層建築。

---

開發環境

• Chrome Latest Version
• iOS釘釘最新版、Android釘釘開發最新版
• 其實我一直想實現電腦Chrome能夠調試手機內部APP，苦於嘗試屢次沒有成功，因此仍是電腦和手機同時測試，爲了開發時間，只能先委屈一下本身了。由於溫馨的測試環境也是開發的一個重要先決條件。

開發目的

• 企業微應用。
• 產品需求是在手機端釘釘上開發一個微應用，用來給公司員工填寫反饋信息。
• 產品要求nickname是經過釘釘接口獲取用戶的暱稱，獲取以後不容許用戶修改。這便涉及到釘釘的接口用須要鑑權的dd.config。
• 目的具體至實現釘釘企業微應用的鑑權，獲取簡單的用戶信息，順便提一下免登錄。
  
• 看完頁面圖會發現，這個需求簡直算是前端開發裏面最簡單的需求了吧。實際上也是很簡單，若是不是去第一次開發釘釘微應用的話。哈哈哈哈哈哈哈哈哈。。。。。

開發進度

• 頁面佈局、樣式按下不表。
• 頁面須要後端人員接進釘釘頁面，即進度從打開釘釘微應用可以進來這個頁面開始。

開發思路

1. 首先，借用公司的agentId和微應用的url（通常由你司企業釘釘管理員提供）經過後臺提供的API接口獲取到實時的鑑權信息（agentId，corpId，timeStamp，nonceStr，signature）；
2. 而後，用這個鑑權信息區配置釘釘api接口的dd.config，而後去操做釘釘部分須要安全鑑定的api;
3. 以後，用釘釘api的biz.user.get獲取用戶信息；
4. （題外）免登須要dd.runtime.permission.requestAuthCode先獲取authCode，而後去請求後臺提供的API，由後臺返回更加安全的用戶信息；
5. 最後，拿到用戶信息以後，將nickname賦值進輸入框，而後提交給後臺便可。
   

嘿嘿，借用官方爸爸的微應用開發思路圖，真的很一目瞭然，從五個鑑權信息開始都是前端的操做了哦。

DEMO

• GITHUB

開發步驟

1. 第一步，這個地方若是當作通常的數據請求來看，沒有什麼要說的，用jquery或者zepto的ajax請求均可以很快速實現。就說一下我在這個踩的坑，我在使用ajax異步請求的時候，忽略了異步加載然而同步加載不中止的問題。深刻這個話題我也還須要去學去實踐，因此只是簡單說明個人問題，後面會提供連接去深刻學習。下面的代碼，因爲我沒實現手機電腦聯調，因此只能退而其次用alert測試，見諒。js在加載的時候，會先所有同步順序加載，可是ajax請求不會影響同步加載，於是，會按照123的alert彈出，而非順序彈出312。因爲的我淺薄理解，致使我後面還沒拿到ajax請求到的_config，就開始執行函數DDConfig(_config)配置釘釘，因此一直不彈出任何彈窗。這個問題我開始解決的方案是將這段ajax單獨放在一個script標籤裏面，最早引入，而後再配置釘釘鑑權信息，這個在Android上測試時正常的，然而只是僥倖，iOS不買這個帳。因此使用ajax的complete函數，在這裏面執行DDConfig(_config)，可看源代碼。

   var _config = null; // 定義全局變量_config，初始值爲null，用來接收API獲取到的簽名信息
   var getConfig = $.ajax({
       type: 'POST',
       url: '獲取企業簽名的API，後臺提供',
       data: {
           agentId: 109243825,
           url: '這是你開發微應用頁面的線上地址，通常是由釘釘管理員配置的。',
       },
       dataType: 'json',
       success: function(data){
           console.log('---success-post-dingInfo---');
           if(data.status){
               _config = data.data;
               alert('3. API獲取簽名信息：'+JSON.stringify(_config));
               // 開始配置釘釘
               DDConfig(_config);
           }else{
               alert('請求信息出錯');
           }
       },
       error: function(data){
           console.log(---error-post-dingInfo---);
       }
   });
   alert('1. API請求開始：'+JSON.stringify(getConfig));
   alert('2. 全局輸出_config：'+JSON.stringify(_config));

2. 第二步，這裏官方給出很詳細的步驟釘釘移動jsapi開發，你須要使用的api放進dd.config的jsApiList裏面便可。其實釘釘的jsapi思路是這樣的。引入dingtalk.js（官方文檔有提供）這個js會給你提供一個全局變量dd，你能夠在Chrome的控制檯打印出來看看是個什麼東西，裏面能夠識別釘釘版本，手機系統，以及提供一個個api。釘釘移動jsapi裏面介紹全部的api，分爲無需鑑權api和須要鑑權api，無需鑑權api能夠再引入dingtalk.js以後全局使用；鑑權api就須要走後端接口以保證安全性，且鑑權經過纔可使用這部分api。思路就是這樣。

   • 問題1：若是你發現你的dd.ready/dd.error都沒執行，那多是我上一步碰見的問題，即沒開始配置dd.config，卻執行了dd.ready和dd.error，由於dd是全局變量，不受函數和異步限制，因此寫法上面沒有錯，可是就是什麼都不反應，很痛苦。還有一個很粗暴的方法去review你的代碼，那就是清空js代碼，不作ajax請求，直接開始釘釘鑑權，即dd.config、dd.ready、dd.error，這個時候你能夠先用固定的鑑權信息（agentId，corpId，timeStamp，nonceStr，signature）去配置，這個時候由於不是實時的鑑權信息，因此確定要直接進dd.error來提示校驗失敗，那麼你就應該知道怎麼一點點去排查你的錯誤了。

   • 問題2：若是你發現dd.error被執行了，先恭喜你一下，至少你進入釘釘的api了，哈哈哈哈哈哈哈哈。。。

     • 這個時候報錯，說明你的dd.config裏面有信息是錯誤的。那就去一個個打印出來檢查。
     • 還有多是上一步中的url的問題，好比說個人微應用的連接是https://open-doc.dingtalk.com/；那麼url也必須徹底同樣，注意https也不能錯的哦。可看前輩們的問題集錦釘釘開放平臺「常見問題常見問題常見問題
3. 第三步，應該不用說了，只要鑑權經過，就能夠直接用釘釘api獲取用戶的信息，只是這個信息很簡單，不怎麼涉及安全問題。可看源碼。
4. 第四步，題外話。這個免登，是須要你在經過釘釘api拿到authcode以後再去找後端API請求，告訴他你須要免登獲取更多用戶的信息釘釘免登，這些都是涉及到安全性的了，全部涉及安全的問題都要走後端API。這個我也沒作，暫時還沒用到，之後如果開發有坑還會繼續說。釘釘的生態說不上很穩定，可是因爲公司用的多，因此不少東西不論是官方仍是前輩們都寫的有詳細文檔和代碼，能夠多搜搜。
5. 提交操做，可看源碼。

最最最坑

• 此次最大的坑是我對異步同步的理解不夠到位；
• 說實話，全部的坑，都仍是源於基礎。開篇即說「經濟基礎決定上層建築」，尤爲是技術上，基礎決定你將來的路能夠走多寬多遠多一馬平川而不至於坑坑窪窪。

推薦知識

• 官方爸爸
• 釘釘開發指南-前端全棧入門篇
• 釘釘開放平臺「常見問題常見問題常見問題
• 釘釘緩存可能引發的調用JSAPI不成功
• 感謝他們。尤爲是第二位大神，提供了不少知識點能夠學習。

---

——好記性不如難筆頭。