前端指标 - koubei-fe/koubei-antdm-init GitHub Wiki

性能

https://design.koubei.com/docs/merchant-app?p1=h5quality&type=developer

JS API 适配

口碑掌柜：https://design.koubei.com/docs/merchant-app?p1=jsapi&p2=index&type=developer

钉钉： https://open-doc.dingtalk.com/docs/doc.htm?spm=0.0.0.0.QWOaAT&treeId=171&articleId=104906&docType=1

Demo：

const isAlipay = /alipay/i.test(navigator.userAgent);
const isDing = /dingtalk/i.test(navigator.userAgent);

if (isAlipay) {
  kb.hideLoading();
} else if (isDing) {
   dd.device.notification.hidePreloader();
}

钉钉里面调用 JS API 需要在 dd.ready(readyCallback) 执行后;

页面转场

多页面之间的切换，统一采用 pushWindow/openLink 方式。

页面内嵌 iframe 页面高度同步

子页面在页面加载完成后，需要通过 postMessage 将页面高度通知到父页面。

window.parent.postMessage({"pageHeight": pageHeight}, '*'); 

页面内嵌 bridge 方法调用

window.parent.postMessage({
  type: 'bridge',
  method: 'pushWindow',
  params: ['http://alipay.net'],
}, '*');

window.parent.postMessage({
  type: 'bridge',
  method: 'toast',
  params: ['toast文字'],
}, '*');

window.parent.postMessage({
  type: 'bridge',
  method: 'showLoading',
  params: [],
}, '*');

window.parent.postMessage({
  type: 'bridge',
  method: 'hideLoading',
  params: [],
}, '*’);

钉钉端禁止 iframe 第三方cookie 问题解决方案

由于钉钉端 WebView 对第三方 Cookie 的限制，使用 iframe 内嵌页面，会导致页面登录授权后，设置 Cookie 失效，后续的 HTTP 请求都不能带 Cookie。

钉钉计划将 WebView 的第三方Cookie限制放开，但是依赖钉钉客户端的发版，需要3至5个月的更新。

所以放弃通过 Cookie 存储会话信息，改为通过 URL 传递 SessionID 信息。