微信小程序——起步

账号注册

在开发小程序之前，要去微信开发平台注册一个账号
1.打开 微信公众平台，点击立即注册

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

3.输入账号信息

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


点击链接，进行激活
5.信息登记，注册类型 (需要选择中国大陆和个人，企业其他需要资质认证)

6.主体信息登记与确认

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

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

7.注册之后，进入后台

完善小程序信息

在完成小程序账号的注册后，需要补充小程序的基本信息，如名称、图标、描述等。
注：在填写小程序类目时不要选择游戏类型


点击 前往设置 , 设置小程序类目信息
1.点击右上角添加类目

2.管理员授权

3.手机微信进行认证

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

获取id

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

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

小程序 ID 即 AppId 是小程序在整个微信账号体系内的唯一身份凭证，后续在很多地方都会用到，例如：新建小程序项目、真机调试、发布小程序等操作时，必须有小程序 ID。
小程序密钥 是开发者对小程序拥有所有权的凭证，在进行 微信登录、微信支付，或进行发送消息等高级操作时会使用到。
在微信公众后台，单击左侧开发标签，选择 “开发管理”，在新的页面中点击 “开发设置”，就可以看到开发者 ID 信息。请妥善保管你的小程序 ID 和小程序密钥，在后续的开发中会经常使用到，获取位置见下图：

增加成员

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

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

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

微信开发者工具

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

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

1. 稳定版：稳定性高，开发中一般推荐大家使用稳定版本

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

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

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

创建项目

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

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

• 项目名称：输入项目名称
• 目录：选择小程序开发文件夹，注意：小程序的目录建议是空目录，否则官方会有提示，见下图
• AppID：填写自己申请的小程序 AppID
• 开发模式：选择小程序
• 后端服务：选择不使用云服务
• 模板选择：选择不使用模板
  
  
  3.点击确定，如果能够看到小程序的开发主界面，说明小程序项目已经创建成功
  

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

一个完整的小程序项目分为两个部分：主体文件、页面文件
主体文件 又称小程序全局文件，顾名思义，全局文件能够作用于整个小程序，影响到小程序的每个页面，且主体文件必须放到项目的根目录下，主要由三部分组成：

页面文件 是每个页面所需的文件，小程序页面文件都存放在 pages 目录下，一个页面一个文件夹，每个页面通常由四个文件组成，每个文件只对当前页面有效：

1. 页面文件，wxss、json 文件能够覆盖主体文件中的样式和配置
2. 强烈建议：页面文件夹名称和页面文件名称要保持一致 感叹号
   

调试小程序

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

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

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

新建页面

第一种方式：

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

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

📌 注意事项：

1. 在输入页面文件名称的时候，不要输入后缀名 ❗
2. 新建页面成功以后，会在 app.json 的 pages 选项中新增页面路径

第二种方式：

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

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

小程序配置

小程序中常见的配置文件有以下几种：

1. 全局配置文件：app.json ➡ 小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。
2. 局部配置文件：页面.json ➡ 小程序页面配置文件，用于配置当前页面的窗口样式、页面标题等
3. 项目配置文件：project.config.json ➡ 小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置
4. 搜索配置文件：sitemap.json ➡ 配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率

全局配置

小程序 app.json 文件是小程序的全局配置文件，用于配置小程序的一些全局属性和页面路由。

当小程序启动时，会自动读取 app.json 文件中的配置，根据配置生成对应的页面和组件、界面表现、网络超时时间、底部 tab，在小程序运行过程中起着关键的作用。

pages

pages 字段：用于指定小程序由哪些页面组成，用于为了让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的 路径（含文件名） 信息。

{
  "pages": [
    "pages/index/index",
    "pages/list/list"
  ]
}

📌 注意事项：

1. 文件名不需要写文件后缀框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理
2. 小程序中新增/减少页面，都需要对 pages 数组进行修改。
3. 未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）

有时候可以直接配置生成需要的页面

window

window字段： 用于设置小程序的状态栏、导航条、标题、窗口背景色。

更多配置属性

tabBar

tabBar 字段：定义小程序顶部、底部 tab 栏，如果小程序是一个多 tab 应用，例如：可以在客户端窗口的底部或顶部通过 tab 栏可以切换页面，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

tabBar 配置项

属性	描述	类型	默认值
color	tab 上的文字默认颜色，仅支持十六进制颜色	HexColor
selectedColor	tab 上的文字选中时的颜色，仅支持十六进制颜色	HexColor
backgroundColor	tab 的背景色，仅支持十六进制颜色	HexColor
borderStyle	tabbar 上边框的颜色， 仅支持 black / white	string	black
list	tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	tabBar 的位置，仅支持 bottom / top	string	bottom

List 配置项：list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序，每个项都是一个对象

属性	描述	类型	是否必填
pagePath	页面路径，必须在 pages 中先定义	string	是
text	tab 上按钮文字	string	是
iconPath	图片路径，icon 大小限制为 40kb， 建议尺寸为 81px * 81px，	string	是
selectedIconPath	选中时的图片路径，icon 大小限制为 40kb， 建议尺寸为 81px * 81px，不支持网络图片。	string	是

📌 注意事项：

1. list 是一个数组，只能配置最少 2 个、最多 5 个 tab
2. 当 position 为 top 时，不显示 icon

{
  "tabBar": {
    "color": "#252933",
    "selectedColor": "#FF734C",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "text": "首页",
        "iconPath": "/assets/tabbar/home.png",
        "selectedIconPath": "/assets/tabbar/home-active.png",
        "pagePath": "pages/home/home"
      },
      {
        "text": "列表",
        "iconPath": "/assets/tabbar/list.png",
        "selectedIconPath": "/assets/tabbar/list-active.png",
        "pagePath": "pages/list/list"
      },
      {
        "text": "购物车",
        "iconPath": "/assets/tabbar/cart.png",
        "selectedIconPath": "/assets/tabbar/cart-active.png",
        "pagePath": "pages/cart/cart"
      },
      {
        "text": "我的",
        "iconPath": "/assets/tabbar/my.png",
        "selectedIconPath": "/assets/tabbar/my-active.png",
        "pagePath": "pages/my/my"
      }
    ]
  }
}

页面配置

小程序的页面配置，也称局部配置，每一个小程序页面也可以使用自己的 .json 文件来对本页面的窗口表现进行配置

需要注意的是：页面配置文件的属性和 全局配置文件中的 window 属性几乎一致

只不过这里不需要额外指定 window 字段，因此如果出现相同的配置项，页面中配置项 会覆盖全局配置文件中相同的配置项。

项目配置文件

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

project.config.json 文件中配置公共的配置，

project.private.config.json 配置个人配置

project.private.config.json 文件同样可以对项目进行配置

project.private.config.json中的相同设置优先级高于project.config.json

支持使用 sass/less

在 project.config.json 文件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"]，即可开启工具内置的 sass 编译插件。 如需同时开启 typescript 编译插件，可将该字段修改为 ["typescript ", “sass”]。 目前支持三个编译插件：typescript、less、sass

```json
{
  "setting": {
+    "useCompilerPlugins": [
+      "sass"
+    ]
  }
}

我们在配置的时候，编译插件的名称是 sass，但是文件的后缀名是 .scss

这是因为 Sass 是 Css 预处理语言，scss 是 Sass 的一个语法版本

## sitemap.json
微信现已开放小程序内搜索，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。



可以通过 `sitemap.json` 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。语法如下：
```json
{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}

常用配置项：

属性	属性说明	属性值
action	是否允许被搜索	可选项有：allow 、disallow
page	允许/不允许被搜索的页面	页面路径或者通配符

// 所有页面都会被微信索引（默认情况）
{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}

// 配置 path/to/page 页面不被索引，其余页面允许被索引
{
  "rules":[
    {
      "action": "disallow",
      "page": "path/to/page"
    }
  ]
}

📌 注意事项：

1. 没有 sitemap.json 则默认所有页面都能被索引
2. sitemap.json 文件中默认的设置，是优先级最低的默认规则，所有页面都会被微信索引