草庐IT

微信小程序---分包操作

口袋の的天空 2023-04-22 原文

有时候我们的小程序太大，首次打开小程序的时候回比较慢，这个时候我们可以试试分包操作。分包可以让用户在操作小程序的时候按需下载资源（用户在进入某些页面的时候才去下载相应的资源，可以加快小程序的速度，优化用户体验）。

小程序代码有个2M限制，是不是有的时候放图片都得忍着点，不敢把太大的放在小程序里面，只能放远程；但是随着项目不断迭代更新，代码图片越来越多，开发的时候更加小心翼翼。是不是很不舒服，还能不能让我舒服的敲代码了。

那就说一下分包的限制吧；分包以后单独包最大不能超过2M；整个小程序可以达到20M；比那2M限制翻了10倍；那就让我们愉快地敲代码吧。

打包原则：

  • 声明 subpackages后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包） 中
  • app（主包）也可以有自己的 pages（即最外层的 pages 字段）
  • subpackage 的根目录不能是另外一个subpackage内的子目录
    -tabBar页面必须在 app（主包）内
  • 登录页面和tabbar页面，这几个页面是要分成主包的，tabBar 页面必须在 app（主包）内

引用原则：

  • packageA 无法 require packageB JS 文件，但可以 require app、自己 package内的 JS 文件
  • packageA无法import packageB 的 template，但可以require app、自己 package内的 template
  • packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源

1.首先在app.json里面全局配置里面配置分包：（subpackages 属性和pages同级）

我在根路径创建了两个分包，分别是home和pay

  "pages": [
    "pages/index/index",
    "pages/user/index",
  ],
  "subpackages":[
    {
      "root":"template/home", //分包的根路径，彼此之间不可以重复
      "name":"home",  	//分包的标识名字，用于预加载分包时用
      "pages":[			//分包的路径（不预加载的时候，用户进入分包路径才会加载分包资源）
        "shop_house/shop_house"
      ],
      "independent":false   //是否独立分包（可以不加载主包就独立加载的包，独立分包不能当做全局资源）
    },
    {
      "root":"template/pay",
      "name":"pay",
      "pages":[
        "pay_house/pay_house"
      ],
      "independent":false
    }
  ],

2.创建文件

template是存放分包的文件夹。home和pay这两个文件夹分别是template的子文件夹，里面可以放图片等其他资源和页面。
注意：静态资源哪个模块的就放哪个包下，不要共享，共享就会变成主包里的资源。这也就是为什么不直接把images文件放在template根路径的原因

3.查看分包效果

4.主包与分包之间的页面跳转

1）主包跳转到分包

注意：跳转的路径要带上分包里配置的root这一级（所有的相对路径全部写上），不然它找不到路径就会报错

主包：

<!--pages/user/index.wxml-->
<text>pages/user/index.wxml</text>
<image src="../images/1.jpeg"></image>
<navigator url="../../template/home/shop_house/shop_house">跳转shopping_house</navigator>
<navigator url="../../template/pay/pay_house/pay_house">跳转pay_house</navigator>


分包：

<!--template/pay/pay_house/pay_house.wxml-->
<text>template/pay/pay_house/pay_house.wxml</text>
<image src="../images/3.jpeg"></image>

2）分包跳转到主包

分包跳转到主包（方法很多种，我这里说两种）

  • wx.switchTab(Object object)
    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数。
    此方法跳转的页面必须是在tabBar定义过的页面

  • wx.reLaunch(Object object)
    关闭所有页面，打开到应用内的某个页面，路径后面可带参数。

分包：
点击“去首页”，这样就直接去主页了

<navigator open-type="switchTab" url="/pages/index/index">去首页</navigator>

分包微信小程序spanclasstoken前端

有关微信小程序---分包操作的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  4. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  5. ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2

    我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？

  6. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  7. ruby - 在 Ruby 中是否有一种惯用的方法来操作 2 个数组？ - 2

    a=[3,4,7,8,3]b=[5,3,6,8,3]假设数组长度相同，是否有办法使用each或其他一些惯用方法从两个数组的每个元素中获取结果？不使用计数器？例如获取每个元素的乘积:[15,12,42,64,9](0..a.count-1).eachdo|i|太丑了...ruby1.9.3 最佳答案 使用Array.zip怎么样？:>>a=[3,4,7,8,3]=>[3,4,7,8,3]>>b=[5,3,6,8,3]=>[5,3,6,8,3]>>c=[]=>[]>>a.zip(b)do|i,j|c[[3,5],[4,3],[7,6],

  8. ruby-on-rails - 如何让 Rails View 返回其关联的操作名称？ - 2

    我有一个非常简单的Controller来管理我的Rails应用程序中的静态页面:classPagesController我怎样才能让View模板返回它自己的名字，这样我就可以做这样的事情:#pricing.html.erb#-->"Pricing"感谢您的帮助。 最佳答案 4.3RoutingParametersTheparamshashwillalwayscontainthe:controllerand:actionkeys,butyoushouldusethemethodscontroller_nameandaction_nam

  9. Postman测试简单操作 - 2

    1、接口请求基本操作1.1例子tips在view的选项可以zoomin调整窗口字帖大小。1、创建一个测试的workspace，并命名为test2、test后面新增一个addrequest3、选择发送GET，URL为一个开源的https://api.apiopen.top/api/sentences获取每日一句4、点击send查看内容Tips:如果提示出现Error:tunnelingsocketcouldnotbeestablished,statusCode=407错误，参照以下解决办法)关于tunnelingsocketcouldnotbeestablished,cause=getaddri

  10. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信

随机推荐