小程序开发系列------三、项目分析

电玩女神 2022-10-27 12:21 144阅读 0赞

上一篇文章中我们新建了一个小程序项目，项目结构如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]

这篇文章我们来对项目结构进行下分析：

#### 两大目录： ####

<table> 
 <thead> 
  <tr> 
   <th align="left">目录</th> 
   <th align="left">功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">pages</td> 
   <td align="left">小程序项目的页面目录</td> 
  </tr> 
  <tr> 
   <td align="left">utils</td> 
   <td align="left">小程序公共脚本目录</td> 
  </tr> 
 </tbody> 
</table>

#### 五大配置文件： ####

<table> 
 <thead> 
  <tr> 
   <th align="left">文件</th> 
   <th align="left">功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">app.js</td> 
   <td align="left">小程序的逻辑文件</td> 
  </tr> 
  <tr> 
   <td align="left">app.json</td> 
   <td align="left">小程序的配置文件</td> 
  </tr> 
  <tr> 
   <td align="left">app.wxss</td> 
   <td align="left">小程序的公共样式文件</td> 
  </tr> 
  <tr> 
   <td align="left">project.config.json</td> 
   <td align="left">小程序项目配置文件</td> 
  </tr> 
  <tr> 
   <td align="left">sitemap.json</td> 
   <td align="left">小程序是否允许微信索引</td> 
  </tr> 
 </tbody> 
</table>

#### pages目录 ####

新项目中的pages目录结构如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]  
pages下有两个子目录：index和logs，这两个子目录就是两个页面。  
子目录里面包含了后缀分别为：wxml、js、wxss和json的四个文件 (为了便于理解，可以把pages下同一子目录中的不同后缀文件看成一个整体，这就是一个页面)：

<table> 
 <thead> 
  <tr> 
   <th align="left">文件</th> 
   <th align="left">功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">.wxml</td> 
   <td align="left">文件类似于前端开发中的HTML文件，用来写页面元素</td> 
  </tr> 
  <tr> 
   <td align="left">.js</td> 
   <td align="left">文件类似于前端开发中的js文件，用来写页面各种事件</td> 
  </tr> 
  <tr> 
   <td align="left">.wxss</td> 
   <td align="left">文件类似于前端开发中的css文件，用来写页面各种样式</td> 
  </tr> 
  <tr> 
   <td align="left">.json</td> 
   <td align="left">配置文件，可以定义一些数据供页面使用</td> 
  </tr> 
 </tbody> 
</table>

#### 小程序运行流程 画的比较粗糙，但是很用心： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]  
总结：  
小程序启动后分别从app.js和app.wxml文件中加载了部分逻辑和样式，然后从app.json读取了pages中放在第一个且作为启动页的页面，并加载渲染了这个页面，当我们点击启动页面中的头像时，触发了绑定在头像元素上的事件，然后跳转到了logs页面。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: /images/20221024/c0180a0577ca46a1928c67b054b5a73e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]: /images/20221024/edaa885a031c46abba93b477d8964f6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]: /images/20221024/758e9d4d861b4d9caa3e3c5c6a3a2913.png