一、微信小程序-快速回顾(创建项目、项目结构分析)

前言：软件开发需要学习的东西真的是太多了，实在是没精力，也没必要费心思记住微信小程序所有功能的具体实
现方式，我们只需要有一点点微信小程序的基础就够了，当有实际项目开发时，在开发前花点心思阅读 微信小程序
开发文档 就可以很快的上手，当然前提是需要有一点点微信小程序的基础，而本系列文章可以帮助快速回顾基础

一、 创建微信小程序项目

1.1. 准备工作

1. 注册小程序帐号

① 登录 微信公众平台 注册一个帐号

② 选择帐号类型为小程序，每个邮箱只能注册一个帐号类型，这之后的流程就按照提示一步一步填写就可以了，
最后需要添加一个微信帐号，用来当作该小程序的管理员

2. 安装开发工具

微信小程序官方为了方便我们开发、上传等，提供了专属的 微信开发者工具，以及配套的 工具使用文档

我们需要先安装该工具，之后借助其来创建、开发、预览、调试、上传我们的微信小程序项目

1.2. 创建微信小程序项目

1. 打开微信开发者工具，初次使用时，会让我们使用管理员微信扫码登录，登陆后，在开发工具左面的菜单栏选择
要创建的项目是小程序，然后再点击开发工具右面的 + 号进行创建

2. 配置小程序项目信息， AppID：在 小程序开发管理 页面可以找到

3. 创建成功后，开发工具会直接打开小程序项目

二、项目结构分析

使用微信开发者工具创建项目后，会得到下图中的项目结构，我们可以将其拆成三部分来学习，页面文件、全局
文件、其他文件（ 没用黄色框圈起来的文件 ）

2.1. 其他文件

将它们归类为其他文件，说明它们不是学习和关注的重点，只要知道其含义就好，现在按照图中顺序介绍：

文件名	描述
.eslintrc.js	ECMAScript 语法校验插件 ESLINT 的配置文件，与微信小程序本身无关，不重要，可删除
project.config.json	项目构建文件，如指明基础库版本、appid 等，很少手动修改，想详细了解请参照 项目配置文件
sitemap.json	帮助项目进行 SEO 优化的文件，很少修改，可删除，想详细了解请参照 sitemap 配置

注意，项目的根目录中必须有 project.config.json 文件，项目才能正常运行

2.2. 全局文件

在根目录中以 app 开头的 3 个文件 app.json、app.js、app.wxss 被称为全局文件，它们会影响全局效果：

文件名	描述
app.js	应用逻辑文件，通常用来绑定应用的生命周期函数、错误监听函数和页面不存在监听函数
app.json	应用配置文件，配置应用中各页面的路径、配置 Tabbar 等，也可以配置默认的页面信息，如页面标题、页面是否可以下拉等
app.wxss	应用样式文件，在该文件中设置的元素样式，会成为元素默认样式

2.3. 页面文件

微信小程序的页面文件很有规律，每个页面的构成，需要 4 个不同后缀名、相同文件名的文件

1. 页面逻辑文件：xx.js，定义页面中要使用的 JS 脚本、或绑定页面的生命周期函数
2. 页面配置文件：xx.json，配置页面信息，如页面标题、页面是否可以下拉，或声明要使用的组件等
3. 页面布局文件：xx.wxml，布局画面元素，类似 html
4. 页面样式文件：xx.wxss，设置画面元素样式，类似 css

将这个规律套用在刚刚生成的目录结构中就很容易看懂了，开发工具会默认帮我们创建一个首页页面，一般习惯将
首页命名为 index，所以在 pages 目录内创建了一个 index 目录，其用来专门存放首页对应的 4 个文件

注意：

当页面配置文件和应用配置文件都对同一属性进行配置时，页面配置文件的优先级更高

当页面样式文件和应用样式文件对同一元素进行样式设置时，页面样式文件的优先级更高