2025年小程序分包详解

小程序分包详解一 什么是小程序分包 分包指的是把一个完整的小程序项目 按照需求划分为不同的子包 在构建时打包成不同的分包 用户在使用时按需进行加载 二 为什么使用分包 小程序第一版 推出 小程序代码包不能超过 1MB 大小 所以 小程序可以秒开 但是随着业务的发展

大家好,我是讯享网,很高兴认识大家。

一:什么是小程序分包

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

二:为什么使用分包

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

三:分包后项目的构成

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

四:分包的加载规则

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

- 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.调用云函数sum

sum文件夹下的index.js中云函数编

讯享网// 云函数入口函数 exports.main = async(event, context) => { 
    return { 
    sum: event.a + event.b } } 
 / * 求和 */ sum: function() { 
    wx.cloud.callFunction({ 
    name: 'sum', data: { 
    a: 21, b: 32 } }).then(res => { 
    console.log(res) }).catch(err => { 
    console.error(err) }) }, 

2.获取openid

这里需要说一下,openID的获取,是login函数中的,在创建项目时,自带的一个,因此不需要我们编写,直接调用即可

讯享网 / * 获取openid */ getOpenId: function() { 
    wx.cloud.callFunction({ 
    name: 'login' }).then(res => { 
    console.log(res) }).catch(err => { 
    console.error(err) }) }, 

3.批量删除,云数据库的操作不可以直接对数据库进行批量删除,需要调用云函数。

批量删除的云函数

// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database(); // 云函数入口函数 exports.main = async(event, context) => { 
    try{ 
    return await db.collection('user').where({ 
    name: 'jerry' }).remove() }catch(e){ 
    console.error(e) } } 

6.3云函数数据库操作

在这里插入图片描述

-
 云端:

讯享网// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init(); const db = cloud.database(); //注意,不是wx.cloud.database(),这种是小程序端操作数据库的写法。云端没有“wx. 

小程序端调用:

 const db = wx.cloud.database(); wx.cloud.callFunction({ 
    name: 'orderAdd', data: { 
    normalUser : app.globalData._openid, //_openid的存储需要通过在云端通过wx.Context获取 sellerName: e.detail.value.sellerName, tele: e.detail.value.tele, success: res => { 
    console.log('已添加至订单') wx.showToast({ 
    duration:4000, title: '新订单添加成功' }) 

- 删

讯享网 db.collection("guest").doc(event.id).remove() 
// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() // 云函数入口函数 //查询"附近拼单" exports.main = async (event, context) => { 
    try { 
    //order return await db.collection('order').where({ 
    //下面这3行,为筛选条件 orderState:"待接单", orderType:"拼单", followID:'' }).get({ 
    success: function (res) { 
    return res } }); } catch (e) { 
    console.error(e); } } 

小程序端:

讯享网 //查询附近拼单 wx.cloud.init({ 
    traceUser: true }) wx.cloud.callFunction({ 
    name: 'orderQuery', complete: res => { 
    console.log("*orderQuery"); this.setData({ 
    nearbyOrder: res.result.data, }) } }); 
小讯
上一篇 2025-04-03 17:49
下一篇 2025-02-21 09:27

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/60170.html