钉钉小程序开放接口API在taro3上无法正确识别平台 dingtalk-jsapi cannot detect correct platform on taro3

[DevanXU]

相关平台

支付宝小程序

复现仓库

https://github.com/DevanXU/dingtalk-jsapi-taro3
小程序基础库: dingtalk/SDKVersion: 1.24.8
使用框架: React

复现步骤

1. 初始化工程 taro init dingtalk-jsapi-taro3
2. 安装dingtalk-jsapi包：yarn add dingtalk-jsapi
3. 在/pages/index/index.tsx页面中引入dingtalk-jsapi包，并在componentDidMount打印平台信息:
   console.log('env:', dingtalk.env.platform)

期望结果

/pages/index/index.tsx打印出的信息应该显示正确的平台信息, e.g. "ios".

实际结果

/pages/index/index.tsx 打印出 "notInDingtalk"

环境信息

Taro CLI 3.0.24 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
    npmPackages:
      @tarojs/components: 3.0.27 => 3.0.27 
      @tarojs/mini-runner: 3.0.27 => 3.0.27 
      @tarojs/react: 3.0.27 => 3.0.27 
      @tarojs/runtime: 3.0.27 => 3.0.27 
      @tarojs/taro: 3.0.27 => 3.0.27 
      @tarojs/webpack-runner: 3.0.27 => 3.0.27 
      babel-preset-taro: 3.0.27 => 3.0.27 
      eslint-config-taro: 3.0.27 => 3.0.27 
      react: ^17.0.1 => 17.0.1 

---

补充信息

在taro 1.3版本上可以打印出正确的平台信息

[DevanXU]

taro 1.3 版本正确工作的版本：https://github.com/DevanXU/dingtalk-jsapi-taro1.3

[Chen-jj]

这个包没有源码不好调试，可以问问这个包的作者，或者再调试一下。

[DevanXU]

你这边会再跟进调试一下是吗？

[DevanXU]

Taro对navigator对象进行了重写，导致dingtalk-jsapi对环境的判定不准。文件在dist/taro.js，关键部分代码如下：

// dist/taro.js ~L6072
var document$1 = isBrowser ? doc : createDocument();
var machine = 'Macintosh';
var arch = 'Intel Mac OS X 10_14_5';
var engine = 'AppleWebKit/534.36 (KHTML, like Gecko) NodeJS/v4.1.0 Chrome/76.0.3809.132 Safari/534.36';
var navigator = isBrowser ? win.navigator : {
  appCodeName: 'Mozilla',
  appName: 'Netscape',
  appVersion: '5.0 (' + machine + '; ' + arch + ') ' + engine,
  cookieEnabled: true,
  mimeTypes: [],
  onLine: true,
  platform: 'MacIntel',
  plugins: [],
  product: 'Taro',
  productSub: '20030107',
  userAgent: 'Mozilla/5.0 (' + machine + '; ' + arch + ') ' + engine,
  vendor: 'Joyent',
  vendorSub: ''
}; // https://github.com/myrne/performance-now

这是钉钉官方的回复。
请问这个问题是否可以解决？谢谢！

[Chen-jj]

的确 Taro3 会模拟浏览器的 BOM API，包括模拟实现了 window.navigator ，他们的判断逻辑是怎样的。

[DevanXU]

他们没有提供进一步的信息。
我们在taro1.3上引入dingtalk-jsapi是可以正常工作的，可以参考一下taro1.3的做法？

[Chen-jj]

1.x 和 3.x 的实现是完全不一样的，不存在能否参考做法一说，只能根据他们的具体实现，看看有没有解决办法。，

[DevanXU]

“这个没有具体的信息可以提供
可以查看node_modules/dingtalk-jsapi里的代码实现” —— 最新回复

咱们这边跟钉钉平台有什么渠道可以沟通吗？碰到这种跟两边都有关联的问题时，通过我们来沟通效率会比较低。要在钉钉平台上开发应用 dingtalk-jsapi 这个包是绕不过去的。

[taiost]

的确 Taro3 会模拟浏览器的 BOM API，包括模拟实现了 window.navigator ，他们的判断逻辑是怎样的。

dingtalk-jsapi的判断逻辑是：

ua = navigator && navigator.userAgent;
isInIOSEquipment = (/iPhone|iPad|iPod|iOS/i).test(ua);
isInAndroidEquipment = (/Android/i).test(ua);
isDingTalkRuntime = (/DingTalk/i).test(ua);

如果是Android：isDingTalkRuntime&&isInAndroidEquipment ===true
如果是ios：isDingTalkRuntime&&isInIOSEquipment === true
钉钉小程序中也存在全局变量navigator；

而taro生成的目标文件taro.js，在小程序中重新了navigator：
var navigator = isBrowser ? win.navigator : {
appCodeName: 'Mozilla',
appName: 'Netscape',
appVersion: '5.0 (' + machine + '; ' + arch + ') ' + engine,
cookieEnabled: true,
mimeTypes: [],
onLine: true,
platform: 'MacIntel',
plugins: [],
product: 'Taro',
productSub: '20030107',
userAgent: 'Mozilla/5.0 (' + machine + '; ' + arch + ') ' + engine,
vendor: 'Joyent',
vendorSub: ''
};
导致判断出错！

这里是不是可以判断如果已经有window.navigator 就不要赋后面那个值，直接用window.navigator就好了

[DevanXU]

的确 Taro3 会模拟浏览器的 BOM API，包括模拟实现了 window.navigator ，他们的判断逻辑是怎样的。

dingtalk-jsapi的判断逻辑是：

ua = navigator && navigator.userAgent;
isInIOSEquipment = (/iPhone|iPad|iPod|iOS/i).test(ua);
isInAndroidEquipment = (/Android/i).test(ua);
isDingTalkRuntime = (/DingTalk/i).test(ua);

如果是Android：isDingTalkRuntime&&isInAndroidEquipment ===true
如果是ios：isDingTalkRuntime&&isInIOSEquipment === true
钉钉小程序中也存在全局变量navigator；

而taro生成的目标文件taro.js，在小程序中重新了navigator：
var navigator = isBrowser ? win.navigator : {
appCodeName: 'Mozilla',
appName: 'Netscape',
appVersion: '5.0 (' + machine + '; ' + arch + ') ' + engine,
cookieEnabled: true,
mimeTypes: [],
onLine: true,
platform: 'MacIntel',
plugins: [],
product: 'Taro',
productSub: '20030107',
userAgent: 'Mozilla/5.0 (' + machine + '; ' + arch + ') ' + engine,
vendor: 'Joyent',
vendorSub: ''
};
导致判断出错！

这里是不是可以判断如果已经有window.navigator 就不要赋后面那个值，直接用window.navigator就好了

@Chen-jj 以上是来自钉钉团队的回复

[Chen-jj]

@taiost @DevanXU 先试一下使用 webpackchain 把 providePlugin 的参数改一下，navigator 不需要注入：

这样直接引用 navigator 时就是小程序的 navigator，(/iPhone|iPad|iPod|iOS/i).test(ua); 正则也过了。但是我这边 dingtalk.env.platform 还是 notInDingTalk。老哥你们再看看咯

[Chen-jj]

@taiost @DevanXU 先试一下使用 webpackchain 把 providePlugin 的参数改一下，navigator 不需要注入：

这样直接引用 navigator 时就是小程序的 navigator，(/iPhone|iPad|iPod|iOS/i).test(ua); 正则也过了。但是我这边 dingtalk.env.platform 还是 notInDingTalk。老哥你们再看看咯

把开发者工具环境切为钉钉就可以了，我们改下支付宝环境的 providePlugin 吧，下个版本生效。

[DevanXU]

我把工程下的@tarojs/taro包升级到3.1.3（yarn add @tarojs/[email protected]），编译运行结果还是一样的问题。
除了升级@tarojs/taro包外，还需要配套做其它改动吗？

[DevanXU]

我把工程下的@tarojs/taro包升级到3.1.3（yarn add @tarojs/[email protected]），编译运行结果还是一样的问题。
除了升级@tarojs/taro包外，还需要配套做其它改动吗？

@Chen-jj

[Chen-jj]

@DevanXU CLI 、所有 Taro 相关依赖的版本要一致