日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

钉钉微应用的开发——主前端

發布時間:2025/3/20 HTML 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 钉钉微应用的开发——主前端 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
經濟基礎決定上層建筑。

開發環境

  • Chrome Latest Version
  • iOS釘釘最新版、Android釘釘開發最新版
  • 其實我一直想實現電腦Chrome可以調試手機內部APP,苦于嘗試多次沒有成功,所以還是電腦和手機同時測試,為了開發時間,只能先委屈一下自己了。因為舒適的測試環境也是開發的一個重要先決條件。

開發目的

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

開發進度

  • 頁面布局、樣式按下不表。
  • 頁面需要后端人員接進釘釘頁面,即進度從打開釘釘微應用能夠進來這個頁面開始。

開發思路

  • 首先,借用公司的agentId和微應用的url(一般由你司企業釘釘管理員提供)通過后臺提供的API接口獲取到實時的鑒權信息(agentId,corpId,timeStamp,nonceStr,signature);
  • 然后,用這個鑒權信息區配置釘釘api接口的dd.config,然后去操作釘釘部分需要安全鑒定的api;
  • 之后,用釘釘api的biz.user.get獲取用戶信息;
  • (題外)免登需要dd.runtime.permission.requestAuthCode先獲取authCode,然后去請求后臺提供的API,由后臺返回更加安全的用戶信息;
  • 最后,拿到用戶信息之后,將nickname賦值進輸入框,然后提交給后臺即可。
  • 嘿嘿,借用官方爸爸的微應用開發思路圖,真的很一目了然,從五個鑒權信息開始都是前端的操作了哦。

    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也不能錯的哦。可看前輩們的問題集錦釘釘開放平臺“常見問題常見問題常見問題
  • 第三步,應該不用說了,只要鑒權通過,就可以直接用釘釘api獲取用戶的信息,只是這個信息很簡單,不怎么涉及安全問題。可看源碼。
  • 第四步,題外話。這個免登,是需要你在通過釘釘api拿到authcode之后再去找后端API請求,告訴他你需要免登獲取更多用戶的信息釘釘免登,這些都是涉及到安全性的了,所有涉及安全的問題都要走后端API。這個我也沒做,暫時還沒用到,以后若是開發有坑還會繼續說。釘釘的生態說不上很穩定,但是由于公司用的多,所以很多東西不管是官方還是前輩們都寫的有詳細文檔和代碼,可以多搜搜。
  • 提交操作,可看源碼。
  • 最最最坑

    • 這次最大的坑是我對異步同步的理解不夠到位;
    • 說實話,所有的坑,都還是源于基礎。開篇即說“經濟基礎決定上層建筑”,尤其是技術上,基礎決定你未來的路可以走多寬多遠多一馬平川而不至于坑坑洼洼。

    推薦知識

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

    ——好記性不如難筆頭。

    總結

    以上是生活随笔為你收集整理的钉钉微应用的开发——主前端的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。