钉钉H5微应用开发常见问题

1,051 阅读3分钟

1、如何将个人人气榜按钮实现如下图(按钮背景色为红色)?

image.png

答:clip-path  使用裁剪的方式创建元素的可见区域,区域外的隐藏。具体实现为:

clip-path: polygon(
        100% 0%,
        100% 100%,
        5% 100%,
        10% 95%,
        15% 78%,
        20% 38%,
        23% 27%,
        25% 24%,
        74% 25%,
        74% 0%
      );

2、app内设定了比赛广告位,如何从app跳到钉钉软件的钉钉群

答:参考 统一跳转协议,通过指定客户端协议实现打开钉钉客户端并跳转至特定URL,在画啦啦少儿美术服务app 中提供了AppH5JSSDK.customizeFunc('openApp', {url:  url})API,是IOS/Android API的封装。

3、H5微应用钉钉底部分享菜单如何在整个应用都保持一致?

答:通过biz.navigation.setRightAPI控制右侧单个按钮及点击行为,在点击事件回调中手动调用biz.util.share API

4、H5微应用域名需要配置公网域名,上线前如何调试?

答:使用内网穿透,市面上常见的解决方案有钉钉pierced花生壳等。

5、用户参赛内容如何把控是否违规?

答:用户填写的姓名、所在地区、学校名称(可自填)需要人工后台审核,此外参赛作品需要阿里云内容安全审核,若审核有异议,需要人工介入二次审核。

6、H5微应用授权URL参数格式乱?

答:钉钉内免等授权时code直接使用?code拼接,即使已有location.search参数,需要手动处理并更新URL;

const newUrl = formatUrl(location.href)
history.replaceState(null, null, newUrl)
 
/**
 * @description: 格式化url,将钉钉赋给URL的?code=**··· 替换为&code=**···
 * @param {string} url 待格式化URL
 * @return {string} 已格式化url
 */
export const formatUrl = url => {
  let newUrl = url.split('?')
  if (newUrl.length > 2) {
    return `${newUrl[0]}?${newUrl[1]}&${newUrl[2]}`
  }
  return url
}

7、如何实现画作上传?

答:app内部使用app API唤起本地相册,然后对API返回base64数据进行文件转换,最终经过压缩后以 阿里云服务端签名直传 的方式将画作上传并获取在线资源URL。若是在微信浏览器等环境中,使用Vant Uploader进行上传。

8、H5微应用进群关注服务窗预约直播等API是什么?

答:H5微应用进群(场景群新增群成员;使用openLink打开群分享的对应链接),关注服务窗(使用openLink打开服务窗的分享链接,未关注时会提示关注),预约直播(使用openLink打开钉钉直播的分享链接进行预约)。

9、用户进群而群满员后怎么处理?

答:群活码。

10、阿里云内容安审核是什么?

答:内容安全基于海量数据样本进行深度学习,提供音视频、图片、文字、网页等多媒体的内容风险智能识别和审核服务,帮助用户发现色情、暴恐、政治敏感、未成年敏感等风险内容,大幅度降低人工审核成本。它提供了服务端 SDK API及可视化的控制台,画作审核已接入。 

11、钉钉如何区分分享好友还是钉钉群,是否分享成功?

答:暂时无法区分,只能监听是否成功调起分享组件。

12、钉钉群的快捷栏怎么设置?

答:参考 场景群-群插件

13、钉钉机器人怎么个性化提醒进群?

答:通过钉钉事件订阅订阅群会话事件,在用户进入群聊的时候,向用户发送欢迎等信息,类似官方机器人小钉的「新人欢迎」技能。

14、项目做了哪些优化?答:

  • 钉钉授权加入阈值机制,连续3次授权后不再继续授权,除非刷新页面;
  • 钉钉授权后URL格式化;
  • 排行榜中画作使用缩略图;
  • 排行榜使用滚动延迟加载;
  • 组件及图片使用按需加载;
  • 丰富router.push 自动携带当前URL 参数;
  • 业务组件的封装与抽离;
  • 内网穿透解决方案;