The content of this page has been automatically translated by AI. If you encounter any problems while reading, you can view the corresponding content in Chinese.
If you have used tools like vue-cli to initialize a project, then this command is similar to it. This command will pull iotexplorer-h5-panel-template as a template, and then perform some feature selections, such as version number, choice of framework, etc. As shown below, finally, it will initialize an H5 panel project.
After the project creation is completed, developers can refer to README.md in the project directory. After installing dependencies, run the project through the following command:
npm run dev ----productId=your_productId
Among them, your_productId is the productId of the corresponding product of the H5 panel.
H5 Panel Demo
IoT Explorer provides an H5 panel Demo for developers' reference. The H5 panel Demo is open to developers in an open-source way, making it easy for developers to refer to when developing H5 panels.
The H5 panel Demo project is written using the React framework. For details, see iotexplorer-h5-panel-demo.
We also provide a scaffolding tool that supports the creation of H5 panel demos with React or Vue frameworks. For details, see iotexplorer-H5-panel-template.
Starting Debugging
During the development and debugging of the H5 panel, execute the following commands.
1. Install dependencies (execute once after downloading the Demo).
npm install
2. Real-time compilation H5 panel (needs to keep running during the development process).
npm run dev
When this command is executed, the JS file of the H5 panel can be accessed via http://127.0.0.1:9000/index.js, and the CSS file can be accessed via http://127.0.0.1:9000/index.css. After the H5 panel source code file is changed, the JS file and CSS file will be automatically recompiled. Refresh the H5 panel page to load the updated JS file and CSS file.
Compilation and Building
After the H5 panel development is completed, execute the following commands to build the JS file and CSS file of the H5 panel.
npm run release
After the build is complete, the JS file and CSS file will be output to dist/index.js and dist/index.css respectively. Developers need to upload these files to the interactive development configuration item of the product in the IoT Explorer Console. For operations, see Upload H5 Panel.
Debugging the H5 Panel
Use the official account webpage debug feature of a browser or WeChat Developer Tools to access the specified URL, accessible in H5 panel development mode, to debug the H5 panel.
In development mode, the H5 panel framework will load the JS file and CSS file from the following two URLs respectively. You need to configure a proxy so that the browser or WeChat Developer Tools can load the JS file and CSS file of the H5 panel through these two URLs, thereby debugging the H5 panel.
Development mode requires your Tencent Cloud login status. You must use a Tencent Cloud account with permission to operate on the product to log in and enter the H5 panel development mode of the corresponding product.
Local Debugging
Local debugging will register a Tencent Lianlian user associated with your Tencent Cloud account as a Debug User, and create a family and a device for debugging, so you no need to pay attention to the logic of creating a family, device binding, etc., just focus on the development of the H5 panel.
Access the following URL to perform local debugging of the H5 panel. Replace ABCDEFG with the actual product ID.
Step 3: Start Up Real-Time Compilation of the Demo Project
In the Demo project directory, execute the following command:
npm run dev
After successful compilation, the command line has the following output:
i ｢wds｣: Project is running at https://localhost:9000/
... (intermediate output omitted)
i ｢wdm｣: Compiled successfully.
Step 4: Configure WeChat Developer Tool
1. Open WeChat Developer Tools and select Settings > Proxy > Proxy Settings from the menu bar.
2. Select manually set proxy, fill in the proxy address with 127.0.0.1, and fill in the port with 8899.
Step 5: Open the H5 Panel in WeChat Developer Tool
1. Open WeChat Developer Tools, click the official account webpage on the new project page, and enter the Official Account Debugging Page.
2. Verify whether the H5 panel JS files can be accessed.
Enter https://developing.script/developing.js in the address bar and press Enter. If the JS file code can be loaded and displayed in the emulator, it indicates that the H5 panel JS files can be accessed.
3. Enter the local debugging URL in the address bar and press Enter. The emulator will jump to the login page of the Tencent Cloud console.
4. Select Model > "Windows (480×800 | Dpr:2)" from the emulator menu.
Note:
If the emulator simulates a mobile environment, WeChat or QQ login cannot be carried out normally. Here, change to the Windows model first. After logging in, it can be changed back to the original model setting.
5. Log in to the Tencent Cloud console on the emulator page. Once logged in successfully, the emulator will navigate to the H5 panel, where H5 panel debugging can be performed.
Agentless Mode
The way to enable the proxy-free mode is also simple. Just add a parameter after the link in the development panel: &sw=true. Suppose we want to develop a device with productId ABCDEFG and deviceName dev1. Then, the proxy-free mode can be enabled via the following link.
By adding sw=true, a service-worker will be enabled on the page. Through the interception and forwarding of requests by the service-worker, requests for developing.script and developing.style will be proxied to the localhost development server. This approach is also effective for subsequent real device debugging and testing on actual devices.
Overview of Agentless Mode Principle
As previously mentioned, in development mode, the H5 panel framework will load JS files and CSS files from the following two URLs respectively:
The files packaged by the development server are accessed via localhost. Therefore, we need to perform a proxy between the two. The above-mentioned whistle plays such a role. If we don't use whistle, we can also use the browser's built-in service-worker. By listening to the fetch event and then intercepting and modifying requests, we can complete such work. This is the proxy-free mode. That is to say, the so-called proxy-free mode is not actually agentless. It merely avoids installing tools like whistle and achieves request proxying through the browser's own capabilities (service-worker).
Real Device Debugging
Through actual device debugging, you can perform H5 panel debugging on the specified device. Replace ABCDEFG with the actual product ID and abcdefg with the actual device name. If you need to debug the virtual device provided by IoT Explorer, replace abcdefg with ~virtualDev.
When debugging the specified device, this device will be automatically bound to the family of your Debug User, and the original binding relationship of this device will be removed at the same time.
Released products do not support real device debugging, because there are risks of unbinding relationships of devices in use by real users.
Real Device Debugging
For released products, real device debugging is not open, and it is very difficult to debug the H5 panel in the mini program. To address this issue, the platform provides a real device debugging solution. Real device debugging allows debugging of the H5 panel while maintaining the device's existing binding relationship. Before starting, you need to use the Tencent Lianlian Mini Program to bind the device to be debugged. Specific steps are as follows.
1. Open Tencent Lianlian Mini Program, select Mine > About Us to enter the About Us page.
2. Long-press the Tencent Lianlian Logo and select Enter Development Mode in the pop-up menu. Page prompt indicates successful entry into development mode.
3. Return to the homepage of Tencent Lianlian Mini Program. In the device list, long-press the device that needs to be debugged and select "Generate H5 Panel Debugging Address" in the pop-up menu. Then, this debugging address will be copied to the clipboard.
4. Use browser to access this debugging address to perform H5 panel real device debugging.
Uploading the H5 Panel
After the H5 panel development is completed, upload the JS file and CSS file of the H5 panel in the console. Specific operations are as follows:
1. Log in to Tencent Cloud and enter the IoT Explorer Console, select a project and products, and enter the product detail page.
2. Select Interactive Development > Panel Configuration, click Configure to enter the panel configuration page.
3. Select H5 Custom Dashboard from the dashboard type.
4. In the Upload JS form, click Upload and select the JS files of the H5 panel. After upload completion, the page displays the file names, sizes, and MD5 info of the JS files.
5. If necessary, upload a CSS file. In the "Upload CSS" form, click Upload and select the CSS file of the H5 panel. After upload completion, the page displays the file name, size, and MD5 info of the CSS file.
6. Click Save. The page prompt indicates that the saving is successful. The uploaded JS files and CSS files are saved to take effect.
Note:
If the panel contains small images, they can be inlined into the code through build tools. If the image is relatively large, it is recommended to upload it to COS and then refer to it through a link.
H5 Panel Access Allowlist
During the development phase, you need to set an access allowlist to use Tencent Lianlian to debug the H5 custom panel. For more information on how to set the access allowlist, see Quick Start.
