文档:https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html#js-交互逻辑
普通快速模板
开发目录
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
分析图片 从下往上 =>
project.config.json:整个项目的配置文件。
app.js:整个应用程序入口文件。
app.json:入口文件配置信息。
app.wxss:应用程序全局样式文件。
wxss = WeiXin Style Sheet微信样式表,类似于css文件。
utils文件夹:工具包文件所在目录。自行封装的模块。供其他小程序页面使用。类似于vue中的过滤器概念,工具包中可以定义一些格式化的函数等。
pages文件夹:小程序各个页面的视图,业务逻辑,样式,配置文件所在目录。特别注意:在小程序中每一个页面都拥有独立的视图,业务逻辑,样式,配置文件。和vue的类比如下:
index/index.js相当于vue中的
wxml = WeiXian Markup Language微信标记语言,类似于html或xml。
各文件之间的关联关系:
pages文件夹下的每一个文件夹,如index,logs等,内部包含四个文件,但四个文件并不是必须的,如.json文件就可以没有。并且每个文件的文件名称(不包含后缀名称)一般约定对应文件夹的名称,如:index文件夹中四个文件命名分别为:index.json,
index.js, index.wxss,
index.wxml。这是一种约定好的风格。每个文件夹相当于vue中定义的一个页面级组件。和当前小程序的入口配置文件app.json有对应(很重要的关联),如:
“pages”: [ “pages/index/index”, “pages/logs/logs” ]
每个文件夹中的四个文件之间的关联关系,微信已帮我们做过封装,不用开发者再引入。如index.json,index.js,index.wxml,index.wxss自去产生关系。在渲染视图index.wxml时会自动使用index.wxss样式文件,自动使用index.js业务逻辑文件及配置文件index.json。