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

经济基础决定上层建筑。

---

开发环境

• 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不成功
• 感谢他们。尤为是第二位大神，提供了不少知识点能够学习。

---

——好记性不如难笔头。