liu yang

Posted on Jun 18 • Edited on Jul 9

uni-app development Practice of Huawei HarmonyOS Harmony Next

#harmonyosnext

Guide to Developing HarmonyOS Applications with uni-app

1. Opening the uni-app Documentation and Setting Up the Environment

Official Documentation and Tools

uni-app Documentation Address: You can access the official uni-app documentation at https://uniapp.dcloud.io/. This comprehensive guide provides detailed information on how to develop applications using uni-app, including tutorials, API references, and best practices.
DevEco Studio Download: Ensure you download DevEco Studio version 5.0.3.400 or higher. This version includes a built-in HarmonyOS emulator, which is essential for testing your applications without needing a physical device. You can download it from the official Huawei website.
HarmonyOS Version: Use HarmonyOS API level 12 or higher to take advantage of the latest features and improvements.
HBuilderX-alpha-4.22 or Higher: For Windows users, if you plan to use the emulator, you need to enable the following features via the Control Panel:
- Hyper-V
- Windows Hypervisor Platform
- Virtual Machine Platform

Note: These features are available only in Windows 10 Pro or Windows 11 Pro. Home editions need to be upgraded to Pro or Enterprise versions.

2. Configuring HBuilder X

Setting Up HBuilder X for HarmonyOS Development

Open HBuilderX: Launch HBuilderX and click on the menu bar at the top. Go to Tools > Settings > Source Code View > User Settings.
Configure DevEco-Studio Path: Insert the path to your DevEco-Studio installation. For example, if your DevEco-Studio is installed at D:\Huawei\DevEco Studio\bin\devecostudio64.exe, you should enter the directory path D:\Huawei\DevEco Studio.

   "harmony.devTools.path" : "D:/Huawei/DevEco Studio"

This configuration ensures that HBuilderX can communicate with DevEco Studio, allowing you to leverage the full power of both tools.

3. Setting Up the HarmonyOS Offline SDK

Downloading and Configuring the SDK

Download the uni-app HarmonyOS Offline SDK: You can download the template-1.3.4.tgz file from the official uni-app resources page. This SDK contains the necessary libraries and tools to compile uni-app projects for HarmonyOS.
Extract and Rename the SDK: After downloading, extract the file. If you plan to compile multiple uni-app projects to HarmonyOS, you need to place separate copies of the HarmonyOS offline SDK for each project to avoid conflicts. For example, you can create a dedicated folder like D:\Backup\Documents\HBuilderProjects\uniharmonysdk and rename the extracted package folder to your project name.
Open the Template Project in DevEco-Studio: Open the extracted and renamed template project in DevEco-Studio. This step ensures that the project is correctly configured for HarmonyOS development.
Sync and Run the Project: After syncing is complete, you can run the project on a real device or the emulator. If you haven't configured the signing information, you may need to do so first.
Configure Signing: You can generate a signing certificate using your Huawei account. This is necessary for deploying your application to a real device or publishing it to the Huawei AppGallery.

Additional Notes

Emulator Setup: If you need to create a new emulator instance, you can do so within DevEco Studio. The emulator allows you to test your application in a simulated environment, which is particularly useful during development.
Performance Optimization: When developing with uni-app, consider optimizing your application's performance by leveraging HarmonyOS's native capabilities. This includes using platform-specific APIs and optimizing your code for better performance on HarmonyOS devices.
Community and Support: Join the uni-app community to get support, share experiences, and stay updated on the latest developments. The community includes forums, chat groups, and regular updates from the development team.

4. Practical Development Tips

Developing with uni-app

Cross-Platform Development: uni-app allows you to write a single codebase that can be deployed across multiple platforms, including iOS, Android, Web, and various mini-programs. This significantly reduces development time and effort.
Using Vue.js: uni-app is built on top of Vue.js, which means you can leverage your existing knowledge of Vue to develop applications quickly. The framework supports Vue syntax and components, making it easy to integrate with other Vue-based tools and libraries.
Platform-Specific Features: While uni-app supports cross-platform development, it also allows you to write platform-specific code using conditional compilation. This means you can call native APIs and leverage platform-specific features without compromising the cross-platform nature of your application.
Rich Ecosystem: uni-app has a rich ecosystem of plugins and SDKs that can be easily integrated into your projects. This includes support for NPM, mini-program components, and various third-party libraries.

Example Code

Here is a simple example of how to create a new project and run it on HarmonyOS using uni-app:

// Create a new uni-app project
uni.createApp({
  pages: [
    {
      path: 'pages/index/index',
      style: {
        navigationBarTitleText: 'Hello uni-app'
      }
    }
  ],
  globalStyle: {
    navigationBarTextStyle: 'black',
    navigationBarTitleText: 'uni-app',
    navigationBarBackgroundColor: '#ffffff'
  }
});

// Navigate to a page
uni.navigateTo({
  url: '/pages/detail/detail'
});

DEV Community