关于vue 所开发的钉钉 H5 微应用中, dd.ready() 不执行的解决方案

最近在做钉钉的免登,npm 安装好 dingtalk-jsapi 后,执行 dd.ready()怎么都不生效。但是判断当前环境是不是 ‘notInDingTalk’ 时又是有效的。花了很长时间,一直找不到原因。后来无意中发现别人的代码似乎跟我有一点差异,于是抱着死马当活马医的心态试试,结果真的有效。
废话不多说,原因在于从官网复制的代码里 的匿名函数function(){},在vue开发里是无效的,需要改成 箭头函数 () =>{}
修改之前的:
修改之前
这个 ‘this.userCode’ 是临时修改成用于测试有没有进入 dd.ready() 的,不要在意这些细节。
如果正常的话,this.userCode 应该显示 :“开始执行ready 进入了钉钉 获取授权码成功”
但是实际上只显示了:“开始执行ready“
修改后:
修改后
终于如愿显示授权码了:
在这里插入图片描述
贴上代码:

 if (dd.env.platform !== "notInDingTalk") {
            this.userCode += '开始执行ready ';
            //进行钉钉登录操作
            dd.ready(() => {
              this.$Message.info('1')
              this.userCode = '进入了钉钉 ';
              dd.runtime.permission.requestAuthCode({
                corpId: corpId, // 企业id
                onSuccess: (info) => {
                  //todo: 测试获取授权码
                  this.userCode += " 获取授权码成功 ";
                  this.userCode += info.code // 通过该免登授权码可以获取用户身份
                },
                onFail: (error) => {
                  this.userCode += " 获取授权码失败 ";
                  console.log('好吧,问题不小')
                  this.$Message.error(JSON.stringify(error))
                }
              });
            });
要在Vue中实现钉钉免密登录获取用户信息,你可以按照以下步骤进行操作: 1. 引用中的代码示例,首先在Vue组件中引入钉钉的JSAPI库,并定义一个函数`dingding_no_login`来处理钉钉免登录的逻辑。 2. 使用`dd.ready`方法来确保钉钉环境准备就绪后,调用`dd.runtime.permission.requestAuthCode`方法获取免登授权码。在`onSuccess`回调中,可以通过`info.code`获取到免登授权码。 3. 将免登授权码发送给后端接口进行验证,并获取用户信息。可以使用`await`关键字来等待后端接口返回结果。 4. 在获取到用户信息后,可以进行相应的跳转或保存用户信息的操作。 以下是一个示例代码,展示了如何在Vue中实现钉钉免密登录获取用户信息: ```javascript import * as dd from 'dingtalk-jsapi' export default { methods: { async dingding_no_login() { if (dd.env.platform != 'notInDingTalk') { dd.ready(async () => { dd.runtime.permission.requestAuthCode({ corpId: "企业id", onSuccess: async (info) => { const res = await dingdingNoLogin({ code: info.code }) // 进行跳转或保存token的操作 } }); }); } } }, mounted() { this.dingding_no_login(); } } ``` 注意替换代码中的"企业id"为你的实际企业id。同时,你需要根据实际需求进行相应的跳转或保存用户信息的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [前端vue 钉钉内部使用公司内部系统免登录 应用免登录](https://blog.csdn.net/weixin_64064327/article/details/125711817)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [钉钉 基于vue开发h5应用,免登录获取用户信息](https://blog.csdn.net/weixin_40079913/article/details/120198601)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值