小程序应用篇：分包治理策略

****

{
  "pages":[
    "pages/index/index"
  ],
    "subpackages":[{
    "root":"sub-pages",
    "pages":[
      "test/index"
    ]
  }],
    "window":{
    "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "Weixin",
      "navigationBarTextStyle":"black"
  },
  "style": "v2",
    "sitemapLocation": "sitemap.json"
}

function sayHello(){
  console.log('分包页面')
}
export default sayHello

<view>
  前端开发实践指南
  <button bindtap="handleRouterGo" >跳转到分包</button>
  <button bindtap="handleCallFun" >测试分包方法</button>
  </view>

import say from '../../sub-pages/utils'
Page({
  data:{
    loading:true
  },
  handleRouterGo(){
    wx.navigateTo({
      url: '/sub-pages/test/index',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  handleCallFun(){
    say()
  }
})

****

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
    "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

****

{
  "pages":[
    "pages/index/index"
  ],
  "subpackages":[{
    "root":"sub-pages",
    "pages":[
      "test/index"
    ],
    "independent": true
  }],
}

********

{
  "pages":[
    "pages/index/index"
  ],
  "subpackages":[{
    "root":"sub-pages",
    "pages":[
      "test/index"
    ]
  }],
  "preloadRule":{
    "pages/index/index":{
      "packages":["sub-pages"]
    }
  }, 
}

****

<button>业务分包 sub-button 组件</button>

{
  "usingComponents": {
    "sub-button":"../../sub-pages/test/components/button"
  },
  "componentPlaceholder":{
    "sub-button":"view"
  }
}

<view>
  大前端开发实践指南
  <button bindtap="handleRouterGo" >跳转到分包</button>
  <button bindtap="handleCallFun" >测试分包方法</button>
  <sub-button />
</view>

// subPackageA/index.js
// 使用回调函数风格的调用
require('../subPackageB/utils.js', utils => {
  console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 风格的调用
require.async('../commonPackage/index.js').then(pkg => {
  pkg.getPackageName() // 'common'
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})

function sayHello(){
  console.log('分包方法')
}
export default sayHello

handleCallFun(){
    require('../../sub-pages/utils',(moduleFun)=>{
    moduleFun.default()
})
}

├── app.js
├── app.json
├── app.wxss
├── 业务A
│   └── pages
│       ├── 业务A页面一
│       └── 业务A页面二
├── 业务B
│   └── pages
│       ├── 业务B页面一
│       └── 业务B页面二
├── ...其他业务分包
├── 主包
│   ├── 主页面一
│   └── 主页面二
└── 公共方法等