uniapp2wxpack
Advanced tools
可以使uni-app项目输出微信小程序的分包，被其他小程序项目使用
支持微信原生页面直接在uni-app项目中使用（还支持任何原生的js、wxss在uni-app项目中使用）
支持原生小程序项目直接在uni-app项目中进行开发，uni-app项目可以通过全局对象wx，在main.js或者App.vue中将相关的方法公开到wx对象中（因为解耦构建会在主小程序app.js的开头引入uni目录的app.js）
支持uni-app项目调用原生小程序项目中的资源
对uni包的App.vue的特殊处理方式（详见appMode）
在uni-app项目中通过cli安装
// 推荐
npx uniapp2wxpack --create
// 或者全局安装uniapp2wxpack
npm i uniapp2wxpack -g
uniapp2wxpack --create
与普通uni-app项目的结构保持一致
│ babel.config.js
│ package-lock.json
│ package.json
│ postcss.config.js
│ projectToSubPackageConfig.js // 解耦包配置文件
│ README.md
├─dist
│ └─dev
│ ├─mp-weixin // uni-app微信小程序普通构建目录
│ └─mp-weixin-pack // uni-app微信小程序解耦构建目录（用于预览）
├─mainWeixinMp // 原生主小程序目录
├─public
└─src // uni-app源码目录
│ App.vue
│ LICENSE
│ main.js
│ manifest.json
│ package.json
│ pages.json
│ README.md
│ template.h5.html
│ uni.scss
│
├─pages
├─static
├─store
├─wxcomponents
└─wxresource // 原生页面及资源存放目录
单独开发解耦包
在mainWeixinMp目录放置用于预览的原生小程序项目（hello world小程序即可），然后正常的在src中进行编码开发，解耦包打包完成后的包文件在dist/build/mp-weixin-pack/包名称
与完整小程序项目协同开发
此时mainWeixinMp目录应该是真实的小程序项目（建议关联真实小程序项目的git仓库，mainWeixinMp作为一个git子仓库的存在），构建打包完成后即可将打包后内容(dist/build/mp-weixin-pack)覆盖mainWeixinMp的内容进行子仓库提交
可根据实际项目情况修改以下两个命令的内容
// 开发
npm run dev:mp-weixin-pack
// 打包
npm run build:mp-weixin-pack
解耦包配置文件
module.exports={
// 微信原生小程序目录
mainWeixinMpPath: 'mainWeixinMp',
// uni项目输出的分包在微信原生小程序中的路径
subPackagePath: 'uniSubpackage',
// uni项目的App.vue中初始设置的处理方式，默认是relegation(降级模式)，[top(顶级模式) / none(丢弃)]
appMode: 'relegation'
}
uni-app源码中要使用的原生页面及资源存放的目录
wxresource目录中的页面都必须配置在pages.json的wxResource属性里
注意：wxresource目录构建后所在的物理路径，实际上就是src目录所在的路径，也就是uni包目录本身，所以构建后，wxresource中的文件和目录将被移动至uniSubpackage下，如果内容中有目录于src相同，则将会融合，目录名文件名都相同则将被丢弃
由于uni项目的App.vue对应小程序的app.js，在解耦包的模式中，会对主小程序的app.js产生冲突。
所以设置了三种模式对App.vue进行处理，可以在projectToSubPackageConfig.js设置
relegation (降级模式，默认)
降级模式的含义是将uni目录从项目级别降级到了目录级别，那么App.vue中的钩子函数就只对目录有效
比如：App.vue中的onLaunch，会降级成首次进入uni目录才触发，同样的，onHide会降级成只要离开uni目录的范围就会触发
top (顶级模式)
顶级模式的含义就是把uni的App.vue中的钩子和主小程序的app.js的钩子混合在一起
none (丢弃模式)
丢弃模式就是不处理App.vue中的钩子
降级模式和顶级模式都会将globalData和getApp()返回的内容进行混合
所有模式都会将App.vue的初始设置保存在wx.__uniapp2wxpack.uniSubpackage.__packInit中（uniSubpackage属性是和uni的目录名保持一致的，如果修改目录名，属性名也会变更）
wx.__uniapp2wxpack
用于存放解耦包相关方法和数据的对象，在引入解耦包的app.js后，通过获取wx.__uniapp2wxpac.uniSubpackage.__packInit，可以拿到uni项目App.vue的初始化配置
注意：其中uniSubpackage属性代表了解耦包的名称，名称变化，该属性也会相应的改变
__uniRequireWx
只支持静态字符串参数
在uni-app项目的源码目录中的vue、js文件需要引入原生的微信小程序资源（除了uni-app自带的wxcomponents目录外）都需要使用__uniRequireWx方法(类似node的require)，并且往往会配合目录别名@wxResource
const nativeResource = __uniRequireWx('@wxResource/nativeJs/test')
const nativeExportDefaultObject = __uniRequireWx('@wxResource/nativeJs/test1').defaut
const {nativeRestObject} = __uniRequireWx('@wxResource/nativeJs/test')
__uniWxss{
import: '@wxResource/nativeWxss/1.wxss';
import: '@wxResource/nativeWxss/2.wxss';
import: '@wxResource/nativeWxss/3.wxss';
}
特殊的目录别名，此别名同时指向2个资源
@wxResource只能在__uniRequireWx和__uniWxss中使用
// 跳出uni解耦包的目录，访问上层资源
__uniRequireWx('../@wxResource/top/1.js')
__uniRequireWx('@wxResource/../top/1.js')
// 绝对路径访问(访问原生小程序的根目录下的top/1.js)
__uniRequireWx('/top/1.js')
在构建完成的原生小程序项目中的uni解耦包目录下会存在pack.config.js，这个文件仅仅是保存了uni解耦包在主小程序中的目录名，以便解耦包中使用了动态路径（非相对路径）跳转页面或者加载图片地址
注意：路径中保存的是绝对路径
const { packPath } = __uniRequireWx('@wxResource/pack.config.js')
uni.navigateTo({
url: packPath + '/pages/about'
})
// mainWeixinMp app.json
"subPackages":[{
"root":"uniSubpackage",
"pages":[]
}]
在uni项目中的vue页面分包
pages.json
{
// indexPage配置后，会提升为整个小程序项目的首页
"indexPage":"",
"pages": [
{
"path": "pages/test/about",
"style": {
"navigationBarTitleText": "测试"
}
}
],
"subPackages":[{
"root": "pages/about",
"pages": [{
"path": "about",
"style": {
"navigationBarTitleText": "测试"
}
}]
}],
// uni项目中直接使用原生页面（src/wxresource/pages/test/index）
// 由于wxresourece目录是个虚拟目录，所以路径中要去掉
"wxResource":{
"pages":["pages/test/index"]
}
}
在wxresource中使用分包
pages.json
{
// indexPage配置后，会提升为整个小程序项目的首页
"indexPage":"",
"pages": [
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "测试"
}
}
],
"wxResource":{
"subPackages":[{
"root": "pages/test",
"pages": ["index"]
}]
}
}
uni项目中vue页面和原生页面，在构建后同时在一个目录里，设置分包
虽然设置在了不同的地方，但是构建后会合并到一起
{
// indexPage配置后，会提升为整个小程序项目的首页
"indexPage":"",
"pages": [
{
"path": "pages/about/about",
"style": {
"navigationBarTitleText": "测试"
}
}
],
// 构建后的目录uniSubpackage/pages/test
"subPackages":[{
"root": "pages/test",
"pages": [{
"path": "about",
"style": {
"navigationBarTitleText": "测试"
}
}]
}],
// 构建后的目录uniSubpackage/pages/test
"wxResource":{
"subPackages":[{
"root": "pages/test",
"pages": ["index"]
}]
}
}
在小程序的app.json(mainWeixinMp/app.json)中将整个uniSubpackage配置成分包
只需要对app.json进行配置即可，不需要修改pages.json中的subPackages和pages设置，构建后会将pages.json中所有的页面路径都抽取到uniSubpackage分包的配置里
mainWeixinMp/app.json中的分包配置
注意：subPackages里的pages设为空数组
{
"subPackages":[{
"root":"uniSubpackage",
"pages":[]
}]
}
uni项目中如果使用了绝对路径，在解耦构建的项目中，根路径是指向了主小程序的根的，所以需要自行拼接上uni解耦包的目录名，推荐使用pack.config.js中的packPath动态获取拼接
如果原生主小程序目录中已经存在了同uni解耦包命名相同的目录，在构建时，这个目录将被忽略，构建后的项目中的此目录是uni项目生成的解耦包
FAQs
Uni-App的小程序混合开发（解耦构建）插件
The npm package uniapp2wxpack receives a total of 171 weekly downloads. As such, uniapp2wxpack popularity was classified as not popular.
We found that uniapp2wxpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.