鴻蒙初體驗（二）：使用JS FA應用的chart組件畫一個簡單線性圖

小嵌

鴻蒙初體驗（二）：使用JS FA應用的chart組件畫一個簡單線性圖, 關于HarmonyOS 2.0相關應用軟件的安裝和使用可以參考鴻蒙初體驗（一）：從安裝到第一個程序 Hello HarmonyOS

更多關于HarmonyOS 2.0JS FA應用的開發(fā)使用可以參考 鴻蒙初體驗（三）：使用JS FA應用寫一個簡單的猜數字游戲

話不多說直接直奔主題
一、創(chuàng)建項目 首先我們打開DevEco Studio新建一個Js項目




二、項目結構 建立完成后可以看到我們的目錄結構是這樣的



   是不是很像我們的Vue了呢，沒錯HarmonyOS的JS FA應用也是通過node.js去封裝的
1.目錄結構

目錄結構中文件分類如下：

• .hml結尾的HML模板文件，這個文件用來描述當前頁面的文件布局結構。
  
• .css結尾的CSS樣式文件，這個文件用于描述頁面樣式。
  
• .js結尾的JS文件，這個文件用于處理頁面和用戶的交互。
    
  

各個文件夾的作用：

• app.js文件用于全局JavaScript邏輯和應用生命周期管理。
  
• pages目錄用于存放所有組件頁面。
  
• common目錄用于存放公共資源文件，比如：媒體資源，自定義組件和JS文件。
  
• resources目錄用于存放資源配置文件，比如：全局樣式、多分辨率加載等配置文件。
  
• i18n目錄用于配置不同語言場景資源內容，比如應用文本詞條，圖片路徑等資源。
    
  

i18n和resources是開發(fā)保留文件夾，不可重命名。
2.配置文件config.json 定義每個頁面的路由信息，每個頁面由頁面路徑和頁面名組成，頁面的文件名就是頁面名。比如：

• <!--config.json-->
    
  
• {
    
  
•   ...
    
  
•   “pages“: [
    
  
•     “pages/index/index“, //首頁，即entry入口
    
  
•     “pages/detail/detail“
    
  
•   ]
    
  
•   ...
    
  
• }
  

復制代碼

• pages列表中第一個頁面是應用的首頁，即entry入口。
  
• 頁面文件名不能使用組件名稱，比如：text.hml、button.hml等。
    
  

三、編寫代碼 index.css

• .container {
    
  
•     flex-direction: column;
    
  
• }
    
  
• .line{
    
  
•     width: 90%;
    
  
•     height: 90%;
    
  
• }
    
  
• 
  

復制代碼

index.hml

• <div class =“container“>
    
  
•     <chart class=“l(fā)ine“ type=“l(fā)ine“ options=“{{options}}“ datasets=“{{datasets}}“></chart>
    
  
• </div>
    
  
• 
  

復制代碼

index.js

• export default {
    
  
•     data: {
    
  
•         options:{
    
  
•             xAxis:{
    
  
•                 min:0,
    
  
•                 max:10,
    
  
•                 axisTick:10,
    
  
•                 display:true
    
  
•             },
    
  
•             yAxis:{
    
  
•                 min:0,
    
  
•                 max:10,
    
  
•                 axisTick:10,
    
  
•                 display:true
    
  
•             }
    
  
•         },
    
  
•         datasets:[
    
  
•             {
    
  
•                 data:[5,0,9,4,10,8,6,10,8,6],
    
  
•                 strokeColor:“#986“,
    
  
•             },
    
  
•             {
    
  
•                 data:[4,2,4,7,8,4,6,9,4,10],
    
  
•                 strokeColor:“#234“,
    
  
•             }
    
  
•         ],
    
  
•     }
    
  
• }
    
  
• 
  

復制代碼


四、效果圖
五、知識拓展 官方JS API文檔

options：主要是控制圖、表、線這些參數 datasets：數組對象，一些數據和樣式


六、總結 初學者學起來并不困難，文檔很詳細，比Java API更容易一定。學過Vue或js的朋友就更加是如魚得水了，變化不大，適應一段時間應該就習慣了。

文章轉自：文化沙漠麥七