认识微信小程序

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（样