小程序分包以及云开发

一:什么是小程序分包

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

二:为什么使用分包

小程序第一版 推出 小程序代码包不能超过1MB 大小,所以,小程序可以秒开,但是随着业务的发展,又推出整个小程序所有分包大小不超过 8M,而8M不能秒开,于是就推出分包加载。
对于小程序而言
整个小程序所有分包大小不超过 8M
单个分包/主包大小不能超过 2M

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

三:分包后项目的构成

分包后,小程序项目由 1 个主包 + 多个分包组成:

主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
分包:只包含和当前分包有关的页面和私有资源

四:分包的加载规则

① 在小程序启动时,默认会下载主包并启动主包内页面

  • tabBar 页面需要放到主包中

② 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示

五:分包的步骤

第一步 :在项目目录里面添加一个文件夹 package 与app.json同级
在这里插入图片描述
第二步:我们在package文件夹里面创建一个packageA文件夹
在这里插入图片描述第三步:我们在packageA里面新建page文件

第四步:我们在 app.json文件里面设置

"subpackages": [
    {
   
      "root": "news",
      "pages": [
        "pages/detail/detail"
      ]
    }
  ],

第五步:分包预加载

  1. 什么是分包预下载
    分包预下载指的是:在进入小程序的某个页面时,由框架自动预下载可能需要的分包,从而提升进入后续分包页面时的启动速度。

  2. 配置分包的预下载
    预下载分包的行为,会在进入指定的页面时触发。在 app.json 中,使用 preloadRule 节点定义分包的预下载
    规则,示例代码如下:

"preloadRule": {
   
    "pages/jok/jok": {
   
      "network": "all",
      "packages": [
        "news"
      ]
    }
  },
//network有“all”和“wifi”可以选

分包配置
subpackages里面的配置项包括
root String 分包根目录
name String 分包别名,分包预下载时可以使用
pages StringArray 分包页面路径,相对与分包根目录
independent Boolean 分包是否是独立分包

那么,分包到这里就分好啦!

六:小程序云开发

6.1小程序云开发云开发云函数安装依赖步骤

1:安装nodejs,准备好环境,这一步就不细说了,没有安装的可以自行百度,不知道有没有安装的可以输入 node -v 查看一下。

2:新建一个云函数模板,在cloudfunctions目录底下,新建一个云函数的文件bookinfo。
在这里插入图片描述
3:在新建文件上右击文件,选择在终端打开。
在这里插入图片描述

这个时候会弹出一个cmd窗口。

在这里插入图片描述4:在cmd 打开云函数目录中,安装依赖。
输入命令:

npm install --production

依赖安装成功之后,文件里面多会出现package-lock.json这个文件。
在这里插入图片描述

6.2云函数的调用

对于云函数的调用,我们首先要在云函数的文件的夹中新建Node.js云函数,然后编写对应的云函数,最后上传更新(创建并部署)。如图:

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农阿茹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值