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

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

2、Show in Service Center生成快照時(shí)所對(duì)應(yīng)的默認(rèn)2*2卡片文件目錄i18n目錄用于配置不同語(yǔ)言場(chǎng)景資源內(nèi)容，比如應(yīng)用文本詞條，圖片路徑等資源。說(shuō)明i18n和resources是開(kāi)發(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ù)邏輯，卡片是通過(guò)卡片提供方應(yīng)用處理數(shù)據(jù)并傳遞給卡片進(jìn)行顯示，卡片和卡片

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

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

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

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

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