Overview

H5 app JSAPI provides applications with the original capabilities of calling the client, helping developers to efficiently use camera systems, positioning and other cellphone system. Meanwhile,H5 app also brings you wonderful experience by directly usingDingTalk’s unique business capabilities including scanning, sharing, and address book. This chapter introduces how developers should use the DingTalk JSAPI to develop H5 app.

Installation

Install with NPM

We provide 2 ways to use the DingTalk JSAPI, which can be used according to your own development environment.

npm install --save gdt-jsapi
# or
yarn add gdt-jsapi

Code example:

import alert from "gdt-jsapi/alert";
alert({
    message: "hello word!"
});
// or
import dd from 'gdt-jsapi';
dd.alert({ message: 'hello world!' });

Import with CDN

Use “script” and “link” tags to directly import files in the browser, and use the global variable dd.

:::info Note: The script needs to be imported before being called, and it is recommended to place it in the “head” tag. :::

<script src="https://g.alicdn.com/gdt/jsapi/1.9.12/index.js"></script>

How to use

DingTalk provides a JSAPI debugging page for developers to experience the JSAPI functions provided by the client before development. The experience method is as follows: “The developer opens the JSAPI debugging page”－“Open DingTalk mobile terminal”-uses theDingTalk scan function to scan QR code of the debugging page, and fill in the required parameters for the API to experience

After importing through the ESM or CDN, you can directly call it in the following way.

If the JSAPI needs to be called when the page is initialized, it needs to be called in dd.ready.

dd.ready(function () {
  dd.confirm({
    message: "2022年亚运会在哪里举办",
    title: "提问",
    buttonLabels: ["杭州", "上海"],
  })
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.error(err);
    });
});

:::danger Certain business and security-related interfaces of the DingTalk require authentication before use. :::

• Please check the JSAPI Overview To see whether JSAPI requires authentication.
• Please check JSAPI authentication for the JSAPI authentication process.

Scan code instantly for Preview(scan it by DingTalk)

Global error code

Component Library

In order to facilitate developers to quickly develop PC applications, we provide “Fusion”component library in DingTalk, which is a set of basic style libraries, including forms, basic components, operation feedback, navigation-related and search-related content. It can satisfy most PC application scenarios. Please check here for more introduction.

“Fusion” components enjoy the following advantages:

1. Maintain a consistent visual effect in DingTalk.
2. They’re Convenient, quick to use, and cost-effective for development and design.
3. Strongcomponent development tools of business.
4. Based on Design Token, DesignTokenboasts strong capabilities of custom configuration.
5. They’re exquisitely crafted with clear and concise arrangement.