⌚ Developing QR Code Application for Lite Wearable Devices
Introduction
Hello everyone! 🌼
In today’s article, I will discuss what Lite Wearable is and how we can develop a QR code application for Lite Wearable devices using DevEco Studio.
If you haven’t downloaded DevEco Studio, you can learn how to download it from this link.
Let’s get started!
What is Lite Wearable?
We can develop a watch application for Lite Wearable and Wearable in two different ways.
- In Lite Wearable, the watch application is developed using the JavaScript programming language.
- While developing a Lite Wearable watch application, JS, CSS, and HML are used. HML (HarmonyOS Markup Language) is a markup language developed by Huawei. It allows us to create user interfaces for mobile applications and devices.
- Lite wearable devices are based on HarmonyOS.
You can read the article at this link for the differences between Lite Wearable (GT series) and Wearable (Watch series) watches.
✨ First, let’s create a Lite Wearable project in DevEco Studio.
✨ Now, let’s add the necessary dependencies and plugins.
build.gradle (project level)
build.gradle (app level)
✨ Now, let’s start coding our Home screen.
The screen will display a ‘Welcome’ text and a ‘showQrCode’ button.
Now, let’s style the text and button on this screen using CSS.
Now, let’s write the showQrCode() function with JS and redirect the user to the page with the QR code when the button is clicked.
✨ Let’s create a package named qr and write our QR-related code under this package.
The <qrcode> tag will generate a QR code and display it on the screen. We will also be able to go back using the back button.
Let’s set up the designs.
Let’s add the link to the page that will appear when we scan the QR code and use the backHome() function to redirect back to our Home screen.
Output:
Conclusion
In this article, we created a demo project for Lite Wearable. We wrote our code using HML, CSS, and JS in DevEco Studio.
You can access the Turkish version of this article from this link.
