1# 文件组织<a name="ZH-CN_TOPIC_0000001164130750"></a> 2 3## 目录结构<a name="zh-cn_topic_0000001127125012_section119431650182015"></a> 4 5JS FA应用的JS模块\(entry/src/main/js/module\)的典型开发目录结构如下： 6 7**图 1** 目录结构<a name="zh-cn_topic_0000001127125012_fig72881050193012"></a> 8 9 10.png) 11 12**图 2** 多实例资源共享目录结构<sup>5+</sup><a name="zh-cn_topic_0000001127125012_fig103221917162010"></a> 13 14 15目录结构中文件分类如下： 16 17- .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。 18- .css结尾的CSS样式文件，这个文件用于描述页面样式。 19- .js结尾的JS文件，这个文件用于处理页面和用户的交互。 20 21各个文件夹的作用： 22 23- app.js文件用于全局JavaScript逻辑和应用生命周期管理，详见[app.js](js-framework-js-file.md)说明。 24- pages目录用于存放所有组件页面。 25- common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。 26- resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件，详见[资源限定与访问](js-framework-resource-restriction.md)章节。 27- share目录<sup>5+</sup>用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。 28 29> **说明：** 30>- i18n和resources是开发保留文件夹，不可重命名。 31>- 如果share目录中的资源和实例\(default\)中的资源文件同名且目录一致时，实例中资源的优先级高于share中资源的优先级。 32>- share目录当前不支持i18n。 33>- 在使用DevEco Studio进行应用开发时，目录结构中的可选文件夹需要开发者根据实际情况自行创建。 34 35## 文件访问规则<a name="zh-cn_topic_0000001127125012_section6620355202117"></a> 36 37应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下： 38 39- 引用代码文件，推荐使用相对路径，比如：../common/utils.js。 40- 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。 41- 公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问。 42- CSS样式文件中通过url\(\)函数创建<url\>数据类型，如：url\(/common/xxx.png\)。 43 44> **说明：** 45>当代码文件A需要引用代码文件B时： 46>- 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。 47>- 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。 48>- 在js文件中通过数据绑定的方式指定资源文件路径时，必须使用绝对路径。 49 50## 媒体文件格式<a name="zh-cn_topic_0000001127125012_section79731562617"></a> 51 52**表 1** 支持的图片格式 53 54<a name="zh-cn_topic_0000001127125012_table59058237819"></a> 55<table><thead align="left"><tr id="zh-cn_topic_0000001127125012_row890542312811"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001127125012_p1290662316815"><a name="zh-cn_topic_0000001127125012_p1290662316815"></a><a name="zh-cn_topic_0000001127125012_p1290662316815"></a>格式</p> 56</th> 57<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001127125012_p390618231583"><a name="zh-cn_topic_0000001127125012_p390618231583"></a><a name="zh-cn_topic_0000001127125012_p390618231583"></a>支持版本</p> 58</th> 59<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001127125012_p12906623088"><a name="zh-cn_topic_0000001127125012_p12906623088"></a><a name="zh-cn_topic_0000001127125012_p12906623088"></a>支持的文件类型</p> 60</th> 61</tr> 62</thead> 63<tbody><tr id="zh-cn_topic_0000001127125012_row49065231788"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125012_p10906112316811"><a name="zh-cn_topic_0000001127125012_p10906112316811"></a><a name="zh-cn_topic_0000001127125012_p10906112316811"></a>BMP</p> 64</td> 65<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125012_p139066231811"><a name="zh-cn_topic_0000001127125012_p139066231811"></a><a name="zh-cn_topic_0000001127125012_p139066231811"></a>API Version 3+</p> 66</td> 67<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125012_p590619232813"><a name="zh-cn_topic_0000001127125012_p590619232813"></a><a name="zh-cn_topic_0000001127125012_p590619232813"></a>.bmp</p> 68</td> 69</tr> 70<tr id="zh-cn_topic_0000001127125012_row1690615234816"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125012_p6906122313816"><a name="zh-cn_topic_0000001127125012_p6906122313816"></a><a name="zh-cn_topic_0000001127125012_p6906122313816"></a>GIF</p> 71</td> 72<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125012_p1906152319810"><a name="zh-cn_topic_0000001127125012_p1906152319810"></a><a name="zh-cn_topic_0000001127125012_p1906152319810"></a>API Version 3+</p> 73</td> 74<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125012_p290662317818"><a name="zh-cn_topic_0000001127125012_p290662317818"></a><a name="zh-cn_topic_0000001127125012_p290662317818"></a>.gif</p> 75</td> 76</tr> 77<tr id="zh-cn_topic_0000001127125012_row5906823580"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125012_p109061423685"><a name="zh-cn_topic_0000001127125012_p109061423685"></a><a name="zh-cn_topic_0000001127125012_p109061423685"></a>JPEG</p> 78</td> 79<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125012_p89064231083"><a name="zh-cn_topic_0000001127125012_p89064231083"></a><a name="zh-cn_topic_0000001127125012_p89064231083"></a>API Version 3+</p> 80</td> 81<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125012_p109061723488"><a name="zh-cn_topic_0000001127125012_p109061723488"></a><a name="zh-cn_topic_0000001127125012_p109061723488"></a>.jpg</p> 82</td> 83</tr> 84<tr id="zh-cn_topic_0000001127125012_row310155772112"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125012_p17101195717217"><a name="zh-cn_topic_0000001127125012_p17101195717217"></a><a name="zh-cn_topic_0000001127125012_p17101195717217"></a>PNG</p> 85</td> 86<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125012_p10102195772114"><a name="zh-cn_topic_0000001127125012_p10102195772114"></a><a name="zh-cn_topic_0000001127125012_p10102195772114"></a>API Version 3+</p> 87</td> 88<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125012_p161021157162120"><a name="zh-cn_topic_0000001127125012_p161021157162120"></a><a name="zh-cn_topic_0000001127125012_p161021157162120"></a>.png</p> 89</td> 90</tr> 91<tr id="zh-cn_topic_0000001127125012_row942813247228"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125012_p6428152432218"><a name="zh-cn_topic_0000001127125012_p6428152432218"></a><a name="zh-cn_topic_0000001127125012_p6428152432218"></a>WebP</p> 92</td> 93<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125012_p342820248225"><a name="zh-cn_topic_0000001127125012_p342820248225"></a><a name="zh-cn_topic_0000001127125012_p342820248225"></a>API Version 3+</p> 94</td> 95<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125012_p04281246226"><a name="zh-cn_topic_0000001127125012_p04281246226"></a><a name="zh-cn_topic_0000001127125012_p04281246226"></a>.webp</p> 96</td> 97</tr> 98</tbody> 99</table> 100 101**表 2** 支持的视频格式 102 103<a name="zh-cn_topic_0000001127125012_table31310367289"></a> 104<table><thead align="left"><tr id="zh-cn_topic_0000001127125012_row713736152813"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001127125012_p11383616283"><a name="zh-cn_topic_0000001127125012_p11383616283"></a><a name="zh-cn_topic_0000001127125012_p11383616283"></a>格式</p> 105</th> 106<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001127125012_p513183616281"><a name="zh-cn_topic_0000001127125012_p513183616281"></a><a name="zh-cn_topic_0000001127125012_p513183616281"></a>支持版本</p> 107</th> 108<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001127125012_p91353619287"><a name="zh-cn_topic_0000001127125012_p91353619287"></a><a name="zh-cn_topic_0000001127125012_p91353619287"></a>支持的文件类型</p> 109</th> 110</tr> 111</thead> 112<tbody><tr id="zh-cn_topic_0000001127125012_row1613136102817"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125012_p1713736192820"><a name="zh-cn_topic_0000001127125012_p1713736192820"></a><a name="zh-cn_topic_0000001127125012_p1713736192820"></a>H.264 AVC</p> 113<p id="zh-cn_topic_0000001127125012_p181343620281"><a name="zh-cn_topic_0000001127125012_p181343620281"></a><a name="zh-cn_topic_0000001127125012_p181343620281"></a>Baseline Profile (BP)</p> 114</td> 115<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125012_p5148365289"><a name="zh-cn_topic_0000001127125012_p5148365289"></a><a name="zh-cn_topic_0000001127125012_p5148365289"></a>API Version 3+</p> 116</td> 117<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125012_p1014136162818"><a name="zh-cn_topic_0000001127125012_p1014136162818"></a><a name="zh-cn_topic_0000001127125012_p1014136162818"></a>.3gp</p> 118<p id="zh-cn_topic_0000001127125012_p121418360288"><a name="zh-cn_topic_0000001127125012_p121418360288"></a><a name="zh-cn_topic_0000001127125012_p121418360288"></a>.mp4</p> 119</td> 120</tr> 121</tbody> 122</table> 123 124
