• uniapp配置小程序分包、路由系统跳转、


    1.分包

    简介:

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

    在构建小程序分包项目时,构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。
    所谓的主包,即放置默认启动页面/TabBar页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据开发者的配置进行划分。

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

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

    步骤:

    在项目中,把 tabBar 相关的 4 个页面放到主包中,其它页面(例如:商品详情页、商品列表页)放到分包中。在 uni-app 项目中,配置分包的步骤如下:

    1. 在项目根目录中,创建分包的根目录,命名为 subpkg

    2. 在 pages.json 中,和 pages 节点平级的位置声明 subPackages 节点,用来定义分包相关的结构:

    1. {
    2. "pages": [
    3. {
    4. "path": "pages/home/home",
    5. "style": {}
    6. },
    7. {
    8. "path": "pages/cate/cate",
    9. "style": {}
    10. },
    11. {
    12. "path": "pages/cart/cart",
    13. "style": {}
    14. },
    15. {
    16. "path": "pages/my/my",
    17. "style": {}
    18. }
    19. ],
    20. "subPackages": [
    21. {
    22. "root": "subpkg",
    23. "pages": []
    24. }
    25. ]
    26. }

    2.路由跳转

    uniapp 页面跳转。只是方法和标签有所不同。主要分为2种跳转模式,页面标签跳转和方法跳转
    代码示例如下

    使用标签跳转:navigator

    使用方法跳转:uni.navigateTo()

    1. <navigator url="../details/details">跳转到详情页navigator>
    2. <button type="primary" @click="godetail">跳转到详情页button>

  • 相关阅读:
    MySQL存储过程详解与案例应用
    基于Springboot+vue的茶叶销售商城网站 elementui
    LeetCode刷题---每月交易I
    每日一博 - 闲聊经典微服务架构
    自动驾驶行业观察之2023上海车展-----车企发展趋势(2)
    Go语言基于Iris+Xorm后台管理系统源码
    你知道MySQL是如何解决幻读的吗?
    《基于Python的机器学习实战:分类算法的应用与实现》
    文章摘要智能提取【基于BERT技术】
    爆款博客:深入解析卷积神经网络在人脸识别中的应用——从理论到实践
  • 原文地址:https://blog.csdn.net/m0_63748493/article/details/126888854