分类： 微信小程序开发

每一个微信小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考微信小程序页面配置

例如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

微信小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考微信小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

完整配置项说明请参考微信小程序全局配置

微信小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个微信小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个微信小程序页面由四个文件组成，分别是：

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

允许上传的文件

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

1. wxs
2. png
3. jpg
4. jpeg
5. gif
6. svg
7. json
8. cer
9. mp3
10. aac
11. m4a
12. mp4
13. wav
14. ogg
15. silk
16. wasm
17. br
18. cert

每一个微信小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考微信小程序页面配置

例如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

微信小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考微信小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

完整配置项说明请参考微信小程序全局配置

微信小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个微信小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个微信小程序页面由四个文件组成，分别是：

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

允许上传的文件

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

1. wxs
2. png
3. jpg
4. jpeg
5. gif
6. svg
7. json
8. cer
9. mp3
10. aac
11. m4a
12. mp4
13. wav
14. ogg
15. silk
16. wasm
17. br
18. cert

有两种方式可以方便地查看微信小程序的运营数据

方法一：

登录微信小程序管理后台 – 数据分析

点击相应的标签页可以看到相关的数据。

方法二：

使用We分析，在微信中方便地查看运营数据

一个微信小程序从开发完到上线一般要经过 预览-> 上传代码 -> 提交审核 -> 发布等步骤。

预览

使用开发者工具可以预览微信小程序，帮助开发者检查微信小程序在移动客户端上的真实表现。

点击开发者工具顶部操作栏的预览按钮，开发者工具会自动打包当前项目，并上传微信小程序代码至微信的服务器，成功之后会在界面上显示一个二维码。使用当前微信小程序开发者的微信扫码即可看到微信小程序在手机客户端上的真实表现。

上传代码

同预览不同，上传代码是用于提交体验或者审核使用的。

点击开发者工具顶部操作栏的上传按钮，填写版本号以及项目备注，需要注意的是，这里版本号以及项目备注是为了方便管理员检查版本使用的，开发者可以根据自己的实际要求来填写这两个字段。

上传成功之后，登录微信小程序管理后台 – 版本管理 – 开发版本 就可以找到刚提交上传的版本了。

可以将这个版本设置 体验版 或者是 提交审核

提交审核

为了保证微信小程序的质量，以及符合相关的规范，微信小程序的发布是需要经过审核的。

在开发者工具中上传了微信小程序代码之后，登录 微信小程序管理后台 – 版本管理 – 开发版本 找到提交上传的版本。

在开发版本的列表中，点击 提交审核 按照页面提示，填写相关的信息，即可以将微信小程序提交审核。

需要注意的是，请开发者严格测试了版本之后，再提交审核， 过多的审核不通过，可能会影响后续的时间。

发布

审核通过之后，管理员的微信中会收到微信小程序通过审核的通知，此时登录 微信小程序管理后台 – 版本管理 – 审核版本中可以看到通过审核的版本。

点击发布后，即可发布微信小程序。微信小程序提供了两种发布模式：全量发布和分阶段发布。全量发布是指当点击发布之后，所有用户访问微信小程序时都会使用当前最新的发布版本。分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本，分阶段发布我们也称为灰度发布。一般来说，普通微信小程序发布时采用全量发布即可，当微信小程序承载的功能越来越多，使用的用户数越来越多时，采用分阶段发布是一个非常好的控制风险的办法。

微信小程序码

很多场景下用户会通过扫码快速进入一个微信小程序，在微信小程序设计的初期，微信小程序平台提供的二维码的形式。我们发现用户在扫一个二维码时，他并不知道当前这次扫码会出现什么样的服务，因为二维码的背后有可能是公众号、微信小程序、网页服务、支付页面、添加好友等不同的服务。为了让用户在扫码之前就有一个明确的预期，因此微信设计了微信小程序码，如图5-3所示。

​ 图5-3 “微信小程序数据助手”的微信小程序码

微信小程序码在样式上更具辨识度和视觉冲击力，相对于二维码来说，微信小程序主题的品牌形象更加清晰明显，可以帮助开发者更好地推广微信小程序。在发布微信小程序之后，微信小程序管理平台会提供对应的微信小程序码的预览和下载，开发者可以自行下载用于线上和线下的微信小程序服务推广。

一般的软件开发流程是：开发者编写代码并自测开发版程序，直到程序达到一个稳定可体验的状态时，开发者会把这个体验版本给到产品经理和测试人员进行体验测试，最后修复完程序的 Bug 后发布，供外部用户正式使用。微信小程序的版本根据这个流程设计了微信小程序版本的概念，如表5-3所示。

表5-3 微信小程序的版本

考虑到项目是协同开发的模式，一个微信小程序可能同时由多个开发者进行开发，往往开发者在微信小程序开发者工具上编写完代码后需要到手机进行真机体验，所以每个开发者拥有自己对应的一个开发版本。因为处于开发中的版本是不稳定的，开发者随时会修改代码覆盖开发版，为了让测试和产品经理有一个完整稳定的版本可以体验测试，微信小程序平台允许把其中一个开发版本设置成体验版，因此建议在项目开发阶段特殊分配一个开发角色，用于上传稳定可供体验测试的代码，并把他上传的开发版本设置成体验版。

如果你只是一个人开发微信小程序，可以暂时先跳过这部分，如果是一个团队需要先了解一些概念。

多数情况下，一个团队多人同时参与同一个微信小程序项目，每个角色所承担的工作或者权限不一样，中大公司的分工更为仔细。为了更形象的表达团队不同角色的关系以及权限的管理，我们通过虚拟一个项目成员组织结构来描述日常如何协同合作完成一个微信小程序的发布，组织关系如图5-1所示。

​ 图5-1 虚拟微信小程序项目组

项目管理成员负责统筹整个项目的进展和风险、把控微信小程序对外发布的节奏，产品组提出需求，设计组与产品讨论并对需求进行抽象，设计出可视化流程与图形，输出设计方案。开发组依据设计方案，进行程序代码的编写，代码编写完成后，产品组与设计组体验微信小程序的整体流程，测试组编写测试用例并对微信小程序进行各种边界测试。项目一般的成员构成与工作流程如图5-2所示。

​ 图5-2 提需求到发布微信小程序的流程

微信小程序成员管理

微信小程序成员管理包括对微信小程序项目成员及体验成员的管理。

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

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

不同项目成员拥有不同的权限，从而保证微信小程序开发安全有序。

各权限功能说明

• 开发者权限：可使用微信小程序开发者工具及开发版微信小程序进行开发
• 体验者权限：可使用体验版微信小程序
• 登录：可登录微信小程序管理后台，无需管理员确认
• 数据分析：使用微信小程序统计模块功能查看微信小程序数据
• 微信支付：使用微信小程序微信支付（虚拟支付）模块
• 推广：使用微信小程序流量主、广告主模块
• 开发管理：微信小程序提交审核、发布、回退
• 开发设置：设置微信小程序服务器域名、消息推送及扫描普通链接二维码打开微信小程序
• 暂停服务设置：暂停微信小程序线上服务
• 解除关联公众号：可解绑微信小程序已关联的公众号
• 微信小程序插件：可进行微信小程序插件开发管理和设置
• 游戏运营管理：可使用小游戏管理后台的素材管理、游戏圈管理等功能

需要留意，项目管理者控制整个微信小程序的发布、回退、下架等敏感操作，不应把敏感操作的权限分配给不相关人员