Skip to content

GitLab

Open
Created by lizijian@lizijian

uniapp的微信小程序分包异步化踩坑

分包异步化可以跨分包去引用其他分包的组件。解决了一些公用组件必须放到主包的问题，大大降低了主包尺寸。 但是使用下来发先uniapp编译微信小程序，只有pages.json文件可以配置页面属性，自定义组件没有提供类似.json的文件配置属性，导致分包异步化只能作用在页面级别夸分包，如果存在引用嵌套组件，且内部组件是垮分包的话，就会报错找不到路径。但是有一个临时解决方案下面会讲，但是有局限性，最好是等uniapp更新（可能遥遥无期）

页面垮分包引用组件使用方法：

  1、在pages.json页面路由配置，比如views/create/entry用到V1FormInput组件，那就添加componentPlaceholder属性组件占位，
     view是占位的标签。注意v1-form-input写法，而不是V1FormInput!!!
  {	
    "path": "views/create/entry",
    "style": {
      "navigationBarBackgroundColor": "#FFFFFF",
      "navigationBarTitleText": "",
      "componentPlaceholder": {
        "v1-form-input" : "view"
      }
    }
  },
  2、views/create/entry页面引用。
    import V1FormInput from 'src/pages/subPagesComponents/components/Form/V1FormInput/index.vue';

    components: {
      V1FormInput
    }

嵌套组件内引用垮分包组件使用方法：

以上方法在uniapp中只限于页面级别夸分包引用组件（因为uniapp没有组件的.json文件配置componentPlaceholder属性原因）， 如果页面引用的组件嵌套了其他分包的组件时，使用该方法，但是只限垮一个分包。

解决方案：

将该页面引用的组件移动到目标分包内，然后重复1和2步骤跨分包引用该页面组件， 代码可参考location-space-mp商业直租小程序目录src/pages/subPagesComponents/components/Business/site-selection/RecommendLocation.vue的组件引用，该组件里引用了src/pages/subPagesComponents/components/Form/V1FormAddress/index.vue的组件，所以将RecommendLocation组件移动到了subPagesComponents分包下（该方式有弊端，只能引用主包或者subPagesComponents分包下的组件）