钉钉微应用怎么进入_钉钉微应用 开发体验及心得

开始调研

主要还是看钉钉的官方文档和论坛，钉钉推荐使用saltUI和saltRouter进行开发微应用，但是看了这2个东西的源码后，感觉没封装什么东西，主要的功能还是集中在钉钉的dingtalk.js中，所以个人认为没必要用它推荐的这2个东西。

框架选择

作为一个vue的忠实粉丝，这次也肯定想用vue进行开发，考虑到vue2.0还没有很好的移动端UI框架，所以这次试用了更成熟的vue1.0的ui框架vux,然后微应用其实对应用状态管理的要求还是比较高的，所以也用了vuex来管理应用状态。

微应用流程

我们使用的是免登陆流程如下

它的入口网页会自动传appid,corpid,suiteKey这3个参数在url上面，通过这3个参数去自己的服务器获取到dd.config需要用的参数.

然后在dd.ready中设置和获取一些全局的钉钉属性，比如 设置左上角返回键的回调，获取容器的版本信息(用来判断能不能调用某些jsapi)

再初始化vue，配置vue插件什么的

最后判断js.config是否成功，然后dispath到vuex中

代码详解

对比上面流程的1. 2. 3. 4. 的代码

getConfig() //1.通过url上的3个参数，获取自己服务器上的配置信息

.then((data)=>{

ddConfig = data;

dd.config(ddConfig); //1.初始化钉钉的jssdk

})

.then(ddIsReady) //2.做一些钉钉的全局设置

.then(initVue) //3.初始化vue

.then(()=>{

document.querySelector('#init-loading').remove(); //移除加载动画

console.log('init vue 完成')

setTimeout(()=>{

if(ddConfig != null){

commit('DDCONFIG_SUCCESS', ddConfig) //4.通知vuex改变应用功能状态

}else{

commit('DDCONFIG_ERROR', false); //4.通知vuex改变应用功能状态

}

},300)

})

getConfig

function getConfig() {

return Q.Promise((success, error)=>{

axios.get(env.API_HOST+'/auth/getConfig', {

params: {

corpid: getParamByName('corpid')||'',

appid: getParamByName('appid')||'',

suitekey: getParamByName('suiteKey')||'',

paramUrl: document.URL

},

timeout: 2000,

}).then(function (response) {

if(response.status == 200 && response.data.code == 200){<