无声2017的博客

Appearance

钉钉H5微应用开发 ​

项目概述 ​

1. 背景 ​

6月中旬入职杭州一家政企合作单位单位，从零开发一个 H5 会议室排座系统。至8月初完成基本功能后，需要开发一个移动端用于管理。本项目开发方式采用企业内部开发，本文主阐述前端部分的内容。

2 .技术栈 ​

Vue 全家桶 + VantUI

准备工作 ​

确保已经完成钉钉开发者的注册与激活并拥有了子管理员和开发者权限。若尚未完成，请参考成为钉钉开发者。

H5微应用与小程序的异同之处 ​

一开始纠结是做小程序还是 H5 微应用，我去网上查找资料找到下面这张图。条件充足的话更加推荐小程序开发，体验更好，有专门的 IDE，调试也方便。而我之所以选择 H5 微应用开发的原因是开发周期短，小程序开发经验不足。

APP、小程序、H5 三者比较

项目构建 ​

由于是我个人构建，所以我不怕死地选择 Vue3，不得不说 Vite 热更新是真的快。另外这边强烈推荐去看《从 0 开始手把手带你搭建一套规范的 Vue3.x 项目工程环境》，这篇文章对我起了很大的帮助。项目构建好之后就可以打包丢到服务器上了，之后测试要用。

创建微应用以及发布 ​

这部分内容钉钉开放平台教程足够详细，主要看创建应用及发布 H5 微应用。

另外，如果要在 PC 上进行使用的话，开发管理 > PC端首页地址也要填。

踩坑 ​

尽管我查找资料发现使用钉钉用的是 webkit 内核，但是总有奇奇怪怪的表现。

  1. svg 图片无法显示。
  2. 不要使用 rem 作为单位，浏览器中正常的页面到 H5 微应用中会乱（这也可能是由于我使用自适应 REM 布局的关系）。
  3. 顶部导航栏始终存在，仅在通过 JSAPI 进行旋转屏幕时会隐藏。正常状态下仅能设置标题以及左右按钮，在 UI 设计时要和提前沟通好。
  4. 不要使用外部字体资源，加载速度非常之慢。

关于调试 ​

钉钉 H5 微应用调试真是心累，所以再强调一次有条件选择小程序开发，详情可见微应用调试工具。

简单来说，共两个调试工具，RC 版和网页版，RC 版调试包如下：

微应用Android/WindowsiOS/Mac
移动端微应用调试Android调试包: https://download.alicdn.com/wireless/dingtalk/latest/rimet_10006337.apk暂无
PC端微应用调试Windows调试包：https://download.alicdn.com/dingtalk-desktop/win_installer/RC/DingTalk_v5.5.5-RC.5605.exe暂无

这里有个问题，我下载安卓的调试包无法安装，不知道是因为一加手机还是安卓11的缘故。Windows 的调试包可以用，功能类似Chrome devtools，但是移动端的 JSAPI 无法调试,Chrome devtools 同样地因为缺乏 Dingtalk 的环境而无法调试 API。

RC 安卓版安装失败

网页版可能可以解决移动端调试的问题，官方人员好像也只推荐这种方法进行调试，具体我在使用过后再更新。

Ding JSAPI ​

在进行开发之前，可以先在 JSAPI Explorer 体验前端 JSAPI 功能。

对于一些钉钉业务、安全相关的JSAPI的调用，需要先鉴权，然后再调用。如果只是用调用手机的基础能力是无需进行鉴权相关配置的，建议需要时再配置鉴权。

下面将讲述如何在 Vue 中配置并使用 JSAPI，并以设置导航栏右侧按钮为例。

1.使用npm安装 ​

bash
npm install dingtalk-jsapi --save

2.main挂载 ​

js
// Vue3写法，Vue2 直接挂载到原型链我想应该也是可以的
import dd from 'dingtalk-jsapi';
app.config.globalProperties.$dd = dd;

3.页面中调用 ​

js
const THIS = this
    if (this.$dd.env.platform !== "notInDingTalk") {
      this.$dd.biz.navigation.setRight({
        show: true,
        control: true,
        text: "测试",
        onSuccess: function () {
          // 调用成功时回调
          THIS.xxx
        },
      });
    }

由于设置导航栏只有在钉钉移动端环境中才能使用，加上this.$dd.env.platform !== "notInDingTalk"判断防止报错。Vue3 中 setup() 调用写法如下：

js
import { getCurrentInstance } from 'vue'
setup(){
    const { proxy } = getCurrentInstance()
    if (proxy.$dd.env.platform !== "notInDingTalk") {
      proxy.$dd.biz.navigation.setRight({
        show: true,
        control: true,
        text: "测试",
        onSuccess: function (res) {
          // 调用成功时回调
        }
      })
    }
}

这里不要使用 ctx ，否则在生产环境中的指向会错误。

总结 ​

H5 微应用适合跨平台，开发周期短，开发者缺少小程序开发经验的情况下使用。另外关于 JSAPI 的使用方法，我会在之后进行更新。

Copyright © 2022-present 无声2017