小程序分包详解

news2024/12/29 10:18:40

一:什么是小程序分包

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

二:为什么使用分包

小程序第一版 推出 小程序代码包不能超过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.调用云函数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,
            })
          }
        });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/614862.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java SSM 教代会审批管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 教代会管理系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的源代码 和数据库,系统主要采用…

计算机网络开荒2-应用层

文章目录 一、网络应用体系结构2.1 客户机/服务器结构(Client-Server,C/S)2.2 点对点结构(Peer-to-peer,P2P)2.3 混合结构(Hybrid) 二、网路应用的进程通信2.1 套接字Socket2.2 应用层协议的内容 三、网络应用的需求与传输层服务四、Web4.1 HTTP4.1.1 HTTP连接类型4.1.1.1 非持…

mysql慢sql优化实战:in order by优化处理

背景 线上查询慢的问题日益突出,专门写一个帖子记录一下处理过程,会定期更新优化处理方案 套餐余量统计查询菜单,数据库查询时间一分钟五十秒,优化之后耗时109毫秒,性能提升很大.所有时间统计均以数据库层面进行统计.用户使用层面因为有数据传输、带宽、业务逻辑处理等因素…

只要7分钟,教你从0-1搭建BI系统,这份大佬整理的指南免费送!

在BI行业干了快十年了,做过制造业供应链的BI项目,也跟过零售电商、房地产、银行的BI建设,经常有朋友咨询关于BI建设的内容,今天总结了一套BI项目建设指南,直接分享给大家,觉得不错记得点赞收藏。 通常情况…

实战【金融评分卡】

金融评分卡 网站:百融、同盾 1.导入 信贷评分卡是一种用于评估个人或企业申请贷款的工具,就像-个评分表-样。我们可以把它看作是银行或金融机构用来判断某人是否有资格获得贷款的一-种方式。 想象一下,你是一个银行家,有很多人向你申请贷款,比如个人贷…

cas单点登录-服务端部署

一.需求描述 公司开发系统越来越多,每个系统都有自己的登录认证流程,给用户很繁琐的体验,统一认证单点登录迫在眉睫 二.流程图 三.本地运行cas服务端 1.拉取cas服务端代码,切换到对应分支(我使用的是6.4.x&#xff…

proxmox7.4 安装后配置

关于proxmox7安装和配置的博文,倒是不少。可惜鱼龙混杂,踩了不少坑,如今实践成功后,做一分享。 proxmox7.4安装(与安装linux系统类似) 1.去官网https://proxmox.com/en/downloads 下载安装镜像,注意: 下…

iTOP-3588开发板Android12源码定制开发uboot开发

uboot 开发-Uboot 源码是 v2017.09 版本。目前在该平台上已经支持 RK 所有主流在售芯片。支持 的功能主要有:  支持 RK Android 固件启动;  支持 Android AOSP 固件启动;  支持 Linux Distro 固件启动;  支持 Rockchip miniloader 和 SPL/TPL 两种 Pre-loader 引导…

对比才知差距!海尔“精华洗”用实验告诉用户

《怪诞关系学》一书中讲到,人生来会与他人做比较,对比是天性,竞争是必然。用高深点的话讲,人是通过对比身边的事物和同类来定位自身的,只有对比才知道差距有多大。“仰观宇宙之大,俯察品类之盛”&#xff0…

Python如何批量合并70个doc和docx文件

目录 一、问题的提出 二、算法分析 三、代码展示 四、注意事项 有一位朋友发来70多个数名命名的doc和docx文件,问我有没有vba代码,可以把这些文件按照数字大小的顺序合并。我试着用了chatgpt,搞了一串vba代码行不通,于时我就找…

【PyQt5】(01)PyQt的详细介绍

文章目录 前言一、PyQt的前世今生1.1 PyQt6、PyQt5和PyQt41.2 商业版和开源版1.3 支持的操作系统 二、 PyQt的优点三、PyQt的应用场景总结 前言 PyQt是使用Python语言编写的QT库的界面工具包。QT是一个跨平台的C应用程序开发框架,可以用于创建高性能、高可靠性、图形…

高频面试八股文用法篇(六) 说说反射及其作用

目录 什么是反射? 反射的作用 反射的优缺点 反射的用途 什么是反射? 动态语言。 当程序运行时,允许改变程序结构或变量类型,这种语言称为动态语言。Java 并不是动态语言,但是它却又一个非常突出的动态相关的机制&am…

Permission denied, please try again.

如果你是容器或者二进制安装启动的gitlab,在克隆代码一直有这样的问题 正克隆到 h5... git192.168.0s password: Permission denied, please try again. 服务ipgit 192.168.40.15 gitlab192.168.40.17 1、 docker run -d --name gitlab -p 80:80 -p 224:22 -p 4…

基于springboot的在线学习平台

源码获取,V:qq2056908377 采用技术 项目整体采用传统的B/S架构和MVC设计模式,开发语言选用JavaHTMLJavascript,技术上采用SpringBoot、Mybatis等开发框架,数据库采用MySQL 5.7。 功能介绍 平台分为用户端和管理两个系…

1.8 基于Java配置方式使用Spring MVC

一、基于Java配置方式使用Spring MVC 实现步骤 1、创建Maven项目 Maven项目 - SpringMvcDemo02 2、添加相关依赖 在pom.xml文件里添加相关依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/…

chatgpt赋能python:如何用Python创建一个成功的项目

如何用Python创建一个成功的项目 无论是初学者还是有经验的开发者&#xff0c;Python语言的丰富生态系统和易于使用的语法使得它在项目开发领域中成为了一种非常流行的选择。但是&#xff0c;要构建一个好的Python项目需要很多工作&#xff0c;需要一些经验和技巧。在这篇文章…

LeetCode_二叉树_BFS_中等_117.填充每个节点的下一个右侧节点指针 II

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; }填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 …

数据共享传输:台式机和笔记本同步文件!

为什么要在台式机和笔记本同步文件&#xff1f; “我想在台式机和笔记本同步文件。因为我工作时使用笔记本&#xff0c;在家里使用安装了Windows 10系统的台式机&#xff0c;我想要在笔记本和台式机之间同步应用程序、游戏、文档等。有没有一种可以在台式机和笔记本同步文件的…

11 【组件通信】

1.props 适用于的场景:父子组件通信 注意事项: 如果父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据 如果父组件给子组件传递数据(非函数):本质就是父组件给子组件传递数据 书写方式:3种 [‘todos’],{type:Array},{type:Array,default:[]} 特殊情况&am…

为何要将行驶证转为Excel?在线怎么操作?需要注意些什么?

一、为何要将行驶证转为excel表格&#xff1f;有何好处&#xff1f; 将行驶证转为Excel一般是为了方便信息的整理和管理。将行驶证上的信息录入Excel表格中&#xff0c;可以实现快速搜索、排序和筛选等功能&#xff0c;避免了手动整理信息的繁琐和容易出错的问题。此外&#xf…