1# "js" Tag<a name="EN-US_TOPIC_0000001162494585"></a> 2 3- ["pages"](#en-us_topic_0000001058948917_section3239252133513) 4- ["window"](#en-us_topic_0000001058948917_section728811177376) 5- [Example](#en-us_topic_0000001058948917_section19421142983812) 6 7The "js" tag contains the instance name, window style, and page route information. 8 9<a name="en-us_topic_0000001058948917_t092f7d78cacb46d583b3499e7cf3e7f2"></a> 10<table><thead align="left"><tr id="en-us_topic_0000001058948917_r8ff2bb3ff6c84115be187bad81bb8dce"><th class="cellrowborder" valign="top" width="25%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058948917_a16a1bbba39d7414b8e77ae9bcf230b7b"><a name="en-us_topic_0000001058948917_a16a1bbba39d7414b8e77ae9bcf230b7b"></a><a name="en-us_topic_0000001058948917_a16a1bbba39d7414b8e77ae9bcf230b7b"></a>Tag</p> 11</th> 12<th class="cellrowborder" valign="top" width="12%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058948917_a1fdbf4e9a38840029b6eb94a7f89b29a"><a name="en-us_topic_0000001058948917_a1fdbf4e9a38840029b6eb94a7f89b29a"></a><a name="en-us_topic_0000001058948917_a1fdbf4e9a38840029b6eb94a7f89b29a"></a>Data Type</p> 13</th> 14<th class="cellrowborder" valign="top" width="12%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058948917_a07bcb8a8bbea4e8d9c60b8a4b1031970"><a name="en-us_topic_0000001058948917_a07bcb8a8bbea4e8d9c60b8a4b1031970"></a><a name="en-us_topic_0000001058948917_a07bcb8a8bbea4e8d9c60b8a4b1031970"></a>Default Value</p> 15</th> 16<th class="cellrowborder" valign="top" width="9%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058948917_a39b2ea2535e04e37a418e8374f3271e4"><a name="en-us_topic_0000001058948917_a39b2ea2535e04e37a418e8374f3271e4"></a><a name="en-us_topic_0000001058948917_a39b2ea2535e04e37a418e8374f3271e4"></a>Mandatory</p> 17</th> 18<th class="cellrowborder" valign="top" width="42%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058948917_ae9e9127cfa374d18a3741f4247791acf"><a name="en-us_topic_0000001058948917_ae9e9127cfa374d18a3741f4247791acf"></a><a name="en-us_topic_0000001058948917_ae9e9127cfa374d18a3741f4247791acf"></a>Description</p> 19</th> 20</tr> 21</thead> 22<tbody><tr id="en-us_topic_0000001058948917_row19493102613510"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948917_p6494172618357"><a name="en-us_topic_0000001058948917_p6494172618357"></a><a name="en-us_topic_0000001058948917_p6494172618357"></a>name</p> 23</td> 24<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948917_p1449472643513"><a name="en-us_topic_0000001058948917_p1449472643513"></a><a name="en-us_topic_0000001058948917_p1449472643513"></a>string</p> 25</td> 26<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948917_p1749412619355"><a name="en-us_topic_0000001058948917_p1749412619355"></a><a name="en-us_topic_0000001058948917_p1749412619355"></a>default</p> 27</td> 28<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948917_p64947262359"><a name="en-us_topic_0000001058948917_p64947262359"></a><a name="en-us_topic_0000001058948917_p64947262359"></a>Yes</p> 29</td> 30<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948917_p8494122612352"><a name="en-us_topic_0000001058948917_p8494122612352"></a><a name="en-us_topic_0000001058948917_p8494122612352"></a>Name of the JavaScript instance.</p> 31</td> 32</tr> 33<tr id="en-us_topic_0000001058948917_r3d05cd5e24f14308a71d21d2d01adb81"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948917_a5a33cd31feb7416ab1ee44a6b863e57d"><a name="en-us_topic_0000001058948917_a5a33cd31feb7416ab1ee44a6b863e57d"></a><a name="en-us_topic_0000001058948917_a5a33cd31feb7416ab1ee44a6b863e57d"></a>pages</p> 34</td> 35<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948917_a90233739ef8a4977ba0a9a48282d324d"><a name="en-us_topic_0000001058948917_a90233739ef8a4977ba0a9a48282d324d"></a><a name="en-us_topic_0000001058948917_a90233739ef8a4977ba0a9a48282d324d"></a>Array</p> 36</td> 37<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948917_aaa1317b02aef4aee98e42227902ac7e5"><a name="en-us_topic_0000001058948917_aaa1317b02aef4aee98e42227902ac7e5"></a><a name="en-us_topic_0000001058948917_aaa1317b02aef4aee98e42227902ac7e5"></a>-</p> 38</td> 39<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948917_a225959a4c42f44f4ad25fac5f48f34f5"><a name="en-us_topic_0000001058948917_a225959a4c42f44f4ad25fac5f48f34f5"></a><a name="en-us_topic_0000001058948917_a225959a4c42f44f4ad25fac5f48f34f5"></a>Yes</p> 40</td> 41<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948917_a5f03a4f4a1fd461b9e4bc025569fcb2d"><a name="en-us_topic_0000001058948917_a5f03a4f4a1fd461b9e4bc025569fcb2d"></a><a name="en-us_topic_0000001058948917_a5f03a4f4a1fd461b9e4bc025569fcb2d"></a>Route information. For details, see <a href="#en-us_topic_0000001058948917_section3239252133513">"pages"</a>.</p> 42</td> 43</tr> 44<tr id="en-us_topic_0000001058948917_row12517192619239"><td class="cellrowborder" valign="top" width="25%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948917_p18517172622317"><a name="en-us_topic_0000001058948917_p18517172622317"></a><a name="en-us_topic_0000001058948917_p18517172622317"></a>window</p> 45</td> 46<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948917_p15517626112313"><a name="en-us_topic_0000001058948917_p15517626112313"></a><a name="en-us_topic_0000001058948917_p15517626112313"></a>Object</p> 47</td> 48<td class="cellrowborder" valign="top" width="12%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948917_p3517112615234"><a name="en-us_topic_0000001058948917_p3517112615234"></a><a name="en-us_topic_0000001058948917_p3517112615234"></a>-</p> 49</td> 50<td class="cellrowborder" valign="top" width="9%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948917_p1451782692314"><a name="en-us_topic_0000001058948917_p1451782692314"></a><a name="en-us_topic_0000001058948917_p1451782692314"></a>No</p> 51</td> 52<td class="cellrowborder" valign="top" width="42%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948917_p1517326152317"><a name="en-us_topic_0000001058948917_p1517326152317"></a><a name="en-us_topic_0000001058948917_p1517326152317"></a>Window information. For details, see <a href="#en-us_topic_0000001058948917_section728811177376">"window"</a>.</p> 53</td> 54</tr> 55</tbody> 56</table> 57 58> **NOTE:** 59>The **"pages"** and **"window"** tags are configured in the **"js"** tag of the **config.json** file. 60 61## "pages"<a name="en-us_topic_0000001058948917_section3239252133513"></a> 62 63The **"pages"** defines the route information of each page. Each page consists of the page path and page name. The following is an example: 64 65``` 66{ 67 ... 68 "pages": [ 69 "pages/index/index", 70 "pages/detail/detail" 71 ] 72 ... 73} 74``` 75 76> **NOTE:** 77>- The first page in the **pages** list is the home page, also referred to as the entry, of the application. 78>- The page name should not be a component name, for example, **text.hml** or **button.hml**. 79 80## "window"<a name="en-us_topic_0000001058948917_section728811177376"></a> 81 82The **"window"** defines window-related configurations. To solve the screen adaptation problem, you can use either of the following methods: 83 84- Specify **designWidth**, which is the logical screen width . All size styles, such as **width** and **font-size**, are scaled at the ratio of **designWidth** to the physical screen width. For example, when **designWidth** is 720 px and if you set **width** to 100 px, the actual display width is scaled to 200 physical px on the screen whose physical width is 1440 px. 85- Set **autoDesignWidth** to **true**, the **designWidth** field will be ignored, and the component and layout will be scaled automatically based on the screen density. The logical screen width is automatically calculated based on the physical screen width and screen density. The logical screen width may vary depending on the device. Use the relative layout to adapt to different devices. For example, on a device with a resolution of 466x466 and 320 DPI \(a screen density of 2x, with 160 DPI as the base\), 1 px is equivalent to 2 physical px. 86 87 > **NOTE:** 88 >1. The default **<length\>** value in the current style is calculated based on the screen density. For example, if the screen density is x2 \(with 160 DPI as the baseline\) and the default **<length\>** value is 1 px, the actual length rendered on the device is 2 physical px. 89 >2. Values of **autoDesignWidth** and **designWidth** do not affect how the default **<length\>** value is calculated and the final effect. 90 91 92<a name="en-us_topic_0000001058948917_table4231104116370"></a> 93<table><thead align="left"><tr id="en-us_topic_0000001058948917_row17231541183714"><th class="cellrowborder" valign="top" width="16.28837116288371%" id="mcps1.1.6.1.1"><p id="en-us_topic_0000001058948917_p1723112411376"><a name="en-us_topic_0000001058948917_p1723112411376"></a><a name="en-us_topic_0000001058948917_p1723112411376"></a>Attribute</p> 94</th> 95<th class="cellrowborder" valign="top" width="11.678832116788321%" id="mcps1.1.6.1.2"><p id="en-us_topic_0000001058948917_p12313414371"><a name="en-us_topic_0000001058948917_p12313414371"></a><a name="en-us_topic_0000001058948917_p12313414371"></a>Type</p> 96</th> 97<th class="cellrowborder" valign="top" width="10.63893610638936%" id="mcps1.1.6.1.3"><p id="en-us_topic_0000001058948917_p1323118413374"><a name="en-us_topic_0000001058948917_p1323118413374"></a><a name="en-us_topic_0000001058948917_p1323118413374"></a>Mandatory</p> 98</th> 99<th class="cellrowborder" valign="top" width="6.969303069693031%" id="mcps1.1.6.1.4"><p id="en-us_topic_0000001058948917_p2423537113218"><a name="en-us_topic_0000001058948917_p2423537113218"></a><a name="en-us_topic_0000001058948917_p2423537113218"></a>Default Value</p> 100</th> 101<th class="cellrowborder" valign="top" width="54.42455754424558%" id="mcps1.1.6.1.5"><p id="en-us_topic_0000001058948917_p17231124163710"><a name="en-us_topic_0000001058948917_p17231124163710"></a><a name="en-us_topic_0000001058948917_p17231124163710"></a>Description</p> 102</th> 103</tr> 104</thead> 105<tbody><tr id="en-us_topic_0000001058948917_row1423174133715"><td class="cellrowborder" valign="top" width="16.28837116288371%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948917_p1923284111373"><a name="en-us_topic_0000001058948917_p1923284111373"></a><a name="en-us_topic_0000001058948917_p1923284111373"></a>designWidth</p> 106</td> 107<td class="cellrowborder" valign="top" width="11.678832116788321%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948917_p1023219418372"><a name="en-us_topic_0000001058948917_p1023219418372"></a><a name="en-us_topic_0000001058948917_p1023219418372"></a>number</p> 108</td> 109<td class="cellrowborder" valign="top" width="10.63893610638936%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948917_p023217410379"><a name="en-us_topic_0000001058948917_p023217410379"></a><a name="en-us_topic_0000001058948917_p023217410379"></a>No</p> 110</td> 111<td class="cellrowborder" valign="top" width="6.969303069693031%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948917_p15424137103212"><a name="en-us_topic_0000001058948917_p15424137103212"></a><a name="en-us_topic_0000001058948917_p15424137103212"></a>: 720</p> 112</td> 113<td class="cellrowborder" valign="top" width="54.42455754424558%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948917_p1232174173717"><a name="en-us_topic_0000001058948917_p1232174173717"></a><a name="en-us_topic_0000001058948917_p1232174173717"></a>Logical screen width, which is a reference value for page design. The actual display width is scaled at the ratio of the value to the device width.</p> 114</td> 115</tr> 116<tr id="en-us_topic_0000001058948917_row78924466220"><td class="cellrowborder" valign="top" width="16.28837116288371%" headers="mcps1.1.6.1.1 "><p id="en-us_topic_0000001058948917_p1289216461925"><a name="en-us_topic_0000001058948917_p1289216461925"></a><a name="en-us_topic_0000001058948917_p1289216461925"></a>autoDesignWidth</p> 117</td> 118<td class="cellrowborder" valign="top" width="11.678832116788321%" headers="mcps1.1.6.1.2 "><p id="en-us_topic_0000001058948917_p1489220466214"><a name="en-us_topic_0000001058948917_p1489220466214"></a><a name="en-us_topic_0000001058948917_p1489220466214"></a>boolean</p> 119</td> 120<td class="cellrowborder" valign="top" width="10.63893610638936%" headers="mcps1.1.6.1.3 "><p id="en-us_topic_0000001058948917_p10892184612218"><a name="en-us_topic_0000001058948917_p10892184612218"></a><a name="en-us_topic_0000001058948917_p10892184612218"></a>No</p> 121</td> 122<td class="cellrowborder" valign="top" width="6.969303069693031%" headers="mcps1.1.6.1.4 "><p id="en-us_topic_0000001058948917_p10424237183218"><a name="en-us_topic_0000001058948917_p10424237183218"></a><a name="en-us_topic_0000001058948917_p10424237183218"></a>false</p> 123</td> 124<td class="cellrowborder" valign="top" width="54.42455754424558%" headers="mcps1.1.6.1.5 "><p id="en-us_topic_0000001058948917_p198921746524"><a name="en-us_topic_0000001058948917_p198921746524"></a><a name="en-us_topic_0000001058948917_p198921746524"></a>Whether to automatically calculate the baseline width. If <strong id="en-us_topic_0000001058948917_b14176155215510"><a name="en-us_topic_0000001058948917_b14176155215510"></a><a name="en-us_topic_0000001058948917_b14176155215510"></a>autoDesignWidth</strong> is set to <strong id="en-us_topic_0000001058948917_b68529554517"><a name="en-us_topic_0000001058948917_b68529554517"></a><a name="en-us_topic_0000001058948917_b68529554517"></a>true</strong>, <strong id="en-us_topic_0000001058948917_b1690031366"><a name="en-us_topic_0000001058948917_b1690031366"></a><a name="en-us_topic_0000001058948917_b1690031366"></a>designWidth</strong> is ignored. The baseline width is calculated based on the physical screen width and screen density.</p> 125</td> 126</tr> 127</tbody> 128</table> 129 130The following is a sample code snippet: 131 132``` 133{ 134 ... 135 "window": { 136 "designWidth": 720, 137 "autoDesignWidth": false 138 } 139 ... 140} 141``` 142 143## Example<a name="en-us_topic_0000001058948917_section19421142983812"></a> 144 145``` 146{ 147 "app": { 148 "bundleName": "com.huawei.player", 149 "version": { 150 "code": 1, 151 "name": "1.0" 152 }, 153 "vendor": "example" 154 } 155 "module": { 156 ... 157 "js": [ 158 { 159 "name": "default", 160 "pages": [ 161 "pages/index/index", 162 "pages/detail/detail" 163 ], 164 "window": { 165 "designWidth": 720, 166 "autoDesignWidth": false 167 } 168 } 169 ], 170 "abilities": [ 171 { 172 ... 173 } 174 ] 175 } 176} 177``` 178 179
