微信小程序框架介绍以及项目目录结构

迈不过友情╰ 2021-09-07 18:40 509阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

## 微信小程序框架介绍 ##

微信团队为小程序提供的框架命名为**MINA**。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套JavaScript API，让开发者方便的使用微信

客户端提供的各种基础功能与能力，快速构建应用。

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供

了数据传输和事件系统，让开发者能够专注于数据与逻辑。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5GdrKqFO-1621055365425)(image-20210422092031163.png)\]][img-5GdrKqFO-1621055365425_image-20210422092031163.png]

## 项目目录结构 ##

官方文档：  
[https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html][https_developers.weixin.qq.com_miniprogram_dev_framework_structure.html]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]  
小程序包含一个描述整体程序的 `app` 和多个描述各自页面的 `page`。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">文件</th> 
   <th align="left">必需</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html" rel="nofollow">app.js</a></td> 
   <td align="left">是</td> 
   <td align="left">小程序逻辑</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/config.html" rel="nofollow">app.json</a></td> 
   <td align="left">是</td> 
   <td align="left">小程序公共配置</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html" rel="nofollow">app.wxss</a></td> 
   <td align="left">否</td> 
   <td align="left">小程序公共样式表</td> 
  </tr> 
 </tbody> 
</table>

一个小程序页面由四个文件组成，分别是：

<table> 
 <thead> 
  <tr> 
   <th align="left">文件类型</th> 
   <th align="left">必需</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html" rel="nofollow">js</a></td> 
   <td align="left">是</td> 
   <td align="left">页面逻辑</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/" rel="nofollow">wxml</a></td> 
   <td align="left">是</td> 
   <td align="left">页面结构</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE" rel="nofollow">json</a></td> 
   <td align="left">否</td> 
   <td align="left">页面配置</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html" rel="nofollow">wxss</a></td> 
   <td align="left">否</td> 
   <td align="left">页面样式表</td> 
  </tr> 
 </tbody> 
</table>

**注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。**

**允许上传的文件**

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：*.js、app.json、*.wxml、\*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

1.  wxs
2.  png
3.  jpg
4.  jpeg
5.  gif
6.  svg
7.  json
8.  cer
9.  mp3
10. aac
11. m4a
12. mp4
13. wav
14. ogg
15. silk
16. wasm
17. br

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[img-5GdrKqFO-1621055365425_image-20210422092031163.png]: /images/20210716/d4176122170f4c06aee43f61953a5951.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_structure.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb2xpMjAxMzE0_size_16_color_FFFFFF_t_70]: /images/20210716/c132d0b905fe4405945ffc33e9855a5d.png