IoT applet development and debugging

Development machine binding applet APPID

The development machine refers to the IoT device that is debugged as a function of the applet when developing the IoT applet. After the IoT device is bound to the APPID through the developer mode of the applet container, it is regarded as a development machine.

Enter developer mode

Dragonfly series devices enter developer mode

• The Dragonfly device is equipped with a 4G card when it is turned on, and it will be connected to the Internet through 4G mobile data traffic by default when it is turned on. If you need to use it in a Wi-Fi environment, it is recommended to connect to Wi-Fi by long pressing the power button to enter System Settings > Network Settings when turning on the device. Explanation of 4G card charges for Qingting device: 4G card usage is free within 1 year, please wait for the notification after the expiration of the charges.
  It is not recommended that users change to their private 4G cards. Other 4G cards have not been tested by Alipay, and their stability cannot be guaranteed.
  
• Long press the power button to enter the system settings page, click About This Machine, and then click the applet container 8 times in a row to open the applet configuration, enter the Alipay IoT applet settings page, and click to enter the developer mode. The developer mode refers to the development and debugging mode of the Dragonfly device. After entering this mode, the Dragonfly device can be recognized as being online by the Mini Program Developer Tool (IDE), and the IoT applet can be pushed to the device for debugging.
  

The desktop cash register device/large-screen self-service device enters the developer mode

1. Turn on the device and connect to Wi-Fi or wired network.
2. Enter the system desktop after starting up, and click to enter System Settings > About This Machine. Click the applet container 8 times in a row
to open the applet configuration, enter the Alipay IoT applet setting page, and click to enter the developer mode.

Bind applet APPID

Click Add Development Mini Program at the bottom of the page, fill in the Mini Program APPID and submit.
Notes:
• The development machine will give priority to push the new version of the container, cash register and system in the future. If the device is no longer used for development, please enter the developer mode page and click delete on the right side of the APPID to unbind. Currently, it can only be unbound actively through the device.
• A small program APPID can bind up to 10 IoT devices as development machines, but there is no limit to the number of devices when distributing the same IoT small program to IoT devices. There is no limit to the applet APPID that can be bound to an IoT device, but a device can only run one applet at the same time.
Note:
When debugging, the device needs to stay in the following developer mode page, otherwise the applet may not be pushed to the device for debugging.

IDE configuration

Select the Alipay account associated with the Mini Program

If you need more developers to assist in the development of mini programs, you can go to the open platform console > click on the corresponding mini program to enter the management background > management > member management > development members > add development members , and add the developer's Alipay account.
Note: The main account is the administrator by default, and there is no need to add the administrator as a development member.

Create an IoT applet

1. Create or open the Mini Program project on the IDE interface.

2. If it is a new project, after clicking the + button on the right side of the IDE homepage, select the terminal type as Alipay IoT on the pop-up page, click Next to select the basic template, and then name the project in the next step to complete the creation.

3. If you want to open the created project, just click Open Project in the first step to select the project file to open.
4. After entering the project page, you need to open the Alipay client on the mobile terminal, log in to the administrator or developer account, and scan the code to log in to the IDE.

Associate the applet and bind the development machine

After logging in to the IDE, click to select the associated applet in the upper left corner of the IDE project interface, and select the applet bound to the development machine in the pop-up box; the IoT applet project in the IDE can identify and associate with the developer who is bound to the current login IDE account IoT device in the mode, click to select the device to select the bound development machine.

illustrate

• If the device cannot be found, after confirming that the developer mode page is successfully bound to the applet APPID, log in to the IDE again.
• If it prompts that the device is offline, check whether the device is on
  the developer mode page.

Small program development

Single screen applet

For example, if the developed device is a device with only one screen, such as the Dragonfly series single-screen device and the large-screen self-service series, it is mainly divided into the following three steps.

Page title bar configuration

After creating the applet, you can configure the page title bar of the applet first, and you can view the window configuration in the applet frame .

Small program function development

IoT applets provide a series of IoT applet components and IoT applet APIs to help realize various functions. In addition, IoT applets also support the general basic components , extension components and applet APIs of Alipay applets , but because the two applets The carrier is different, so please refer to the actual test for support.
Note: Alipay applets do not support components and APIs of IoT applets.

Real machine preview debugging

After completing the function development of the applet, you need to preview and debug on the real device. Select the preview or debug function on the IDE, and push the developed applet to the IoT device.
Note: After the real device preview/debugging is pushed, if you want to re-push, please do not exit the developer mode of the device.
Note: After the IoT applet is developed and submitted for review, Alipay reviewers will conduct a comprehensive review of the applet. If there is a login interface for the applet, please provide the account number or provide the contact information of the service provider on this page, so that the reviewer can contact to obtain the login account.

Dual screen applet

Dual screen applet name concept

Equipment range: Dragonfly series dual-screen devices (such as Dragonfly F4 Plus), dual-screen desktop POS.
2 applets: main screen applet (main function), secondary screen applet (auxiliary function).

Add front and rear screen applications

In the app.json of the secondary screen applet, add the following parameters:

//.json
"window": {
  "extScreenApp": "YES"
  // 表示在副屏添加了商家ping'应用的接口。	
}

Add the following code to the onLaunch of the app.js file of the main screen applet:

// .js
App({
    
    
  onLaunch(options) {
    
    
    // 第一次打开
    my.ix.addExtensionApp({
    
    
        appId: "****************",
        // 填入副屏小程序的 APPID
        type: "screen",
        success: (res) => {
    
    
                console.log("addExtensionApp success:", res)
                },
        fail: (res) => {
    
    
                console.log("addExtensionApp fail:", res)
                },
    })
  }
});

Enable dual-screen messaging

The two screens can send and receive messages to each other. After sending the message, the destination needs to monitor the message, so the sender and receiver need to call the following two interfaces respectively:

1. The sender calls the message sending interface.

my.ix.sendBuddyMessage({
    
    
  target: "****************",
   // 填入目标小程序的 APPID。
  data: {
    
     payFinish: true },
  success: (res)=>{
    
    
  },
  fail: (res)=>{
    
    
  }
})
// 可以在不同地方调用消息发送接口。

2. The receiver calls the message monitoring interface.

// .js
my.ix.onBuddyMessage({
    
    
  success: (res) => {
    
    
    console.log(res)
  }
})
// 多次调用消息监听接口则会注册多个监听器，一旦调用则会持续监听，建议仅在需要的地方调用。	

If the message monitoring interface is called in multiple places, in order to avoid repeated calls, it is recommended to call the logout listener in the corresponding place:

// .js
my.ix.offBuddyMessage();

pre-launch test

1. Click Details on the IDE as shown in the figure, uncheck the two ignore options, and click Preview to test whether the network function is normal. If the network request is abnormal, such as the web-view cannot open the webpage, please click the domain name information as shown in the figure below in the IDE to add the httpRequest domain name whitelist, and you can view and configure the H5 domain name.
2. Before submitting for review, when previewing and testing on the real device, be sure to uncheck the two ignore options, otherwise it may cause unauthorized operations on the review side.

Reference material: official document of lot applet