微信小程序的分包
- 基本类似原生微信小程序的分包，原生修改的是app.js；这里调整的是app.config.js
- 增加subPackage字段，例：
export default {
pages: ['pages/Login/Login'],
subPackages: [
{
root: 'pages/v1/',
pages: [
'broadcastIndex/broadcastIndex',
'terminalIndex/terminalIndex',
'broadcastIndex/terminalList/terminalList',
'medias/medias',
'settings/settings'
]
},
{
root: 'pages/v2/',
pages: [
'broadcastIndex/broadcastIndex',
'terminalIndex/terminalIndex',
'settings/settings',
'medias/medias',
'live/live'
]
}
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationStyle: 'custom'
}
};
原生小程序与Taro的兼容
- 原生页面可以直接引入
- 若原生页面存在引入原生组件的情况下：
-
如果是主包的page，会自动引入原生组件，但部分编译会出问题，例如对于图片是否转译为base64这块会有差距，可能出现，有的图片明明没有转译但是，打包后的文件却把图片给忽略了。这里的解决方案其实有两种：第一种解决方案：调整config目录下的index.js中微信小程序的mini.postcss.url.limit，把这个值调小，让他不转译成base64。第二种在下边介绍
-
分包的page打包时不会自动引入原生组件，导致丢失。故需要自行引入。这里我的解决方案是使用copy字段，打包时，将原生组件拷贝至目标目录，供原生页面使用。其实上边的图片丢失的问题也可以用这种方法解决。
该方案（copy）参考了taro引用vant的思路。
注意：若引入了【miniprogram-computed】等原生微信小程序的插件，注意他们的依赖也需要copy，可能还需要修改引入路径的问题。
例：
const path = require('path'); // eslint-disable-line
const config = {
projectName: 'miniCBC',
date: '2021-10-9',
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},
sourceRoot: 'src',
outputRoot: `dist/${process.env.TARO_ENV}`,
plugins: [],
defineConstants: {},
alias: {
'@/utils': path.resolve(__dirname, '..', 'src/utils'),
'@/components': path.resolve(__dirname, '..', 'src/components'),
'@/img': path.resolve(__dirname, '..', 'src/assets/image'),
'@/api': path.resolve(__dirname, '..', 'src/request/api'),
'@/page': path.resolve(__dirname, '..', 'src/page')
},
copy: {
patterns: [
{
from: 'src/components/vant',
to: 'dist/weapp/components/vant'
},
{
from: 'src/components/ori_formList',
to: 'dist/weapp/components/ori_formList'
},
{
from: 'src/components/ori_nodata',
to: 'dist/weapp/components/ori_nodata'
},
{
from: 'src/components/ori_topper',
to: 'dist/weapp/components/ori_topper'
},
{
from: 'src/components/miniprogram-computed',
to: 'dist/weapp/components/miniprogram-computed'
},
{
from: 'src/components/rfdc',
to: 'dist/weapp/components/rfdc'
},
{
from: 'src/components/fast-deep-equal',
to: 'dist/weapp/components/fast-deep-equal'
},
{
from: 'src/assets/image/fileType-bg',
to: 'dist/weapp/assets/image/fileType-bg'
},
{
from: 'src/utils/utils.wxs',
to: 'dist/weapp/utils/utils.wxs'
}
],
options: {}
},
framework: 'react',
mini: {
postcss: {
pxtransform: {
enable: true,
config: {
selectorBlackList: [/van-/]
}
},
url: {
enable: true,
config: {
limit: 256 // 设定转换尺寸上限
}
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
},
enableExtract: true,
miniCssExtractPluginOption: {
//忽略css文件引入顺序
ignoreOrder: true
}
},
h5: {
publicPath: './',
staticDirectory: 'static',
esnextModules: ['taro-ui'],
postcss: {
autoprefixer: {
enable: true,
config: {}
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
}
}
};
module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'));
}
return merge({}, config, require('./prod'));
};
