微信小程序（一）初步，包括（初步了解微信小程序，小程序项目结构，小程序宿主环境，发布与上线等）

---

前言

本文包含 微信小程序初步 等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（初步了解微信小程序，小程序项目结构，小程序宿主环境，发布与上线等）
如有做的不好的地方，敬请谅解，欢迎指出，持续更新改正

---

一 微信小程序

1. 小程序与普通网页开发的区别

1. 运行环境不同
   网页运行在浏览器环境中
   小程序运行在微信环境中
2. API 不同
   由于运行环境的不同，所以小程序中，
   无法调用 DOM 和 BOM 的 API。
   但是，小程序中可以调用微信环境提供
   的各种 API，例如：
   • 地理定位
   • 扫码
   • 支付
3. 开发模式不同
   网页的开发模式：浏览器 + 代码编辑器
   小程序有自己的一套标准开发模式：
   • 申请小程序开发账号
   • 安装小程序开发者工具
   • 创建和配置小程序项目

---

2. 注册小程序开发帐号

https://mp.weixin.qq.com/

---

3. 安装开发者工具

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：

1. 快速创建小程序项目
2. 代码的查看和编辑
3. 对小程序功能进行调试
4. 小程序的预览和发布

推荐下载和安装最新的稳定版（Stable Build）的微信开发者工具，下载页面的链接如下：
https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

$$代理模式修改$$

---

4. 创建小程序项目

1. 点击“加号”按钮
2. 填写项目信息, AppID, 目录
3. 不使用云服务

---

5. 查看项目效果

编译: 可以在开发者工具上查看效果
预览: 会生成二维码, 在手机上扫描查看效果

---

6. 主界面的 5 个组成部分

---

二 项目结构

1. 了解项目的基本组成结构

1. pages 用来存放所有小程序的页面
2. utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
3. app.js 小程序项目的入口文件
4. app.json 小程序项目的全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json 项目的配置文件
7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

---

2. 小程序页面的组成部分

小程序官方建议把所有小程序的页面，都存放在 pages 目录中，以单独的文件夹存在，如图所示：

其中，每个页面由 4 个基本文件组成，它们分别是：

1. .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
2. .json 文件（当前页面的配置文件，配置窗口的外观、表现等）
3. .wxml 文件（页面的模板结构文件）
4. .wxss 文件（当前页面的样式表文件）

---

3. JSON 配置文件

JSON 是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例外：通过不同的 .json 配置文件，可以对小程序项目进行不同级别的配置。

小程序项目中有 4 种 json 配置文件，分别是：

1. 项目根目录中的 app.json 配置文件
2. 项目根目录中的 project.config.json 配置文件
3. 项目根目录中的 sitemap.json 配