uniapp wgt多环境打包与调试插件—

uniapp wgt多环境打包与调试插件——uni-packing-wgt

本文主要是介绍uniapp wgt多环境打包与调试插件——uni-packing-wgt，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 背景介绍
- 安装与使用

背景介绍

由于官方的HBuilderX编译器打包wgt每次都要手动的操作有些繁琐，也不支持多环境打包，在开发阶段与原生项目交互调试是极其不方便。而uni-packing-wgt正好可以解决这些问题。

uni-packing-wgt是uniapp跨平台多环境资源打包、调试、发布的插件工具。业内首款开源的wgt多环境打包插件。

主要特性：

支持同时构建多个环境资源(dev、beta、release)包，也包括了wgt包。
支持上传发布到七牛云平台，其他云平台暂不支持，支持七牛文件CDN缓存刷新。
在构建资源包时也可以同步内置到原生项目上，方便在开发阶段与原生间的交互调试。
支持版本号自增，如果在原生项目上内置资源包调试，此时可用上，因为内置资源包调试版本号必须增加才会生效。

工具仅限于vite cli创建的项目使用，不支持HBuilderX创建的项目。

安装与使用

安装：

npm i uni-packing-wgt

1、在package.json中配置uniapp的打包命令，如下：

"build:app-plus-dev": "uni build -p app-plus --mode development --outDir=./dist/dev/app",
"build:app-plus-beta": "uni build -p app-plus --mode beta --outDir=./dist/beta/app",
"build:app-plus-release": "uni build -p app-plus --mode production --outDir=./dist/release/app"

其中development、beta、production是vite多环境配置的文件名，vite必须遵守这种命名规范，不然脚本会执行失败。

2、执行build-wgt命令生成uniapp资源包和wgt包

如果是在vscode和命令终端上运行命令，记得加上npx,即npx build-wgt, WebStorm则不用。

在初次执行命令时，会在项目根目录创建三个配置文件，可根据需求自由配置：

config.json：常规配置，比如运行环境、版本管理、文件拷贝、上传等管理
config-output.json：配置文件拷贝的输入、输出目录，用于uni模块在dev环境与原生资源同步调试
config-release.json：发布环境的配置，比如cdn缓存、后台配置同步的管理

config-output.json和config-release.json文件记得在.gitignore配置忽略不用提交，每个开发者的参数是不一样的。

config.json

{"runDev": true, // 指定打包的环境"runBeta": false,"runRelease": false,"refreshUrl": true, // 是否刷新七牛cdn缓存 "isIncrementVersion": true, // 版本是否自增"uploadWgtPackage": false, // wgt包是否上传到云平台上，需要结合upload参数使用"pkgCopyToNativeDir": false, // 是否将资源包同步到原生项目上，需要在config-output.json配置路径"upload": {  // 七牛配置参数"devAccessKey": "","devSecretKey": "","devBucket": "","devDomainName": "","devDir": "app"}}

生成环境的七牛参数需要在config-release.json#upload配置，如果是外部使用，其他参数无须配置。

在打包资源同步到原生项目中调试，需要在config-output.json文件中配置原生项目的目标目录。以Android为例：

同步到原生项目中调试，需要版本自增才会生效，把isIncrementVersion设置true即可。

{"sourceDir": "./dist/dev/app","targetDir": "替换成项目路径/app/src/main/assets/apps/替换成uniAppId/www"
}

sourceDir: 是uniapp的资源包的相对路径，默认是./dist/dev/app；
targetDir: 原生项目的路径，建议放绝对路径。

以dev环境为例，控制台输出结果：

hzwei@HZWeis-Mac-mini uni-mall-staff % build-wgt======开始生成资源包=====
======资源包生成完成=====
======资源包开始压缩=====
{ status: 'fulfilled', value: './dist/dev/__UNI__xxxx60.wgt' }
======资源包压缩任务完成=====
======资源包开始复制=====
{hash: 'Fop4lZ8NADlAsThMVWIiTjoTh_JT',key: 'app/dev/__UNI__xxxx60.wgt'
}
前往刷新url:  https://xxxx.com/app/dev/__UNI__xxxx60.wgt
======资源包上传完成=====