钉钉微应用的开发——主前端
經濟基礎決定上層建筑。
開發環境
- Chrome Latest Version
- iOS釘釘最新版、Android釘釘開發最新版
- 其實我一直想實現電腦Chrome可以調試手機內部APP,苦于嘗試多次沒有成功,所以還是電腦和手機同時測試,為了開發時間,只能先委屈一下自己了。因為舒適的測試環境也是開發的一個重要先決條件。
開發目的
- 企業微應用。
- 產品需求是在手機端釘釘上開發一個微應用,用來給公司員工填寫反饋信息。
- 產品要求nickname是通過釘釘接口獲取用戶的昵稱,獲取之后不允許用戶修改。這便涉及到釘釘的接口用需要鑒權的dd.config。
- 目的具體至實現釘釘企業微應用的鑒權,獲取簡單的用戶信息,順便提一下免登陸。
- 看完頁面圖會發現,這個需求簡直算是前端開發里面最簡單的需求了吧。實際上也是很簡單,如果不是去第一次開發釘釘微應用的話。哈哈哈哈哈哈哈哈哈。。。。。
開發進度
- 頁面布局、樣式按下不表。
- 頁面需要后端人員接進釘釘頁面,即進度從打開釘釘微應用能夠進來這個頁面開始。
開發思路
嘿嘿,借用官方爸爸的微應用開發思路圖,真的很一目了然,從五個鑒權信息開始都是前端的操作了哦。
DEMO
- GITHUB
開發步驟
第一步,這個地方如果當做一般的數據請求來看,沒有什么要說的,用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));第二步,這里官方給出很詳細的步驟釘釘移動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也不能錯的哦。可看前輩們的問題集錦釘釘開放平臺“常見問題常見問題常見問題
最最最坑
- 這次最大的坑是我對異步同步的理解不夠到位;
- 說實話,所有的坑,都還是源于基礎。開篇即說“經濟基礎決定上層建筑”,尤其是技術上,基礎決定你未來的路可以走多寬多遠多一馬平川而不至于坑坑洼洼。
推薦知識
- 官方爸爸
- 釘釘開發指南-前端全棧入門篇
- 釘釘開放平臺“常見問題常見問題常見問題
- 釘釘緩存可能引起的調用JSAPI不成功
- 感謝他們。尤其是第二位大神,提供了很多知識點可以學習。
——好記性不如難筆頭。
總結
以上是生活随笔為你收集整理的钉钉微应用的开发——主前端的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Elasticsearch之CURL命令
- 下一篇: 2017年html5行业报告,云适配发布