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));
       }
     });
   });
   

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