um-pack v1.0.0
um-pack
基于uniapp微信小程序的解耦构建方案。
该库仅适用于使用脚手架搭建的uniapp项目
功能
- 支持原生页面直接在uni-app项目中使用
- 支持原生小程序项目直接在uni-app项目中进行开发
- 支持uni-app项目调用原生小程序项目中的资源
- 支持极端方式将uniapp项目与主包进行合并
- 支持在uni的vue文件中引入原生主小程序或者wxResource目录中的wxs
搭建uniapp项目
vue create -p dcloudio/uni-preset-vue projectName
具体详情请看 通过vue-cli命令行
安装
在搭建好uniapp项目后安装 um-pack
npm install um-pack
使用
初始化
um-pack --init
将在项目根目录下生成一个umPackConfig.js文件,并更新package.json,添加um-pack启动命令。
构建
在执行了 um-pack --init
命令后,可以看到package.json文件中多了 pack:build
、pack:dev
两个命令
npm run pack:dev
npm run pack:build
配置
umPackConfig.js
{
// 主包目录
"mainPackagePath": null,
// 合并模式, 可选(relegation、top、main)
// 默认relegation,将uni项目作为分包合并到主包中
// top: 将uni项目作为子目录合并到主包当中,存在冲突以主包为主
// main: 将uni项目作为主包进行处理,不处理mainPackagePath字段中定义的主包
// 当不存在主包时,该字段会自动更改成main
"packMode": "relegation",
// uni项目打包构建后放置的目录名
"subPackagePath": "subPackage",
// uni项目的代码放置目录
"uniCodePath": "src",
// project.config.json文件放置目录,null代表使用默认值,默认为根目录
"projectConfigPath": null,
// uni项目中的原生资源目录路径,默认值为 'src/wxResource'
"wxResourcePath": "wxResource",
// 原生资源目录路径别名, null代表使用默认值,默认值为 @wxResource
"wxResourceAlias": "@wxResource",
// 引用原生资源的js的特殊API名称设定, null代表使用默认值,默认值为 __uniRequireWx
"uniRequireApiName": "__requireWxJs",
// 引用原生资源的样式文件的特殊API名称设定, null代表使用默认值,默认值为 __requireWxss
"uniImportWxssApiName": "__requireWxss",
}
packMode
- relegation: 将uni项目作为分包合并到主包中
- top: 将uni项目作为子目录合并到主包当中,存在冲突以主包为主
- main: 将uni项目作为主包进行处理,不处理mainPackagePath字段中定义的主包
wxResource相关配置
当uniapp项目存在原生资源时,可以在uniapp项目中通过以下方法引入原生资源:
引入js
__requireWxJs("@wxResource/index.js");
引入wxss
__requireWxss {
import: "@wxResource/index.wxss";
}
使用页面
需要先在src/pages.json文件定义路由
"wxResource": {
"pages": [
"pages/index/index"
]
}
在构建后会作为 uniapp 项目中的页面,并自动添加到app.json中的pages字段中:
"pages": [
"pages/index/index",
"wxResource/pages/index/index"
],
在 pages/index/index 文件使用:
wx.navigateTo({
url: "/wxResource/pages/index/index",
});
注册小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。 App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
示例
示例1
example/um-pack-01
此示例是与主包进行合并的示例,主包可以是通过微信开发者工具创建的原生项目,也可以是uniapp打包后的dist包。
nativeProject: 原生项目 uniappProject: uniapp项目打包后的dist包
通过更改 umPackConfig 文件的 mainPackagePath 字段来实现打包不同的主包。
示例2
example/um-pack-02
此示例是将uniapp项目作为主包进行处理,同时使用了wxResource这个原生项目中的文件。
配置
在umPackConfig.js文件中配置相关字段:
wxResourcePath: "wxResource",
wxResourceAlias: "@wxResource",
uniRequireApiName: "__requireWxJs",
uniImportWxssApiName: "__requireWxss",
使用
wxResource仅支持在uniapp项目中使用,主包并不支持。
使用js文件
let { formatTime } = __requireWxJs("@wxResource/utils/util.js");
使用 wxss 文件
__requireWxss {
import: "@wxResource/static/index.wxss";
}
使用wxs文件
<view>
<wxs module="m1">
var module1 = __requireWxJs("@wxResource/static/index.wxs");
module.exports.msg = module1.msg;
</wxs>
<view>{{ m1.msg }}</view>
</view>
使用页面
要想使用 wxResource 中页面,需要在 uniapp 项目中的 pages.json 文件中进行处理。
"wxResource": {
"pages": [
"pages/index/index"
]
}
在构建后会作为 uniapp 项目中的页面,并自动添加到app.json中的pages字段中:
"pages": [
"pages/index/index",
"wxResource/pages/index/index"
],
注意,当存在主包时,wxResource将作为uniapp项目的子目录,而不是一个独立分包
示例3
example/um-pack-03
本示例是 packMode 为 top 的情况,会把 uniapp 项目作为子目录放入主包下,同时将 uniapp 项目中的分包同时打包进主包中,不作为分包使用。
4 months ago