小程序:使用分包异步化解决一个分包引入另一个分包的组件/函数的问题

这篇具有很好参考价值的文章主要介绍了小程序:使用分包异步化解决一个分包引入另一个分包的组件/函数的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

我们一般使用小程序插件的时候,喜欢将其放在分包中,因为插件体积会打包进主包内,很容易造成主包体积超过 2M 从而无法发布,我们暂且叫这个有插件的分包叫分包P,这时候另外两个业务分包XY,想引入这个分包P里的插件(插件里包含了几个组件和一些接口函数)。

方案一:因为分包里本身就是可以引入插件的,所以想直接在分包XY里面分别引入插件,但是同一个插件是不能在一个项目里多次引用的,所以这个方案不行。
方案二:把插件放在主包里,这样虽然可以实现,但是插件大小会打包进主包,容易超过 2M 无法发布
方案三:分包异步化,将插件单独放在一个分包P中,分包XY通过分包异步化来引入。

分包异步化

官网
简单介绍一下,一般我们从主包跳到分包或者分包跳到分包,都是跳页面,在跳的时候才会去加载分包,但是如果在一个分包里想要引入另一个分包的组件或者接口的时候,这个时候就没办法正常使用了,因为另一个分包不知道在什么时机去加载。分包异步化则解决了这个问题。

跨分包自定义组件引用

目录结构,有两个分包1和2,分包1中有一个自定义组件,这时候分包2想要引入分包1的组件,代码如下:
微信小程序分包异步化,# 小程序,小程序,javascript,前端

"subpackages": [
	{
	  "root": "pagesPlugin1",
	  'pages': [
	    'page-index/index'
	  ],
	  "plugins": {
	    "assist-photo": {
	      "version": "3.2.1",
	      "provider": "wxcf13b931313209a4"
	    }
	  }
	},
	{
	  "root": "pagesPlugin2",
	  'pages': [
	    'page-index/index'
	  ]
	}
]

这是分包2的代码

<style lang="less">
</style>

<template>
  <div>这是pagesPlugin2</div>
  <chose-part></chose-part>
</template>

<script>
import wepy from '@wepy/core'
wepy.page({
  data: {
  },
  onShow() {
  }
})
</script>
<config>
{
  "usingComponents": {
    "chose-part": "../../pagesPlugin1/components/chose-part/index",
  },
  "componentPlaceholder": {
    "chose-part": "view"
  }
}
</config>

这个时候,打开分包2的页面就可以看到这个组件了

跨分包 JS 代码引用

分包2想调用分包1的接口,这里在分包1先导出一些函数
pagesPlugin1/utils/index.js

export const sayHello = () => {
  console.log('hello')
}

在分包2调用
pagesPlugin2/page-index/index

import wepy from '@wepy/core'
wepy.page({
  data: {
  },
  methods: {
    getPagesPlugin1 () {
      require.async('../../pagesPlugin1/utils/index.js').then(pkg => {
        console.log('utils', pkg)
        pkg.sayHello()
      }).catch(({mod, errMsg}) => {
        console.error(`path: ${mod}, ${errMsg}`)
      })
    }
  },
  onShow() {
    this.getPagesPlugin1()
  }
})

注意:如果是使用 wepy 这样的框架,则需要在分包的页面中引入一下这些接口函数,否则最终打包不会打包这个接口函数,因为识别不出这些依赖

所有代码亲测有效哦~
微信小程序分包异步化,# 小程序,小程序,javascript,前端文章来源地址https://www.toymoban.com/news/detail-787028.html

到了这里,关于小程序:使用分包异步化解决一个分包引入另一个分包的组件/函数的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 完美解决小程序onload异步函数导致onshow先执行的问题

    在理想状态下我们将页面首次加载  onLoad  的数据存放到Storage,方便 onShow 用于判断接口的请求,但是在异步函数参与进来后一切都变得不一样了 在这里我是想在  onLoad  中获取到商户的bid,将获取到的bid存放在Storage,然后在  onShow  里面根据存放的bid获取不同商户的商品

    2024年02月07日
    浏览(35)
  • 巧用回调函数解决微信小程序与后台数据交互出现的异步问题

            微信小程序端需要发送一个包含文字与图片的表单数据给后端,我一开始的思路是 先 上传图片得到临时的URL, 后 执行POST请求将表单数据发送给后端,但后端只能获取到文字,而图片URL却始终获取不到。         注意看我上面的思路, 一先一后 ,无形中将两

    2024年02月16日
    浏览(42)
  • 【解决】uniapp的全局公共组件(不用在每个页面引入组件标签),各平台均可使用!!!!

    感谢滚动君大佬提供的思路,但是此方法只适用于微信小程序 app端之所以不能用的关键原因在于不能找到resourcePath原始路径,不像小程序会提供一个路径区分哪些文件来自组件哪些文件来自页面,如果不做区分,那么页面栈就会超载,无法显示。 既然它自身不能提供路径,

    2024年02月12日
    浏览(50)
  • 记录一下:uniapp小程序分包后引用组件报错问题

     具体遇到的场景是这样的,我当前文件是在主包中,但是引入的这几个组件是在分包下面,于是就造成了引入错误,我曾尝试者用绝对跟相对路径引入缺仍然报错 最终看到一个贴记录的是: 小程序分包后,主包应该是不能引用分包的任何资源,分包可以引用主包的任何资源

    2024年02月15日
    浏览(40)
  • 原生微信小程序基础-分包加载&&自定义组件&&&项目全流程

    小程序分包加载 小程序分包加载-为什么要分包加载 微信平台对小程序单个包的代码 体积限制为 2M ,超过 2M 的情况下可以采用分包来解决 即使小程序代码体积没有超过 2M 时也可以拆分成多个包来实现 按需加载 配置文件能忽略的只有静态资源, 代码无法被忽略 配置忽略文

    2024年02月08日
    浏览(49)
  • 小程序request三层封装和分包以及路由和组件传参

    工程化的概念 工程化API封装 【重点】30% 工程化组件封装 【重点】30% 小程序路由【重点】30% 上架 小程序分包【重点】10% 在开发小程序时,需要将自己的代码进行封装,命名要规范,位置要规范,以达到代码复用,可以大量生产的效果 对 wx.request() 发请求的API进行三层封装

    2024年02月14日
    浏览(32)
  • 项目中使用iframe引入html 解决路由错乱问题以及父子组件传值调用方法

    父组件 子组件: 方法一、通过子组件iframe1向父组件传值,再通过父组件向子组件iframe2传值可达到目的; 注意:模拟时 需要开启服务器,否则会出现跨域问题! 看图你应该就明白了 在项目中使用iframe引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器

    2024年02月01日
    浏览(47)
  • [uni-app] 微信小程序 - 组件找不到/导入报错 (分包问题导致)

    切换了个路径下的组件, 导入失败, 尝试了清缓存重启删项目等一些列操作均无效 上面两个路径中, 都存在一模一样的 videItem.vue Main 路径是可以导入的 Main 路径是无法导入的 后来发现, 是 分包 的问题导致. 我们先来假设一个场景,如果小程序进行了分包操作, 其中有个公共组

    2024年02月16日
    浏览(53)
  • 【微信小程序开发】学习小程序的模块化开发(自定义组件和分包加载)

    模块化开发是一种将复杂的应用程序分解为一系列独立的模块,每个模块负责完成特定的功能的开发方式。模块化开发可以提高代码的可维护性和可复用性,使开发过程更加高效和灵活。 模块化开发在软件开发领域中被广泛应用,其重要性和优势不言而喻。 首先,模块化开

    2024年02月05日
    浏览(59)
  • 02react 函数组件useState的异步问题

    常见的钩子函数:useState、useEffect useState作为最常见的一个hook,在使用中总是会出现各种坑,最明显的就是 useState 更新异步的问题。 问题描述:把接口返回的数据,使用 useState 储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。或者

    2024年02月03日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包