概述

基础

什么是微信小程序

微信小程序是运行在微信平台上的应用程序，它可以在微信平台上直接运行，无需下载安装。

在微信中下拉搜索或扫描二维码即可打开小程序。

点击查看微信小程序列表

注册账号

注册账号需要先登录微信公众平台，然后点击导航栏上的“立即注册”链接，选择“小程序”，再点击“注册小程序”。

注册账号使用邮箱注册，邮箱需要注意：

未被微信公众平台注册
未被微信开放平台注册
未被个人微信号绑定

收到注册邮件后，点击微信发送的“验证”链接，继续注册流程。

基础配置

小程序账号注册成功后，需要打开微信公众平台对小程序账号进行一些设置：

填写小程序名称、图标、类目等，方便后续提交审核和上线
小程序备案和微信认证，只有通过备案的小程序才能上架

项目成员

微信小程序人员分为 2 种：

项目成员：开发者、运营人员、数据分析员
体验成员：小程序未发布前体验小程序

创建项目

创建流程

获取小程序 AppID
对于开发者而言，在创建项目前，需要获取小程序的 AppID。
在小程序后台，选择 “管理” -> “开发管理” -> “开发设置” 标签页下找到 “AppID（小程序 ID）”，一般以 wx* 开头。
下载微信开发者工具
微信开发者工具是一个用于开发微信小程序的工具，它可以在 PC 端进行开发，也可以在移动端进行开发。
根据不同的操作系统下载对应的稳定版的开发者工具，下载地址：微信小程序开发者工具
扫码登录微信开发者工具
下载好微信开发者工具后，打开开发者工具，使用绑定开发者账号的微信，扫码登录开发者工具。
注意
不要使用“游客模式”登录开发者工具。
创建项目
- 点击 + 创建项目
- 填写项目名称、项目目录
- 选择 AppID、后端服务选择“不使用云服务”
- 开发模式选择“小程序”
- 点击“创建”按钮，即可创建项目。

本地开发支持 http

本地开发环境开发的接口一般是 http 协议，但是微信小程序默认不支持 http 协议，需要在小程序做一下简单配置，才能支持 http 协议。

创建完项目后，在微信开发者工具中，点击“详情” -> “本地设置” -> “项目设置” -> 勾选“不校验请求域名、TLS 版本及 HTTPS 证书”。

点击查看开启 http 协议的截图

项目目录

下面是一个基础的 JS 项目目录结构：

text

.
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json
├── project.private.config.json
├── sitemap.json
└── utils
    └── util.js

项目主配置文件

在项目根路径下，控制整个项目。

app.js 小程序入口文件，小程序启动会执行这个 JS 文件
app.json 小程序的全局配置，比如顶部颜色，顶部标题等
app.wxss 小程序全局样式，编写的样式全局生效

TIP

其中 app.js 和 app.json 是必须包含的。

app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

用于配置小程序的一些全局属性和页面路由，默认标题，顶部颜色，是否下啦刷新等。

常用配置项：

entryPagePath 小程序默认启动页
pages 页面路由，用于配置小程序的页面列表
window 窗口配置，用于配置小程序的窗口属性，比如顶部颜色，顶部标题等

全局配置参考地址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

项目页面文件

在 pages 目录下，每个页面都是一个文件夹，文件夹下包含一个 .js 文件、.json文件、.wxml文件和一个 .wxss 文件。

.js 文件：页面的逻辑文件，类似 JS 文件
.json 文件：页面的配置文件，比如页面的标题、导航栏等
.wxml 文件：页面的结构文件，类似 HTML 文件
.wxss 文件：页面的样式文件，类似 CSS 文件

TIP

其中 app.js 和 app.wxml 是必须包含的。

`page.json`

小程序页面配置文件，也称为局部配置文件，用于配置当前页面的窗口样式、页面标题等。

项目根目录下的 app.json 全局配置文件中的部分配置也支持在单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

页面中配置项在当前页面会覆盖根目录下 app.json 中相同的配置项。常用配置项：

navigationBarBackgroundColor 导航栏背景颜色，如 #000000
navigationBarTextStyle 导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText 导航栏标题文字内容

页面配置文件参考地址：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

其他文件

project.config.json 开发者工具默认配置
project.private.config.json 开发者工具用户配置
sitemap.json 微信收录页面，用于搜索，小程序上线后，搜索关键字就可以搜索到我们的小程序
utils\utils.js 工具函数文件，用于编写一些常用的函数，比如日期格式化、金额格式化等

工程配置文件

project.config.json 开发者工具默认配置
project.private.config.json 开发者工具用户配置

TIP

project.private.config.json 项目私有配置文件中的内容将覆盖 project.config.json 中的相同字段。

工程配置文件参考配置：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

SEO 配置

json

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}

SEO 配置文件 sitemap.json 参考配置：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

新建页面

默认的小程序项目只有一个页面，就是首页。

如果需要新建页面，需要在 pages 目录下新建一个文件夹，文件夹的名称就是页面的名称，文件夹下包含一个 .js 文件、.json文件、.wxml文件和一个 .wxss 文件。

方式 1

在 pages 目录上点击鼠标右键，选择 新建文件夹，比如 login
在新建的文件夹上点击鼠标右键，选择 新建Page，比如 login
此时会自动创建 4 个文件，分别是：login.js、login.json、login.wxml和login.wxss

方式 2【推荐】

在项目根目录下的全局配置文件 app.json 中的 pages 中新增一行，比如 pages/login/login
点击保存，此时会自动创建 login 文件夹和页面

启动页面调整

修改小程序启动时，首先显示的页面。

方式一【推荐】

在项目根目录下的全局配置文件 app.json 中的 entryPagePath 中修改启动页面。

json

{
  "entryPagePath": "pages/login/login"
}

方式二

在项目根目录下的全局配置文件 app.json 中如果没有配置 entryPagePath，可以在 pages 中修改页面顺序，第一个会作为启动页面。

json

{
  "pages": [
    "pages/login/login", // 登录页
    "pages/index/index" // 首页
    "pages/login/login"
  ]
}

方式三

使用小程序开发者工具的“添加编译模式”指定启动页面，建议临时使用。

点击查看通过开发者工具“添加变异模式”指定启动页面

概述 ​

基础 ​

什么是微信小程序 ​

注册账号 ​

基础配置 ​

项目成员 ​

创建项目 ​

创建流程 ​

本地开发支持 http ​

项目目录 ​

项目主配置文件 ​

app.json ​

项目页面文件 ​

page.json ​

其他文件 ​

工程配置文件 ​

SEO 配置 ​

新建页面 ​

方式 1 ​

方式 2【推荐】 ​

启动页面调整 ​

方式一【推荐】 ​

方式二 ​

方式三 ​

概述

基础

什么是微信小程序

注册账号

基础配置

项目成员

创建项目

创建流程

本地开发支持 http

项目目录

项目主配置文件

app.json

项目页面文件

`page.json`

其他文件

工程配置文件

SEO 配置

新建页面

方式 1

方式 2【推荐】

启动页面调整

方式一【推荐】

方式二

方式三