小程序基础知识1-7.21

小程序的学习我是选择尚硅谷的，所以笔记是从那边复制总结过来的，方便后面我进行复习，我是三方面一起学的，就是vue项目的练手，react的知识点学习，以及小程序开发学习，就是想趁这个暑假一起来学习，不然一天只学一个会腻，然后项目的那个笔记我不知道如何总结，写了一点点文档但是感觉不太行，所以没有发出来，可能项目干的太少了，没有什么经验总结，我争取多拿几个项目练手，争取早日可以写出来。要是大家有推荐的项目，可不可以推荐点，谢谢哈，本人跪求好心人推荐的项目练手，马上要实习啦，特别焦虑。

---

要是已经会的，那直接可以跳过，没有什么知识点哈，这一篇写的是如何创建账号，下载工具的这些，没有什么知识点

微信小程序是一种运行在微信内部的 轻量级 应用程序。

在申请账号前，我们需要先准备一个邮箱，该邮箱要求：

1️⃣ 未被微信公众平台注册

2️⃣ 未被微信开放平台注册

3️⃣ 未被个人微信号绑定过 ,如果被绑定了需要解绑 或 使用其他邮箱 

我觉得这个账号不行，那就换一个哈

微信小程序账号注册

在开始微信小程序开发之前，需要访问 微信公众平台，注册一个微信小程序账号。

1、打开 微信公众平台，点击立即注册

---

2、选择注册的帐号类型，在这里我们需要 选择小程序

---

3、输入账号信息

---

4、邮箱激活，需要进入邮箱进行激活

---

5、信息登记，注册类型 (需要选择中国大陆和个人，企业其他需要资质认证)

---

6、主体信息登记与确认

在进行管理员身份验证的时候，推荐使用自已的微信进行扫码，

​ 将自已设置为小程序账号的管理员，方便以后对小程序进行开发、成员等相关的设置

---

7、小程序注册完成，点击前往小程序，即可进入小程序后台

---

---

完善小程序账号信息

打开微信公众平台对小程序账号进行一些设置，这是你开发前的准备工作，完善后才可以进入后续的开发步骤，这是因为小程序在后续进行提交审核的时候，小程序账号信息是必填项，因此在注册小程序以后，需要补充小程序的基本信息，如名称、图标、描述等。

2.管理员授权

3.手机微信进行认证

4.添加小程序类目，注意：选择类目的时候不要选择小游戏类目 

---

---

小程序开发者 ID

小程序的开发者账号是免费的，只要开发者满足开发资质就可以免费注册，并且会获得对应的开发者 ID

一个完整的开发者 ID 由小程序 ID（AppID）和一个小程序密钥（AppSecret）组成。

小程序 ID 即 AppId 是小程序在整个微信账号体系内的唯一身份凭证，后续在很多地方都会用到，例如：新建小程序项目、真机调试、发布小程序等操作时，必须有小程序 ID。

小程序密钥 是开发者对小程序拥有所有权的凭证，在进行 微信登录、微信支付，或进行发送消息等高级操作时会使用到。

---

在微信公众后台，单击左侧开发标签，选择 "开发管理"，在新的页面中点击 "开发设置"，就可以看到开发者 ID 信息。请妥善保管你的小程序 ID 和小程序密钥，在后续的开发中会经常使用到，获取位置见下图：

---

开发成员和体验成员

如果就是纯练手直接跳过这一步

小程序提供了两种不同的成员角色：项目成员 和 体验成员

项目成员：参与小程序开发、运营的成员，可登陆小程序管理后台，包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。

体验成员：参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

---

微信开发者工具

为了帮助开发者简单和高效地开发和调试微信小程序，微信官方提供了 微信开发者工具，利用开发者工具可以很方便地进行小程序开发、代码查看以及编辑、预览和发布等功能。

在 微信开发者工具 下载页面，可以看到微信开发者工具包含三个版本：

1. 稳定版：稳定性高，开发中一般推荐大家使用稳定版本（我是直接选择下载这个版本的）

2. 预发布版：稳定性尚可，一般包含新的、大的特性，通过了内部测试

3. 开发版：稳定性差，主要用于尽快修复缺陷和敏捷上线小的特性，如果想体验新特性，可以使用这个版本

然后选择合适的版本进行下载，在下载完成后，双击下载好的微信开发者工具安装包，根据引导点击下一步、我接受、直至安装完成。第一次使用微信开发者工具的时候，需要使用手机微信扫码登录，登录成功即可进入项目选择界面

---

---

创建小程序项目

1、打开微信开发者工具，左侧选择小程序，点击 + 号即可新建项目

---

2、在弹出的新页面，填写项目信息

• 项目名称：输入项目名称

• 目录：选择小程序开发文件夹，注意：<font color='red'>小程序的目录建议是空目录，否则官方会有提示，见下图</font>

• AppID：填写自己申请的小程序 AppID

• 开发模式：选择小程序

• 后端服务：选择不使用云服务

• 模板选择：选择不使用模板

目录我是选择别的盘，然后尽量选择空文件夹作为小程序的目录

---

3、点击确定，如果能够看到小程序的开发主界面，说明小程序项目已经创建成功

这个页面我调过了，反正能进入到这个页面就可以啦

---

开发者工具设置

下面根据自己喜欢去调整，不需要直接跳过这一步

1.将小程序模拟器移动右侧：点击菜单栏的 视图 ➡ 外观 ➡ 将模拟器移到右侧，小程序模拟器即可调整到右侧

2.小程序主题设置，点击菜单栏的 设置 ➡ 外观设置 ➡ 在弹框中将主题和调试工具选择为深色

3.小程序主题设置，点击菜单栏的 设置 ➡ 外观设置 ➡ 在弹框中将主题和调试工具选择为深色

4.编辑区的设置，点击菜单栏的 设置 ➡ 编辑器设置 ➡ 按照自己的洗好调整行距和字号，或者其他设置（我的设置行距是20，字号是16）

5.编辑区的设置，点击菜单栏的 设置 ➡ 编辑器设置 ➡ 按照自己的洗好调整行距和字号，或者其他设置

---

---

小程序目录结构和文件介绍

这一部分我觉得可以看一眼，对于下手来说

主要分为两个部分：主体文件、页面文件

主体文件：可以作用于整个小程序，影响每一个页面，并且主体文件必须放在项目的根目录下

app.js	小程序的入口文件	必须存在
app.json	全局配置	必须存在
app.wxss	全局样式	非必须

---

页面文件：通常放在pages目录下，一个页面一个文件夹，每个文件只对当前页面有效

XXX.js	页面逻辑	必须存在
XXX.wxml	页面结构	必须存在
XXX.wxss	页面样式，可以覆盖主体文件中的样式和配置	非必须
XXX.json	页面配置，可以覆盖主体文件中的样式和配置	非必须

---

小程序目录部分清单：

├─pages                      ➡ 小程序页面存放目录
│
│  ├─index                   ➡ index 文件夹代表是 index 页面所需的文件
│  │      index.js            ➡ index 页面逻辑
│  │      index.json        ➡ index 页面配置
│  │      index.wxml       ➡ index 页面结构
│  │      index.wxss       ➡ index 页面样式
│  .eslintrc.js                 ➡ Eslint 配置文件
│  app.js                       ➡ 小程序入口，即打开小程序首页执行的项目
│  app.json                   ➡ 小程序的全局配置
│  app.wxss                  ➡ 小程序的全局样式
│  project.config.json    ➡ 小程序开发者工具配置
│  project.private.config.json
│  sitemap.json              ➡ 小程序搜索优化

---

如何调试小程序

可以跳过这一步，我觉得刚开始

微信开发者工具缓存非常严重

如果发现代码和预期不一样，先点击编译

编译后还是没有达到预期的效果，就需要清除缓存， 甚至可以重启项目

---

---

如何新建页面

方式一：

1. 在 pages 目录上 点击右键 新建文件夹，输入页面目录的名称，例如：list

2. 在 list 目录上 点击右键 点击 page，输入页面文件的名称，例如：list

方式二：

        在 app.json 的 pages 选项中，新增页面路径即可

        在新增页面目录以后，会自动在 pages 目录下生成页面文件

页面创建成功后可以在app.json 的 pages 选项中新增页面路径

---

调试基础库

这一步我觉得可以跳过，因为刚开始学习，没有用到哈

指微信开发者工具中可以选择的微信基础库版本。

微信基础库是指小程序的运行环境，给小程序提供了运行所需的各种 API 和工具，以及基础框架和运行逻辑等。

小程序开发者可以在微信开发者工具中选择所需的微信基础库版本，作为运行和调试小程序时的运行环境。

每个小程序有自己所允许使用的基础库最低版本要求，开发者需要选择要兼容的基础库版本，从而确保小程序的功能正常运行。

---