大前端 - 前端高级进阶

# 发布上线

# 分包机制

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

image-20210818000627795

# 普通分包

在构建小程序分包项目时，构建会输出一个或多个分包。

每个使用分包小程序必定含有一个主包。

所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

# 独立分包

独立分包是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。

独立分包属于分包的一种，普通分包的所有限制都对独立分包有效（2M大小）。独立分包中插件、自定义组件的处理方式同普通分包。

此外，使用独立分包时要注意：

  • 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等。

  • 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；

  • App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；

    与普通分包不同，独立分包运行时，App 并不一定被注册，因此 getApp() 也不一定可以获得 App 对象；

  • 独立分包中暂时不支持使用插件。

  • 由于独立分包中无法定义 App，小程序生命周期的监听可以使用 wx.onAppShow (opens new window)，wx.onAppHide (opens new window) 完成。

    App 上的其他事件可以使用 wx.onError (opens new window)，wx.onPageNotFound (opens new window) 监听。

应用场景：活动页面、登录注册相关页面...

大多数独立分包的场景，使用分包也可以很好的完成对应的功能，而且可以共享主包的样式。

# 分包预加载

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。

预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。

"preloadRule": {
    "进入的页面": {
      "network": "all",
      "packages": ["加载的包中的页面", "或者加载整个目录"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }

preloadRule 中，key 是页面路径，value 是进入此页面的预下载配置，每个配置有以下几项：

字段 类型 必填 默认值 说明
packages StringArray 是 无 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
network String 否 wifi 在指定网络下预下载，可选值为： all: 不限网络 wifi: 仅wifi下预下载

说明：

  • network建议使用all；
  • 所有预下载的分包的总体积要小于2m，限额会打包自动校验；

不是必要，不是非常影响用户的交互体验，不要占用预下载分包的份额，不要使用大于40k的图片与资源。

# 检查分包大小

  • 使用HBuilder中的发布方式打包；

    image-20210818001350889

  • 在详情中进行查看：

    image-20210818001509762

    点击查看详情，用于排查哪些比较大的资源：

    image-20210818001614038

# 基本流程

img

  • 测试-检查-打包-配置
  • 在开发工具中上传
  • 管理后台中，提交审核，通过后发布

# 成员说明

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

  • 项目成员：表示参与小程序开发、运营的成员，可登录小程序管理后台，包括运营者、开发者及数据分析者。管理员可在“成员管理”中添加、删除项目成员，并设置项目成员的角色。
  • 体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员。

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

权限 运营者 开发者 数据分析者
开发者权限 √
体验者权限 √ √ √
登录 √ √ √
数据分析 √
微信支付 √
推广 √
开发管理 √
开发设置 √
暂停服务 √
解除关联公众号 √
腾讯云管理 √
小程序插件 √
游戏运营管理 √

配置路径：登录https://mp.weixin.qq.com/，选择管理 -> 成员管理 -> 添加项目成员，最多100个；体验成员->最多100个（已认证）；

image-20210818123401415

# 版本说明

权限 说明
开发版本 使用开发者工具，可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。 点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
体验版本 可以选择某个开发版本作为体验版，并且选取一份体验版。
审核中版本 只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
线上版本 线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

# 注意事项

# 配置BaseURL

export const baseUrl = process.env.NODE_ENV === 'development' ? 'http://192.168.31.132:3000' : 'https://yourdomain.com'

uniapp内置的打包工具即是webpack

说明：

  • uniapp中，使用发布方式打包，即process.env.NODE_ENV会自动设置成production；

  • 在上线之前，请确保配置了api后台项目，并申请了域名，配置好了HTTPS服务；

  • 在小程序后台中，添加安全域名：

    image-20210818124432904

# 使用HBuilder生产打包方式

一定要注意，在uniapp中开发的时候，启动的是调试进程，这时的代码中有很多调试代码，也未进行压缩。

步骤：

  • 打开项目的pages.json文件；

  • 点击顶部的菜单：发行-> 小程序-微信

    image-20210818124620714

# 打包上线

# 小程序打包

见 检查分包大小，注意这里的项目名称并非小程序的项目名称。

小程序的名称在注册小程序的时候，就已经确定下来了，这里只是一个项目别名。

请检查小程序的AppID。

# 上传代码

image-20210818123801710

上传代码是用于提交体验或者审核使用的。

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

image-20210818124047238

# 审核与发布

# 审核版本

上传成功之后，登录小程序管理后台 (opens new window) - 开发管理 - 开发版本 就可以找到刚提交上传的版本了。

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

image-20210818124719121

然后点击下一步：

image-20210818124806867

说明：

  • 加急的情况：与用户的钱有关，与平台的稳定有关，与自身的利益有关，才加急——慎用；
  • 上面一般要写一个注释，说明版本的升级情况；

审核中：

image-20210818125910968

# 关于灰度发布

审核通过后，需要在页面中点击发布，选择全量发布或者指定用户进行发布（灰度测试）。

点击发布后，即可发布小程序。小程序提供了两种发布模式：全量发布和分阶段发布。全量发布是指当点击发布之后，所有用户访问小程序时都会使用当前最新的发布版本。

分阶段发布是指分不同时间段来控制部分用户使用最新的发布版本，分阶段发布我们也称为灰度发布。一般来说，普通小程序发布时采用全量发布即可，当小程序承载的功能越来越多，使用的用户数越来越多时，采用分阶段发布是一个非常好的控制风险的办法。

← 支付专题 →