Getting started with harmonios

Catalog

Catalog function

File usage rules

chart Components

button Components

Catalog function

• Directory structure

  

• Main concern entry--》src--》main This file

  

• app.js Files are used for global JavaScript Logic and entire application lifecycle management .

• pages The directory is used to store all component pages .

• common Directory is used to store public resource files , such as ： Media resources and JS file .

• i18n The directory is used to configure the content of resources in different language scenes , such as ： Apply text entry , Path... Pictures, etc , Be careful i18n Is the development retention folder , Cannot rename .

• equipment

  

• When previewing , You cannot select a folder for , To select files inside the folder for preview

File usage rules

• Application resources can be accessed through absolute path or relative path , The absolute path in this development framework is "/" start , The relative path is as follows "./" or "../" , The specific access rules are as follows ：

• Reference code file , Relative paths are required , such as ：../common/utils.js.

• Reference resource files , Absolute path is recommended . such as ：/common/xxx.png.

• If the image path reference fails, there will be no error prompt of file search failure , It is recommended to use absolute path for file path encoding

• Tips ： There is no automatic path completion prompt for absolute path input , have access to 「 Relative paths 」 Select the corresponding file , then , After removing the previous relative path, introduce .

• Data files import Import can only use relative paths , You can't use absolute paths , Using an absolute path will report an error .

chart Components

• For chart components , Used to render line graphs 、 Histogram 、 Gauge graph interface .

  

• step
  • stay pages Create folder , contain index.hml,index.css,index.js Three files （ Be careful ： These three files must be named in the same way as the folder ）, Otherwise it will go wrong
  • Configure the routing , stay config.json In this document .

    

  • You can also create JSpage, There is no need to configure the routing
  • When previewing a page , Be sure to open the page folder that currently needs to be previewed hml、css、js Any file .
  • Switch pages for preview , There is no need to restart the previewer , Directly click the refresh button in the upper right corner , An error message appears .
  • Preview error appears. After modification , Refresh invalid , You must restart the previewer to display , Click on the right side to collapse and then expand .

button Components

• placement Property to set the position relationship between the picture and text on the button

  

• justify-content Used to set or retrieve elastic box elements in the spindle （ The horizontal axis ） Alignment in the direction .

• stack（ Container components ）
  • Stacking containers , The subcomponents are put on the stack in order , The latter one covers the former one . <stack class="stack-parent"> <div class="back-child bd-radius"></div> <div class="positioned-child bd-radius"></div> <div class="front-child bd-radius"></div> </stack>

• Use div when , It is arranged horizontally by default , Can be adjusted by flex-direction To change

• You can only have one page div, Others can only be included in the largest div Inside