钉钉微应用的开发——主前端
經(jīng)濟(jì)基礎(chǔ)決定上層建筑。
開發(fā)環(huán)境
- Chrome Latest Version
- iOS釘釘最新版、Android釘釘開發(fā)最新版
- 其實(shí)我一直想實(shí)現(xiàn)電腦Chrome可以調(diào)試手機(jī)內(nèi)部APP,苦于嘗試多次沒有成功,所以還是電腦和手機(jī)同時(shí)測試,為了開發(fā)時(shí)間,只能先委屈一下自己了。因?yàn)槭孢m的測試環(huán)境也是開發(fā)的一個(gè)重要先決條件。
開發(fā)目的
- 企業(yè)微應(yīng)用。
- 產(chǎn)品需求是在手機(jī)端釘釘上開發(fā)一個(gè)微應(yīng)用,用來給公司員工填寫反饋信息。
- 產(chǎn)品要求nickname是通過釘釘接口獲取用戶的昵稱,獲取之后不允許用戶修改。這便涉及到釘釘?shù)慕涌谟眯枰b權(quán)的dd.config。
- 目的具體至實(shí)現(xiàn)釘釘企業(yè)微應(yīng)用的鑒權(quán),獲取簡單的用戶信息,順便提一下免登陸。
- 看完頁面圖會(huì)發(fā)現(xiàn),這個(gè)需求簡直算是前端開發(fā)里面最簡單的需求了吧。實(shí)際上也是很簡單,如果不是去第一次開發(fā)釘釘微應(yīng)用的話。哈哈哈哈哈哈哈哈哈。。。。。
開發(fā)進(jìn)度
- 頁面布局、樣式按下不表。
- 頁面需要后端人員接進(jìn)釘釘頁面,即進(jìn)度從打開釘釘微應(yīng)用能夠進(jìn)來這個(gè)頁面開始。
開發(fā)思路
嘿嘿,借用官方爸爸的微應(yīng)用開發(fā)思路圖,真的很一目了然,從五個(gè)鑒權(quán)信息開始都是前端的操作了哦。
DEMO
- GITHUB
開發(fā)步驟
第一步,這個(gè)地方如果當(dāng)做一般的數(shù)據(jù)請(qǐng)求來看,沒有什么要說的,用jquery或者zepto的ajax請(qǐng)求都可以很快速實(shí)現(xiàn)。就說一下我在這個(gè)踩的坑,我在使用ajax異步請(qǐng)求的時(shí)候,忽略了異步加載然而同步加載不停止的問題。深入這個(gè)話題我也還需要去學(xué)去實(shí)踐,所以只是簡單說明我的問題,后面會(huì)提供鏈接去深入學(xué)習(xí)。下面的代碼,由于我沒實(shí)現(xiàn)手機(jī)電腦聯(lián)調(diào),所以只能退而其次用alert測試,見諒。js在加載的時(shí)候,會(huì)先全部同步順序加載,但是ajax請(qǐng)求不會(huì)影響同步加載,因而,會(huì)按照123的alert彈出,而非順序彈出312。由于的我淺薄理解,導(dǎo)致我后面還沒拿到ajax請(qǐng)求到的_config,就開始執(zhí)行函數(shù)DDConfig(_config)配置釘釘,所以一直不彈出任何彈窗。這個(gè)問題我開始解決的方案是將這段ajax單獨(dú)放在一個(gè)script標(biāo)簽里面,最先引入,然后再配置釘釘鑒權(quán)信息,這個(gè)在Android上測試時(shí)正常的,然而只是僥幸,iOS不買這個(gè)賬。所以使用ajax的complete函數(shù),在這里面執(zhí)行DDConfig(_config),可看源代碼。
var _config = null; // 定義全局變量_config,初始值為null,用來接收API獲取到的簽名信息 var getConfig = $.ajax({type: 'POST',url: '獲取企業(yè)簽名的API,后臺(tái)提供',data: {agentId: 109243825,url: '這是你開發(fā)微應(yīng)用頁面的線上地址,一般是由釘釘管理員配置的。',},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('請(qǐng)求信息出錯(cuò)');}},error: function(data){console.log(---error-post-dingInfo---);} }); alert('1. API請(qǐng)求開始:'+JSON.stringify(getConfig)); alert('2. 全局輸出_config:'+JSON.stringify(_config));第二步,這里官方給出很詳細(xì)的步驟釘釘移動(dòng)jsapi開發(fā),你需要使用的api放進(jìn)dd.config的jsApiList里面即可。其實(shí)釘釘?shù)膉sapi思路是這樣的。引入dingtalk.js(官方文檔有提供)這個(gè)js會(huì)給你提供一個(gè)全局變量dd,你可以在Chrome的控制臺(tái)打印出來看看是個(gè)什么東西,里面可以識(shí)別釘釘版本,手機(jī)系統(tǒng),以及提供一個(gè)個(gè)api。釘釘移動(dòng)jsapi里面介紹所有的api,分為無需鑒權(quán)api和需要鑒權(quán)api,無需鑒權(quán)api可以再引入dingtalk.js之后全局使用;鑒權(quán)api就需要走后端接口以保證安全性,且鑒權(quán)通過才可以使用這部分api。思路就是這樣。
- 問題1:如果你發(fā)現(xiàn)你的dd.ready/dd.error都沒執(zhí)行,那可能是我上一步遇見的問題,即沒開始配置dd.config,卻執(zhí)行了dd.ready和dd.error,因?yàn)閐d是全局變量,不受函數(shù)和異步限制,所以寫法上面沒有錯(cuò),但是就是什么都不反應(yīng),很痛苦。還有一個(gè)很粗暴的方法去review你的代碼,那就是清空js代碼,不做ajax請(qǐng)求,直接開始釘釘鑒權(quán),即dd.config、dd.ready、dd.error,這個(gè)時(shí)候你可以先用固定的鑒權(quán)信息(agentId,corpId,timeStamp,nonceStr,signature)去配置,這個(gè)時(shí)候因?yàn)椴皇菍?shí)時(shí)的鑒權(quán)信息,所以肯定要直接進(jìn)dd.error來提示校驗(yàn)失敗,那么你就應(yīng)該知道怎么一點(diǎn)點(diǎn)去排查你的錯(cuò)誤了。
-
問題2:如果你發(fā)現(xiàn)dd.error被執(zhí)行了,先恭喜你一下,至少你進(jìn)入釘釘?shù)腶pi了,哈哈哈哈哈哈哈哈。。。
- 這個(gè)時(shí)候報(bào)錯(cuò),說明你的dd.config里面有信息是錯(cuò)誤的。那就去一個(gè)個(gè)打印出來檢查。
- 還有可能是上一步中的url的問題,比如說我的微應(yīng)用的鏈接是https://open-doc.dingtalk.com/;那么url也必須完全一樣,注意https也不能錯(cuò)的哦。可看前輩們的問題集錦釘釘開放平臺(tái)“常見問題常見問題常見問題
最最最坑
- 這次最大的坑是我對(duì)異步同步的理解不夠到位;
- 說實(shí)話,所有的坑,都還是源于基礎(chǔ)。開篇即說“經(jīng)濟(jì)基礎(chǔ)決定上層建筑”,尤其是技術(shù)上,基礎(chǔ)決定你未來的路可以走多寬多遠(yuǎn)多一馬平川而不至于坑坑洼洼。
推薦知識(shí)
- 官方爸爸
- 釘釘開發(fā)指南-前端全棧入門篇
- 釘釘開放平臺(tái)“常見問題常見問題常見問題
- 釘釘緩存可能引起的調(diào)用JSAPI不成功
- 感謝他們。尤其是第二位大神,提供了很多知識(shí)點(diǎn)可以學(xué)習(xí)。
——好記性不如難筆頭。
總結(jié)
以上是生活随笔為你收集整理的钉钉微应用的开发——主前端的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Elasticsearch之CURL命令
- 下一篇: leetcode || 50、Pow(x