官方地址:https://ding-doc.dingtalk.com/doc#/dev/welcome-to-lark
问题描述
按照官方提供的npm方式开发,根据提示进行npm install dingtalk-jsapi --save后,
并在main.js中引入import * as dd from ‘dingtalk-jsapi’;,
在login.vue中调用JSAPI组件,一直报错ReferenceError: dd is not defined
问题原因
dingtalk-jsapi插件没有将模块export default
解决方案 1
不要在main.js中引入,在需要调用JSAPI组件的.vue文件中引入 例如login.vue
// 示例( login.vue文件 )
import * as dd from 'dingtalk-jsapi';
export default {
data() {
return {
code: ""
};
},
mounted() {
console.log(dd.env.platform);
var _that = this;
dd.ready(() => {
dd.runtime.permission.requestAuthCode({
corpId: _that.$store.getters.corpId, // 企业id
onSuccess: function(info) {
_that.code = info.code; // 通过该免登授权码可以获取用户身份
},
onFail: function(err) {
_that.$toast(JSON.stringify(err));
}
});
});
},
methods: {
// ......
}
};
解决方案 2
- 在main.js文件中引入后,添加实例prototype
// 示例( main.js文件 ) import * as dd from 'dingtalk-jsapi'; Vue.prototype.$dd = dd;
- 在后续的使用不要用dd.###,而是用this.$dd
// 示例( login.vue文件 ) console.log(this.$dd.env.platform); var _that = this; this.$dd.ready(() => { this.$dd.runtime.permission.requestAuthCode({ corpId: _that.$store.getters.corpId, // 企业id onSuccess: function(info) { _that.code = info.code; // 通过该免登授权码可以获取用户身份 }, onFail: function(err) { _that.$toast(JSON.stringify(err)); } }); });