Vue开发钉钉H5微应用踩坑 ReferenceError: dd is not defined

2024-02-27 14:21| 来源: 网络整理| 查看: 265

官方地址：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)); } }); }); 目前只发现这两种解决方案，如果有更好的解决方案，欢迎在文章下面留言

【本文地址】

公司简介

联系我们