DingTalk Mini Program Development Practice

(1) Features of Mobile Web
The applications developed by the DingTalk applet are widely distributed. Here are four commonly used DingTalk applet programs: DingTalk voting, image sharing, and custom platform integrated into the DingTalk client and attendance check-in.

Compared with desktop devices, the characteristics of mobile web are reflected in the following three aspects: Small screen desktop devices: use large-size screens, 14 inches to 27 inches or more, can display a large amount of content at one time; mobile devices: the viewing area is smaller than that of PC devices There are many, and the content that can be displayed is limited; Light-scene desktop devices: Benefiting from the large screen and high performance, complex rendering, and interaction can be performed; Mobile devices: Limited by screen size and battery capacity, highlighting mobile and portability; low-performance desktops Devices: powered by external power sources, not limited by energy consumption, and capable of high-performance computing; Mobile devices: self-contained batteries, limited by battery capacity, and not suitable for tasks with high power consumption; The advantage is mobility and portability.

By comparing desktop devices, the characteristics of the mobile web are reflected in the following three aspects:

Small screen

Desktop equipment: use a large screen, 14 inches to 27 inches or more, which can display a large amount of content at one time;
Mobile devices: The visual area is much smaller than that of PC devices, and the content that can be displayed is limited;

Light scene

Desktop devices: Benefiting from the features of large screen and high performance, complex rendering and interaction can be performed;
Mobile devices: limited by screen size and battery capacity, highlighting mobile and portability;

Low performance

Desktop devices: powered by external power sources, not limited by power consumption, and capable of high-performance computing; mobile devices: self-contained batteries, limited by battery capacity, and not suitable for tasks with high power consumption; The advantage is mobility and portability.
(2) Advantages of Mini Programs
Applet framework

Small programs also belong to the category of the mobile web. They stand on the shoulders of mobile web and make mobile web development closer to the experience and performance of native applications. This feature is reflected in the framework of small programs. The applet framework is mainly divided into a logic layer and a view layer (see the figure below). In the logic layer, different pages run in the same logic layer, while in the view layer each page exists independently, which is closer to the performance of native applications in terms of architecture. DingTalk client is a standard native application.

Performance improvement, native application experience

In terms of performance and experience, Mini Programs will use native implementations for common interactive functions (such as routing and sharing classes), so that Mini Programs have the embodiment of native applications, which are consistent with native applications in terms of interactive performance, and technical development. Use mobile web development technologies such as JS, CSS.

Out of the box, improve development efficiency

The Mini Program provides the Mini Program DSL, which greatly simplifies the H5 development standard on the mobile website on the label. Although it is not as free as the H5 development standard, the Mini Program lowers the learning threshold to a certain extent. For example, the loading performance of the first screen is a problem often encountered in mobile web development, and the applet directly solves this problem in the framework. The resource loading only occurs when the applet is started for the first time. After loading, the resources will be stored Locally, when you start the applet again, you don't need to load it again, and it can start in seconds so that the loading performance of the first screen can be well experienced in the applet.

Data Security

Separation of logic and rendering: The applet separates the logic layer and the rendering layer in the framework, so the JS of the logic layer cannot operate and tamper with the DOM display;
Code scanning: code scanning on the shelves to eliminate malicious code;
Domain name management and control: network whitelist control, data can only be exchanged with designated sites.

Available offline
Offline availability is the biggest difference between an applet and mobile web applications. The applet delivers resources to the client through the offline package, so it is still available in offline or weak network scenarios.
(3) Principles of Mini Program Development
There are three principles for small program development:

Less content: highlight key information instead of pursuing omnipotence;
Light interaction: reduce complex interactions, emphasize display, and light interaction;
Small application: The function of the application is clear, and it is ready to go. For example, the Didi client provides a driver version and a user version, which effectively isolates the functions.
Therefore, the development of small programs should give full play to the advantages of mobile portability, complement the desktop web, and show their strengths.
(4) Small program development practice
Development preparation
Enter the DingTalk development platform ( http://open.dingtalk.com)

Click "Developer Documentation" - "App Development" - "Client" - "Mini Program Development Tools";

Download the Mini Program Development Tool IDE, then go back to the homepage of Dingding Development Platform and enter the "Developer Background" to create a Mini Program application, and fill in the application name, description, and logo image.

Develop applications

Add a scenario-based capability package: Enter the open capability library to add a capability package and associate it with the current application;
Configuration development management: complete the application access address configuration;
Manage interface permissions: select the interface required for development;

Publish the app

Improve application information: update the application name and icon to make it more recognizable;
Manage version and release: Compile and upload the version in the Mini Program IDE, set the available scope of the application in the developer background, and publish it.

IDE usage example:

Reference documentation: https://open.dingtalk.com/document/orgapp-client/mini-program-development-tools
After opening the IDE, choose to create a new project or open a project (such as an existing project or Demo), and choose the type of application to be developed:
If you are writing applet code for the first time, you can use the "Component/API Example" template we provide to create a project;
Click Next to fill in the project name and project path, and then click Finish;
Open the project, it will enter the code editing mode by default. From left to right, there are file operation area, code editing area, and preview area;
Edit the code and perform local debugging;
To release the version, click the "Upload" button in the upper right corner of the developer tools.

Selection of applet application type

The following lists the common problems in the selection, startup, authentication, release and stability of the development link.
Selection of Mini Program Application Types
Third-party personal applications
Features: All users can open it, but cannot obtain the user's organization information;
Application scenarios: ordinary business scenarios, such as Tea Baidoa, Starbucks, Heytea, etc.;
In-house application
Features: Only for internal use within the organization, release restrictions are relatively loose;
Application scenario: internal tools of the organization;
Third-party enterprise applications
Features: For use by external organizations, the application market needs to be opened by the administrator before it can be used, and the release needs to be reviewed;
Application scenarios: 2B commercialization scenarios, such as performance management, asset management, etc.
The above are the three types of DingTalk applications, and their characteristics and application scenarios are different. Developers need to choose the appropriate type according to their own needs.
Selection case
When a developer wants to develop an application that serves the community, he chooses the internal application of the enterprise. When the application is released, he needs to log in to the background of each community developer to upload and publish. Later, as the number of communities continues to increase, publishing work becomes difficult. Finish. The correct selection for external organization scenarios should be third-party enterprise applications. Developers develop applications in their own organizations and put them on the shelves. Communities in need only need to open this application.
Application parameter setting and acquisition
There are two ways to read custom parameter settings:
App launch: Triggered every time the applet is initialized

Page onLoad: Triggered every time the page is initialized

If you need to get configuration parameters every time you open a page, choose Page onLoad mode; if only the basic configuration has no timeliness requirements, you can choose App launch.
User authentication, get through the existing system
The connection between the newly developed applet and the existing system of the enterprise mainly lies in user authentication, that is, the same user can be identified in different systems. The two basic implementations of user authentication are Cookie-based and Token-based. The cookie-based method is relatively common. After the user logs in for the first time, the server stores the user information on the page through the cookie for subsequent identification. However, the authentication method of mini-programs is different. DingTalk mini-programs access all systems of DingTalk through the user's Access Token. Cookies are set based on the domain name, so it is difficult to share between systems with different domain names. By attaching the user Access Token to the request parameters for user authentication, DingTalk opens up the user authentication relationship of each system, which is more convenient and effective than cookies.
Multi-system interoperability
DingTalk user basic information can be obtained through DingTalk Bintang. One of the important pieces of information is the unionid, which is unique under the organization to which the same applet application belongs. Therefore, the user information in DingTalk can be retrieved through the unionid and synchronized to Each system realizes the multi-system intercommunication of user information.

Publish and update

The release of the mobile web is real-time, and the release of the new version of the applet application will not be pushed to the client and cannot be updated in real-time. The development of the DingTalk applet can realize that within 48 hours after the new version is released, users will be forced to update to the new version. The non-real-time update is generated because the update of the applet client is a background soft update mode, that is, asynchronous update, and the user is unaware of the update.

Online stability

For stability, the following image lists some of the types of errors that can occur and how to resolve them:

App.onError can be used for overall interception when you do not know what errors will occur in the code ;
Asynchronous errors: When writing asynchronous code, you need to pay attention to asynchronous errors. For example, if you write in Promise, you can use Promise. catch for asynchronous monitoring;
JSAPI: Focus on the exception callback of JSAPI, that is, the JSAPI fail callback;
Illegal parameters: use mine. alert or the wrong guide page to prompt the customer that subsequent interactions cannot be performed;
Network errors: monitor network abnormalities, determine network types, and provide user guidance;
Data error: Set the default value of data error to ensure that when the data is wrong, the page can run normally and will not display code errors;
Image resource error: If the URL address is unavailable, it can be monitored and reported through the URL callback method.
(6) Future planning
JSAPI capability

In the first half of 2022, 100+ APIs are expected to be open, involving runtime, files, networks, maps, devices, etc.

Mini Program Desktop Client

At present, the DingTalk applet cannot be run on the desktop client, resulting in a fault in the interactive experience. In 2022, it will focus on the development of mini-program desktop clients, and Mac and Windows mini-programs are on the way to implementing a set of codes to run on all DingTalk clients - Write Once, Run Anywhere.

Mini Program Card

Provide an immersive and lighter interactive experience through the functions of mini-programs and cards. The image below is an example of an interaction using cards in a session.

The example in the figure below also initiates the mini-program card to interact in the session and pulls up a half-screen mini-program.

The user fills in the form and submits the form, and updates the mini-program card so that the user can complete the lightweight application in the session through the mini-program. interact without opening a new applet.

Collaborative engine

The interaction between the mobile terminal and the PC terminal realizes the seamless connection and collaboration of multiple devices.

To sum up, the Mini Program is an excellent development solution, but it is not a silver bullet and does not apply to all scenarios. Developers need to choose an appropriate development solution according to different scenarios. Friends who are interested in learning about the development of DingTalk Mini Programs can learn more in the book "The Authoritative Guide to the Development of DingTalk Mini Programs", and you are also welcome to join the DingTalk group to communicate and share together.
(7) Frequently Asked Questions
Q: How does the front end obtain the CorpID of the user organization?

A: The application of the DingTalk applet is divided into three types: third-party personal applet, internal enterprise applet, and third-party enterprise application applet. Among them, the personal applet cannot obtain enterprise information, and the other two types of the applet, CorpID is placed under the global my object or dd objects, such as my. cord, or my.dd.cord, to get the cord of the organization to which the current user opens the application.

Q: In the DingTalk applet development tool, where is the code upload link uploaded? Does applet development do not need to provide its own server environment?

A: When we upload the code in the IDE, it will be uploaded to the file service dedicated to the open platform. The file service that starts the applet will compile the uploaded code and generate the offline package of the applet. This offline package will also be placed in In the CDN of the open platform, the applet is then delivered to the client of the applet. However, there is no specific storage location here. This service will be provided when the applet is opened. If the development does not involve back-end services, you will not be able to feel this detail. You only need to use the IDE to operate.

Q: How is the development of interactive cards? When can I experience it?

A: The interactive card is currently being tested in the internal business, and some problems in use are being collected. It is still in the incubation stage and is expected to be launched in the first half of 2022.

Q: How does the DingTalk applet realize file upload and download?
the DingTalk API is provided in the applet. These APIs include uploading files to DingTalk, selecting DingTalk, and previewing DingTalk. disk, download files from the nail disk, etc. Second, if you use your own or third-party services, such as Alibaba Cloud's OSS and Tencent Cloud's OSS services, you need to do the corresponding practice and preview. For example, you can upload an API such as Apollo file, but you need developers to Connect by yourself; download can be done through HttpRequest or DownloadFile; preview requires developers to connect to third-party preview services.

Q: When the DingTalk applet is loaded for the first time, will it be slower than H5?

A: The first loading of H5 is the process of opening an Html page, parsing the page content, and loading page resources. The applet is equivalent to the ability to package the page code and resources in the applet offline package and deliver it to the client. When the applet is opened once, there will be an offline package download process, but theoretically, the total amount of downloaded content of the applet is the same as the total amount of data accessed by opening the H5 page to load resources, so the process of loading the applet will not Slower than opening H5 pages.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00