[2020-11-03]: 钉钉微应用前端开发总结

[Lemonreds]

什么是微应用

本质上我们是开发一组H5移动端web应用，当使用钉钉App(android,iOS)打开时，前端可以通过官方提供的js库dingtalk-jsapi来调用钉钉App的能力，例如，可以使用钉钉的通讯录选人功能、可以使用钉钉的发钉功能、可以修改钉钉打开我们应用的webview导航栏，以及一些手机的基础能力等，这个js库是通过与桥接的方式来和钉钉App通信的，我们不用关心其内部实现逻辑，直接调用所需的api，来满足我们的业务开发即可。

代码示例

例如修改钉钉打开我们应用的webview导航栏：

import * as dd from 'dingtalk-jsapi'; // 引入该库 像其他的库一样
dd.biz.navigation.setTitle({
    title : 'hello world.',
    onSuccess : function(result) {},
    onFail : function(err) {}
});

通过onSuccess，onFail的回调约定来判断调用状态，dingtalk-jsapi 实际上是支持promise回调的（参见npm包地址中的readme），即

dd.biz.navigation.setTitle(params).then(
   result=>{},
   err=>{},
)

使用哪种回调风格看个人喜欢，调用部分能力需要鉴权，例如涉及到钉钉业务、组织相关的能力，都需要先鉴权后使用，鉴权部分需要后端配合完成。

相关资源

• npm包地址：
  https://www.npmjs.com/package/dingtalk-jsapi
• 钉钉开发文档：
  https://ding-doc.dingtalk.com/doc#/dev/welcome-to-lark
• 钉钉能力在线调试：
  https://wsdebug.dingtalk.com/å

调试相关

首先建议，优先使用PC端来调试我们的应用，不得已或者是用到钉钉能力的时候，才用钉钉app来调试 。同时，如果一些功能能单独实现，不一定非要通过钉钉能力的话，就单独实现，避免过多使用钉钉能力，钉钉能力调试起来会比较麻烦，问题也比较难处理，能规避就规避。比如显示一个loading，就完全没必要调用钉钉的能力。
在PC端调试的时候，如果有代码使用到了dingtalk-jsapi的库，控制台会报错的，因为当前的运行环境不是钉钉webview，可以通过以下代码规避这种类型的错误，快乐地调试pc页面：

import * as dd from 'dingtalk-jsapi';
if(dd.env.platform != 'notInDingTalk'){
	dd.ready(()=>{
		// dd.xxxxx 调用能力的部分
	})
}

其次，手机webview没有像pc端控制台那么好用的工具了，如果需要在手机上使用类似的控制台调试功能，可以使用以下的两个工具：
https://github.com/Tencent/vConsole
https://github.com/liriliri/eruda

以下是手机钉钉app来调试我们应用的方法，一般在调试钉钉能力的时候可以用：

方式1，使用内网穿透工具：

我们开发的时候，应用会运行在本地任一端口，例如：localhost:8080，因为网络不同的原因，手机钉钉app不能直接访问到本地开发的地址。可以通过内网穿透工具，拿到一个公网的域名，映射到我们本地的开发地址。钉钉提供了一个这样的工具(基于ngrock)，我们可以直接使用
https://ding-doc.dingtalk.com/doc#/kn6zg7/hb7000

按照文档正确启动后，手机钉钉打开地址
http://xxxxx.vaiwan.com/ 会直接映射到我们本地的localhost:8080，如果是开发其他的h5应用，需要用真机浏览器打开的话，也可以用这个工具....

方式2，电脑连接安卓手机，真机调试：
手机上需用安装钉钉提供的apk包，通过chrome来支持，使用方式参见文档：
https://ding-doc.dingtalk.com/doc#/kn6zg7/qg4y64/dPXtB
电脑模拟器也是可以的，如夜神模拟器、网易mumu模拟器或者genymotion;

开发相关

antd-mobile这个库是没有类似antd的Form实现的，开发中如果涉及到了表单的，可以尝试用以下的解决办法：
实际上不管是移动端还是pc端，表单的业务逻辑是一致的。我们可以直接使用antd4的表单依赖库rc-field-form，它帮助我们处理数据绑定、校验等逻辑。实际开发中，我们可以通过对rc-fileld-form再包装一层，来统一设计稿表单字段、表单域、表单校验提示等样式。

rc-field-form：
https://www.npmjs.com/package/rc-field-form

坑

• 部分机型上，部分cookie（实际上前端是拿到了）发送给后端，后端无法取到。
  检查下cookie的签发响应头set-cookie是否设置了SameSite属性，第三方发回cookie，同时又带上了SameSite，钉钉部分Webview会执行这个规则，导致一些cookie不被发出，需要后端修改这个cookie的SameSite。
  https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite
  http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html

• 使用到一些权限的时候，报错52013
  这个问题待研究，极有可能是因为鉴权时url和页面当前的url不一致。