小程序之独立分包

TT_Close
4,477 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情

经过对分包的学习和使用,了解到还有独立分包、分包预下载和分包异步化这些有趣的功能.下面一起来学习一下独立分包.

您能在这里看到啥

  1. 啥是独立分包
  2. 创建
  3. 区别
  4. 使用场景
  5. 注意事项

啥是独立分包

本质上也是分包的一种.只是它可以独立于主包和分包并可以单独运行.

创建

  • 独立分包的创建和普通分包创建基本上一样的

    • 创建积分模块为独立分包

      截屏2022-12-10 08.38.31.png

    • 唯一区别,如下所示:

      // 当你设置independent为true是,重新运行.设置独立分包就生效了.
"independent":true

区别

  • 依赖关系
    1. 普通分包必须依赖主包才可以运行.
    2. 独立分包不依赖任何包.既可以独立运行
  • 进入场景区别
    1. 从独立分包页面中进入小程序,不下载主包.
    2. 从分包页面进入小程序.必须下载主包
  • 引用区别

    1. 独立分包不能引用主包公共资源.

      • 举例说明

        • 经过上面的积分商城模块.我们就得到了今天主角独立分包.

        • 在主包app.wxss中,添加通用样式.如下所示

          截屏2022-12-10 16.35.46.png

        • 在独立分包和普通分包中,我们分别使用通用样式.看一下界面效果显示.

          • 界面代码.如下所示
          <view class="column_center bg">
     <view class="text_bg row_center">
      我是**分包
  </view>
</view>

          • 预期结果

            1. 按钮居中显示
            2. 文件居中显示

          • 普通分包.显示结果

            截屏2022-12-10 16.32.43.png

          • 独立分包.显示结果

            截屏2022-12-10 16.31.23.png

      从上面的显示结果中,我们不难发现.在主包里配置的row_center和column_center,在普通分包中可以正常使用,在独立分包犹如未定义一样.所以在开发过程中,独立分包你可以完全理解为一个新的工程.一切都从头开始.

    2. 主包无法引用独立分包内的私有资源.

    3. 独立分包和独立分包之间,不能相互引用私有资源.

    4. 独立分包和普通分包,不能相互引用私有资源.

  • 独立分包暂不支持使用插件
  • App只能在主包内定义,独立分包中不支持定义App.

使用场景

基于对独立分包特性的了解.我们知道,独立分包是不依赖主包即可运行.页面启动快就是它的优点.我们可以根据这个特点.简单举例几个应用场景.

- 邀请用户
- 活动页
- 优惠券领取

注意事项

  • 关于独立分支的一个小小的疑问之getApp()

    在主包和普通分包中,都可以通过getApp()方法获取到App对象.那独立分包可以吗?.

    我的理解是不可以的.首先独立分包启动应该是不进入app.js文件的.下面我们测试并验证一下.我理解是不是对的.说干就干.

    1. 在app.js声明周期中的onLaunch()增加打印.如下所示

      截屏2022-12-10 17.33.03.png

    2. 添加独立分包的编译模式,然后重新启动.

      • 启动正常.显示独立分包界面.

        截屏2022-12-10 17.35.41.png

      • 控制台输出结果.如下所示

        截屏2022-12-10 17.37.25.png

    3. 再添加一个普通分包的编译模式.

      这里我们就直接看结果吧.

      截屏2022-12-10 17.39.13.png

    从上面测试结果中,我们可以得到以下两点:

    • 当用户从独立分包页面进入小程序时.主包是不存在的.自然也会进入app.js文件.此时App是不存在的. 所以调用getApp()获取的结果是undefined.当用户从独立分包进入到主包的时候,主包才会下载.也自然就会执行app.js文件.App才会被注册.

    • 当用户从主包进入独立分包的时候,此时App已经注册完成了,并且主包也下载完成了,所以此时是可以获取App的.

  • 怎么实现独立分包数据全局共享

    官方在基础库2.2.4版本后,在getApp中支持[allowDefault]参数,你可以理解为,当在独立分包中使用getApp()方法时.你需要设置allowDefault参数为true.这样在App未被定义时,会返回一个默认实现.当主包加载App被注册的时候,会把你在独立分包设置的全局参数,从新赋值给真正的App中.

    多说无益.还是要实践一下.

    1. 在我们的积分独立分包中,配置App参数.

      截屏2022-12-10 18.09.37.png

    2. 在主包模块文件中,我们获取一下getApp.查看一下结果

      截屏2022-12-10 18.10.14.png

    3. 控制台输出结果

      截屏2022-12-10 18.11.14.png

    从上面的测试中,认证了.确实可以的.

  • 独立分包怎么获取app生命周期呢.

    由于独立分包没有注册app.所以我们不能使用app.js里的方法.但是系统提供了生命周期监听方法如下所示

    1. wx.onAppShow 监听小程序切前台事件。该事件与App.onShow的回调参数一致
    2. wx.onAppHide监听小程序切后台事件。该事件与App.onHide的回调时机一致
    3. wx.onError:监听小程序错误事件。如脚本错误或 API 调用报错等。该事件与 App.onError 的回调时机与参数一致
    4. wx.onPageNotFound:监听小程序要打开的页面不存在事件。该事件与 App.onPageNotFound 的回调时机一致

Demo

学习资料

avatar
文章
阅读
粉丝