Songshan Lake is on fire, luckily my Hongmeng HelloWorld is ok

Last night, I finally got through to HelloWorld HarmonyOS. What I expected to do in half an hour took me almost 5 hours! Today, a fire broke out at huawei’s construction site in Dongguan songshan Lake High-tech Zone. I hope there are no casualties.

Hello, everyone, I am front-end Copy city raider Huqi, engaged in front-end for more than 4 years, in principle, run a hongmeng OSHelloWorld should not spend so much effort, after all, the environment is easy to install, editor DevEco Studio is also easy to use, Demo code is particularly simple. However, I am just a senior Copy siege lion, although working for a long time, but the technical level is very mediocre, through reading this article, you can just feel. This article will record my step pit whole course, welcome everybody big guy clap brick!

“One cannot make bricks without straw”

If you write a lot of “hydrology”, you seem to have a template in mind: in the first part of the article, there is always a list of how to prepare, such as editor acquisition, dependency installation, etc. This article seems to be no exception! Sometimes, learning about a new technology, or learning to use a new framework or library, feels like Cooking. When I was a child, the family burned firewood, often when cooking the first to go to the back of the mountains in the woods to pick up some fallen pine leaves, the most suitable for the fire; Sometimes, they also pick up dry, thick branches, which can burn well while the fire is burning. This time, I will run the HelloWorld of Hongmeng OS. The SDK of Native, JAVA and JS is like those pine leaves, which will help me to run the simple Demo successfully. The editor DevEco Studio is like that thick branch, giving me the energy to continue to explore Hongmeng OS.

The first step, of course, is to download and install DevEco Studio, which all geniuses use. I remember that I was lucky enough to get the internal test qualification in May, and signed a confidentiality agreement at that time. Then I found that the version of 2.x is now available, and I don’t know whether to keep it confidential or not. The download link is public.

• DevEco Studio download link

  # HUAWEI DevEco Studio 1.0 is the integrated development environment for EMUI applications # To develop HarmonyOS applications, please download HUAWEI DevEco Studio 2.0 # so we are going to download 2.0
  Developer.huawei.com/consumer/cn...
  Copy the code
  Developer.harmonyos.com/cn/develop/...
  

  Windows 10 64-bit is currently available, and DevEco Studio for macOS is coming soon.

• Download the SDKDevEco Studio will only download Java SDK and SDK corresponding Toolchains by default, of course, as a senior Copy raiders, “kids only do multiple choice questions”, I want all! So I manually downloaded Native and JS SDK in SDK Manager. As a developer of JS stack, if you want to run the JS version Demo of Hongmon OS, you must also install the JS SDK, so stop worrying and install it all!

• NPM image configuration

  Uh, how about NPM mirroring configuration? I’m sorry, it’s the 2020s, and you can’t even call yourself a front-end developer without NodeJS. As for why I have a JAVA environment, I don’t have to install JAVA in theory even though most projects are separated from each other nowadays, but I happen to be developing React Native, and the company has a lot of projects that are separated from each other, so I have to install JAVA to keep my job.

  To remind you of the first pit I stepped on here:Error “Run ‘NPM install’ failed” when installing JS SDKDetails, see: https://gitee.com/openharmony/docs/issues/I1WM2P.

  According to the error log, it was obvious that there was a network timeout. I added the NPM image of Huawei Cloud through NRM management, but miraculously it did not take effect. Later or through NPM config set registry https://mirrors.huaweicloud.com/repository/npm/ to set up the mirror to solve. Although the official documentation gave this command, I overestimated my ability and stuck with NRM.

• Gradle configuration

As mentioned above, I do React Native, and the company has some Spring projects, so I should have Gradle on my machine, so I reconfigured DevEco Studio gradle configuration. Here, I think DevEco Studio has some common features with IEDA or Android Studio. The configuration is also very easy to use, but I still stumbled on the configuration later.

HelloWorld code analysis

This HelloWorld I use JS empty template, after all is the front-end Copy storming lion, subconscious think download JS Demo code at least should be recognized. When I read the code catalog and details, I was devastated: JAVA! JAVA! JAVA!

Take a closer look at the directory and file name, like Android! Same build.gradle, same gradle. Json, but when I saw nothing in package.json, I was stunned. When I opened node_modules and saw no dependencies, I realized that I hadn’t introduced any dependencies. Gradle, Build, And Entry/Build are dependencies and packaged files. The single file in the root directory is basically the configuration file of some projects. The directories we develop are mainly in Entry, among which I pay more attention to the JS directory. I see index/index.css, index/index.js and index/index.js under Pages. As well as the page directory at the same level of app.js, does it feel like small program development, yes, the front end is playing this way!

“Talk is cheap show me your code”, next kangkang Hello World gave us the code, focus on the following files:

• entry/src/main/config.json

  I won’t explain it here, because the official documentation has a more detailed field-by-field explanation –config. Json manifest file description, address: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463.

  {
      "app": {        "bundleName":"com.huawei.huqi.helloworld".        "vendor":"huawei".        "version": { "code":1. "name":"1.0"  },  "apiVersion": { "compatible":3. "target":3  }  },  "deviceConfig": {}, "module": { "package":"com.huawei.huqi.helloworld". "name":".helloworld". "reqCapabilities": [ "video_support" ]. "deviceType": [ "wearable" ]. "distro": { "deliveryWithInstall":true. "moduleName":"entry". "moduleType":"entry"  },  "abilities": [ {  "skills": [ {  "entities": [ "entity.system.home" ]. "actions": [ "action.system.home"  ]  } ]. "formEnabled":false. "name":"com.huawei.huqi.helloworld.MainAbility". "icon":"$media:icon". "description":"$string:mainability_description". "label":"helloworld". "type":"page". "launchType":"standard"  } ]. "js": [ {  "pages": [ "pages/index/index" ]. "name":"default". "window": { "designWidth":454. "autoDesignWidth":false  }  }  ]  } } Copy the code

• entry/src/main/js/default/app.js

  Familiar entrance, familiar life cycle! Here is the global JavaScript logic file and application lifecycle management.

  export default {
  onCreate() {
      console.info('AceApplication onCreate');
  },
  onDestroy() {
   console.info('AceApplication onDestroy'); } };  Copy the code

• entry/src/main/js/default/pages/index/index.js

  The js file describes the behavior logic of the page. This file defines all the logical relations used in the page, such as data, events, etc. $t = i18n; $t = i18n; $t = i18n; The i18N directory is mainly used to configure the resource content of different language scenes, such as the application of text entries, image paths and other resources. Place the resource definition file for each locale in the i18N folder specified in the file organization. Name the resource file in the language-locale. json format, for example, en-us. json for the English (US) resource file. This part of the analysis estimates to see the source code of Hongmeng OS. See the JS Syntax Reference for more details on JS syntax.

  export default {
      data: {
          title: ""
      },
      onInit (){
   this.title = this.$t('strings.world');  } }  Copy the code

• Multi-language files Language-locale. json is stored in the I18N directory, where multi-language JSON files are stored.

  // en-US.json
  {
  "strings": {        "hello":"Hello".        "world":"World"
  }, "Files": {} } // zh-CN.json { "strings": { "hello":"Hello". "world":"The world" }, "Files": {} } Copy the code

• Entry/SRC/main/js/default/pages/index/index. The HML HML (HarmonyOS Markup Language) is a kind of HTML Markup Language, through the components, construct the content of the page. HML files define the layout structure of the page, the components used, and the hierarchy of those components. Currently, the main tags are div, text, and ‘image. See the HML Syntax Reference for more details on HML, which looks like a nod to vue.js

  <div class ="container">
      <text class ="title">
      {{ $t('strings.hello') }} {{title}}
      </text>
  </div>
  Copy the code

• entry/src/main/js/default/pages/index/index.css

  Cascading style sheets are CSS files that define the style and layout of a page, including style selectors and various style properties. Currently, flex layout is supported, CSS style files support @import statement, import CSS text. See CSS Syntax Reference for more information about CSS

  .container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
   .title {  font-size: 100px; } Copy the code

The rest of the JAVA section doesn’t have to teach you how to be a Javanese. Now it’s time to run the program and step into a giant pit.

Run the HelloWorld

To run HelloWorld, you need to select the JDK version.

I didn’t talk too much, but I realized that it was due to improper selection of JDK version. I remembered that the default JDK of the project was 12.0, but it couldn’t run. Gradle dependencies failed to install, and then a lot of trial and error. Finally, after 5 hours, we are done! The Gradle JVM uses JDK 1.8, which is native, and suddenly the world goes quiet. Hold your breath and click RUN. Dangdang when… Click tools-hVD Manager at the top of DevEco Studio to open the simulator. This step requires login authorization. If your account does not have permission, you cannot use the simulator.

This step, I am also very depressed, many times tried to open THE HVD did not find the Wearable device, only a lonely TV can choose, and then accidentally showed the Wearable. I haven’t used Wearable before, it feels amazing, this virtual device is kind of hanging!

To start the actual RUN, click on the Run-run ‘Entry’ menu at the top of DevEco Studio. If successful, the virtual device will be detected, similar to Android development. Click OK and get ready to program for luck…

All right, hold on a second! It worked! See big hello **, feel the world finally really clean.

Never stop

Every HelloWorld is a pleasant experience, however, after HelloWorld, I hope H(ello)W(ORld) siege lion do not stop so, our future is a stone sink, arouse thousands of waves, waves within waves! Here, I also set a flag, must insist on learning not stop at HelloWorld! Since JS has so much to offer, why not make an effort to master and master it? Thank each big guy to appreciate, also beg each big guy to take fly!

This article is formatted using MDNICE