HarmonyOS服務(wù)卡片開發(fā)-文件組織與配置學(xué)習(xí)

1、HarmonyOS服務(wù)卡片開發(fā)-文件組織與配置學(xué)習(xí)文件組織目錄結(jié)構(gòu)JS服務(wù)卡片(entry/src/main/js/Component)的典型開發(fā)目錄結(jié)構(gòu)如下：目錄結(jié)構(gòu)中文件分類如下：.hml結(jié)尾的HML模板文件，這個文件用來描述卡片頁面的模板布局結(jié)構(gòu)。.css結(jié)尾的CSS樣式文件，這個文件用于描述頁面樣式。.json結(jié)尾的JSON文件，這個文件用于配置卡片中使用的變量action事件。各個文件夾的作用：pages目錄用于存放卡片模板頁面。common目錄用于存放公共資源文件，比如：圖片資源。resources目錄用于存放資源配置文件，比如：多分辨率加載配置文件。Widget 目錄是創(chuàng)建時勾選

2、Show in Service Center生成快照時所對應(yīng)的默認(rèn)2*2卡片文件目錄i18n目錄用于配置不同語言場景資源內(nèi)容，比如應(yīng)用文本詞條，圖片路徑等資源。說明i18n和resources是開發(fā)保留文件夾，不可重命名。JS服務(wù)卡片不同于 HYPERLINK /cn/docs/documentation/doc-references/js-framework-file-0000000000611396 t /cn/docs/documentation/doc-references/_blank JS應(yīng)用使用js文件處理數(shù)據(jù)邏輯，卡片是通過卡片提供方應(yīng)用處理數(shù)據(jù)并傳遞給卡片進(jìn)行顯示，卡片和卡片

3、提供方應(yīng)用間通過json配置文件約定相應(yīng)的數(shù)據(jù)和事件交互接口，故不包含JS應(yīng)用上的js文件。詳見 HYPERLINK /cn/docs/documentation/doc-guides/ability-service-widget-provider-js-0000001150602175 t /cn/docs/documentation/doc-references/_blank JS服務(wù)卡片開發(fā)指南。文件訪問規(guī)則應(yīng)用資源可通過絕對路徑或相對路徑的方式進(jìn)行訪問，本開發(fā)框架中絕對路徑以/開頭，相對路徑以./或./。具體訪問規(guī)則如下：引用代碼文件，需使用相對路徑，比如：./common/style

4、.css。引用資源文件，推薦使用絕對路徑。比如：/common/xxx.png。公共代碼文件和資源文件推薦放在common下，通過規(guī)則1和規(guī)則2進(jìn)行訪問。CSS樣式文件中通過url()函數(shù)創(chuàng)建數(shù)據(jù)類型，如：url(/common/xxx.png)。說明當(dāng)代碼文件A需要引用代碼文件B時：如果代碼文件A和文件B位于同一目錄，則代碼文件B引用資源文件時可使用相對路徑，也可使用絕對路徑。如果代碼文件A和文件B位于不同目錄，則代碼文件B引用資源文件時必須使用絕對路徑。因為Webpack打包時，代碼文件B的目錄會發(fā)生變化。在json文件中定義的數(shù)據(jù)為資源文件路徑時，需使用絕對路徑。配置文件js標(biāo)簽中包含了

5、實例名稱、窗口樣式和卡片頁面信息。標(biāo)簽類型默認(rèn)值必填描述nameStringdefault是標(biāo)識JS實例的名字。pagesArray-是路由信息windowObject-否窗口信息typeStringnormal否form：卡片，normal：應(yīng)用。說明name、pages、window、type等標(biāo)簽配置需在 HYPERLINK /cn/docs/documentation/doc-guides/basic-config-file-overview-0000000000011951 配置文件中的“js”標(biāo)簽中完成設(shè)置。pages定義卡片頁面信息，由卡片頁面路徑和卡片頁面名組成，卡片僅包含一個

6、頁面。說明pages列表中僅包含一個頁面。頁面文件名不能使用組件名稱，比如：text.hml、button.hml等。windowwindow用于定義與顯示窗口相關(guān)的配置。對于卡片尺寸適配問題，有2種配置方法，建議使用autoDesignWidth：指定卡片designWidth 150px（22），所有與大小相關(guān)的樣式（例如width、font-size）均以designWidth和實際卡片寬度的比例進(jìn)行縮放，例如在designWidth為150時，如果設(shè)置width為100px時，在卡片實際寬度為300物理像素時，width實際渲染像素為200物理像素。設(shè)置autoDesignWidth為

7、true，此時designWidth字段將會被忽略，渲染組件和布局時按屏幕密度進(jìn)行縮放。屏幕邏輯寬度由設(shè)備寬度和屏幕密度自動計算得出，在不同設(shè)備上可能不同，請使用相對布局來適配多種設(shè)備。例如：在466*466分辨率，320dpi的設(shè)備上，屏幕密度為2（以160dpi為基準(zhǔn)），1px等于渲染出的2物理像素。說明組件樣式中類型的默認(rèn)值，按屏幕密度進(jìn)行計算和繪制，如：在屏幕密度為2（以160dpi為基準(zhǔn)）的設(shè)備上，默認(rèn)為1px時，設(shè)備上實際渲染出2物理像素。autoDesignWidth、designWidth的設(shè)置不影響默認(rèn)值計算方式和繪制結(jié)果。屬性類型必填默認(rèn)值描述designWidthnumber否150px頁面顯示設(shè)計時的參考值，實際顯示效果基于設(shè)備寬度與參考值之間的比例進(jìn)行縮放。autoDesignWidthboole