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

官方地址: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

  1. main.js文件中引入后,添加实例prototype
    // 示例( main.js文件 )
    
    import * as dd from 'dingtalk-jsapi';
    
    Vue.prototype.$dd = dd;
    
  2. 在后续的使用不要用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));
        }
      });
    });
    

目前只发现这两种解决方案,如果有更好的解决方案,欢迎在文章下面留言

你可能感兴趣的:(Vue,vue)