Hello~第一个微信小程序
文章目录
1. 项目结构介绍
小程序的结构如上图所示:由pages、utils两个文件夹、app.js、app.json、app.wxss、project.config.json、sitemap.json等文件组成。
小程序的主体由app.js、app.json、app.wxss三部分组成。
1.1 app.js
以.js结尾的文件是JavaScript文件,即页面脚本文件。在该文件中监听并处理小程序的生命周期函数、声明全局变量、调用框架提供的丰富的API。
1.2 app.json
配置小程序是由哪些页面组成的,配置小程序的窗口、背景色,配置导航条样式,配置默认标题,该文件不能添加注释。具体代码如下所示:
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
具体的代码解释如下图所示:
1.3 app.wxss
是整个小程序的公共样式表,可以在页面组件的class属性上直接使用,主要配置全局样式。
其余部分的介绍:
1.4 pages文件夹
用于存储小程序的框架页面,一个页面是一个目录,且每个页面都必须在app.json的pages中配置,且pages中的第一个页面是小程序的首页,具体如下图所示:
一个页面框架是由同路径下同名的4个不同的后缀文件组成,如下图所示的index页面框架:
由index.js(页面脚本文件)、index.json(配置文件)、index.wxml(页面结构文件)、index.wxss(样