uniapp 多渠道打包实现方案

已于 2024-08-02 16:14:20 修改
阅读量827 收藏 6
点赞数 13
分类专栏： uniapp VUE 小程序 文章标签： uniapp vue 小程序
于 2024-08-02 15:42:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36635270/article/details/140870956
版权
uniapp 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
VUE
5 篇文章 0 订阅
订阅专栏
小程序
1 篇文章 0 订阅
订阅专栏

首先一个基础分包方案：
项目整体结构
build编译前相关问题
src资源文件和vue布局文件分包结构
包不用区分渠道，只是通过文件名进行区分，公共代码逻辑可以通过mixins进行混入。

这样分包后就需要在打包时只针对编译的渠道包文件进行替换打包，其他渠道包的文件不打包进去，通过工具类实现替换。

项目主目录下的manifest.json 和 pages.json 可以是空内容，都是通过工具类将prebuild目录下不同渠道不同平台的对应文件内容复制然后写到项目主目录下去的。

  1. 先看主要配置文件：
//package.json
{
	"name": "demo",
	"config": {
		"dev": "cross-env NODE_ENV=development uniapp-cli custom",
		"pro": "cross-env NODE_ENV=production uniapp-cli custom"
	},
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev:ks-brandA": "cross-env-shell $npm_package_config_dev bd-brandA --minimize",
		"dev:tt-brandA": "cross-env-shell $npm_package_config_dev tt-brandA --minimize",
		"dev:bd-brandA": "cross-env-shell $npm_package_config_dev ks-brandA --minimize",
		"build:bd-brandA": "cross-env-shell $npm_package_config_pro bd-brandA --minimize",
		"build:tt-brandA": "cross-env-shell $npm_package_config_pro tt-brandA --minimize",
		"build:ks-brandA": "cross-env-shell $npm_package_config_pro ks-brandA --minimize",
		
		"dev:ks-brandB": "cross-env-shell $npm_package_config_dev bd-brandB --minimize",
		"dev:tt-brandB": "cross-env-shell $npm_package_config_dev tt-brandB --minimize",
		"dev:bd-brandB": "cross-env-shell $npm_package_config_dev ks-brandB --minimize",
		"build:bd-brandB": "cross-env-shell $npm_package_config_pro bd-brandB --minimize",
		"build:tt-brandB": "cross-env-shell $npm_package_config_pro tt-brandB --minimize",
		"build:ks-brandB": "cross-env-shell $npm_package_config_pro ks-brandB --minimize",

	},
	"dependencies": {
		"@dcloudio/uni-app": "^2.0.2-3081220230817001",
		"@dcloudio/uni-app-plus": "^2.0.2-3081220230817001",
		"@dcloudio/uni-h5": "^2.0.2-3081220230817001",
		"@dcloudio/uni-i18n": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-360": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-alipay": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-baidu": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-jd": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-kuaishou": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-lark": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-qq": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-toutiao": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-vue": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-weixin": "^2.0.2-3081220230817001",
		"@dcloudio/uni-mp-xhs": "^2.0.2-3081220230817001",
		"@dcloudio/uni-quickapp-native": "^2.0.2-3081220230817001",
		"@dcloudio/uni-quickapp-webview": "^2.0.2-3081220230817001",
		"@dcloudio/uni-stacktracey": "^2.0.2-3081220230817001",
		"@dcloudio/uni-stat": "^2.0.2-3081220230817001",
		"@dcloudio/uni-ui": "^1.4.28",
		"@vue/shared": "^3.0.0",
		"core-js": "^3.8.3",
		"crypto-js": "^3.1.9-1",
		"flyio": "^0.6.2",
		"vue": ">= 2.6.14 < 2.7",
		"vuex": "^3.2.0"
	},
	"devDependencies": {
		"@dcloudio/types": "^3.3.2",
		"@dcloudio/uni-automator": "^2.0.2-3081220230817001",
		"@dcloudio/uni-cli-i18n": "^2.0.2-3081220230817001",
		"@dcloudio/uni-cli-shared": "^2.0.2-3081220230817001",
		"@dcloudio/uni-helper-json": "*",
		"@dcloudio/uni-migration": "^2.0.2-3081220230817001",
		"@dcloudio/uni-template-compiler": "^2.0.2-3081220230817001",
		"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3081220230817001",
		"@dcloudio/vue-cli-plugin-uni": "^2.0.2-3081220230817001",
		"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3081220230817001",
		"@dcloudio/webpack-uni-mp-loader": "^2.0.2-3081220230817001",
		"@dcloudio/webpack-uni-pages-loader": "^2.0.2-3081220230817001",
		"@vue/cli-plugin-babel": "~5.0.0",
		"@vue/cli-service": "~5.0.0",
		"babel-plugin-import": "^1.11.0",
		"clean-webpack-plugin": "^4.0.0",
		"copy-webpack-plugin": "^11.0.0",
		"cross-env": "^7.0.2",
		"jest": "^25.4.0",
		"less": "^4.1.3",
		"less-loader": "^7.3.0",
		"mini-types": "*",
		"miniprogram-api-typings": "*",
		"postcss-comment": "^2.0.0",
		"sass": "^1.49.8",
		"sass-loader": "^8.0.2",
		"vue-template-compiler": ">= 2.6.14 < 2.7",
		"webpack-cli": "^5.1.4",
		"vconsole": "^3.15.0"
	},
	"browserslist": [
		"Android >= 4.4",
		"ios >= 9"
	],
	"uni-app": {
		"scripts": {
			"tt-brandA": {
				"env": {
					"UNI_PLATFORM": "h5"
				},
				"define": {
					"MP-BRANDA": true
				}
			},
			"ks-brandA": {
				"env": {
					"UNI_PLATFORM": "mp-kuaishou"
				},
				"define": {
					"MP-BRANDA": true
				}
			},

			"tt-brandB": {
				"env": {
					"UNI_PLATFORM": "h5"
				},
				"define": {
					"MP-BRANDB": true
				}
			},
			"ks-brandB": {
				"env": {
					"UNI_PLATFORM": "mp-kuaishou"
				},
				"define": {
					"MP-BRANDB": true
				}
			},
			"bd-brandB": {
				"env": {
					"UNI_PLATFORM": "mp-baidu"
				},
				"define": {
					"MP-BRANDB": true
				}
			},
		}
	}
}

//src/pages.js:: 直接复制 prebuild下对应brand和平台platform下的pages.js文件
const {getApp,getHostCode} = require("../prebuild/env");
const path = require('path')
module.exports = (pagesJson, loader) => {
	let brandName = getApp();
	let code = getHostCode()
	const srcPath = path.join(__dirname, `../prebuild/${brandName}/pages-${code}.js`)
	let pagesJsonNew = require(srcPath)
	loader.addDependency(require.resolve(srcPath))
	return pagesJsonNew
}

//vue.config.js
const fs = require("fs");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const {getApp,getOS} = require("./prebuild/env");

/*
 * 本函数重定向输出路径到下面路径 *
 * */
function rebuildOutputPath(brand) {
	let separator = getOS() == 'win' ? '\\' : '/'
	const lastIndex = process.env.UNI_OUTPUT_DIR.lastIndexOf(separator)
	let pre = process.env.UNI_OUTPUT_DIR.substring(0, lastIndex)
	console.log("vue.config--buildOutputPath::",process.env.UNI_OUTPUT_DIR.substring(lastIndex))
	process.env.UNI_OUTPUT_DIR = process.env.UNI_OUTPUT_DIR.substring(lastIndex) + separator + brand
}

const brandName = getApp()
rebuildOutputPath(brandName)

let clearDir = ['static/img-*']
module.exports = {
	chainWebpack: (config) => {
		//本插件将图片资源目录例如img-brandA， 拷贝到输出目录的static/img下面
		config.plugin('copy').use(CopyWebpackPlugin, [{
			patterns: [{
				from: `src/static/img-${brandName}`,
				to: 'static/imgs/'
			}]
		}])
		//本插件将输出目录下，重复无效的/static/img-*目录删除掉
		config.plugin('clean').use(CleanWebpackPlugin, [{
			cleanAfterEveryBuildPatterns: clearDir
		}])
		//本插件进行预编译相关的拷贝工作，拷贝指定brand的manifest和生成build.less
		config.plugin('CopyPlugin').use(require('./prebuild/CopyPlugin', [{
			brand: brandName
		}]))
		//对目标brand相关的非公用源文件进行监控更新编译的loader
		config.module.rule('module_replace').test(/\.vue$/).pre().use('./prebuild/module_replace')
			.loader('./prebuild/module_replace').end()
	}
}

// 本代码模块配合module_replace的loader完成【对目标brand相关的非公用源文件进行监控更新编译】
const chokidar = require('chokidar');

//监测改动时触发编译
const ignoreFiles = [];
const brandSign = `-${brandName}.`
const watcher = chokidar.watch('src/').on('ready', async () => {
	await watcher.close()
	chokidar.watch('src/', {ignored: ignoreFiles})
		.on('change', (path, stats) => {
			console.log('changed file', path);
			let brandSignIndex = path.lastIndexOf(brandSign)
			let endFix = path.substring(brandSignIndex + brandSign.length)
			let preFix = path.substring(0, brandSignIndex)
			let destPath = preFix + '.' + endFix
			const destContent = fs.readFileSync(destPath, {encoding: "utf-8"})
			fs.writeFileSync(destPath, destContent + '\n')
			fs.writeFileSync(destPath, destContent)
		})
}).on('add', (path) => {
	if (path.indexOf(brandSign) <= 0) ignoreFiles.push(path)
})

vue.config.js 是项目打包入口，在里面使用了三个工具类，env.js CopyPlugin.js module_replace.js；通过不同的brand读取指定brand文件，重写到指定文件，实现分渠道打包

  1. 三个不可缺少工具类：
//env.js文件
module.exports = {
	getApp() {
		if (process.env.UNI_SCRIPT) {
			const script = process.env.UNI_SCRIPT
			let subs = script.split('-')
			if (subs.length == 2) return subs[1]
		}
		console.error('错误！！未检测到有效的brand名称！！')
		return 'default'
	},
	makeDateTimeString(date) {
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		if (month < 10) month = '0' + month
		if (day < 10) day = '0' + day
		let hour = date.getHours();
		let min = date.getMinutes();
		let sec = date.getSeconds()
		if (min < 10) min = '0' + min
		if (sec < 10) sec = '0' + sec
		return `${year}-${month}-${day} ${hour}:${min}:${sec}`
	},
	getOS() {
		let host = 'ios'
		let arch = process.env.MSYSTEM_CARCH
		if (arch == 'x86_64' || arch == 'x86_32') host = 'win'
		return host
	},
	getHostCode() {
		if (process.env.UNI_SCRIPT) {
			const script = process.env.UNI_SCRIPT
			let subs = script.split('-')
			if (subs.length == 2) return subs[0]
		}
		console.error('错误！！未检测到有效的brand名称！！')
		return ''
	}
}

//CopyPlugin.js文件
const fs = require("fs");
const path = require('path');
const {
	getApp, getHostCode
} = require("./env");

class CopyPlugin {
	log(...param) {
		console.log("CopyPlugin", ...param)
	}
	constructor() {
		this.log('constructed')
	}
	apply(compiler) {
		compiler.hooks.environment.tap('Manifest', params => {
			let brandName = getApp()
			const platform = process.env.UNI_PLATFORM
			console.log('brandName=' + brandName, 'platform=' + platform)

			// 构造build.less
			let buildStr = '@brand: ' + brandName + ';'
			fs.writeFileSync('src/build.less', buildStr)
			
			//复制manifest.json
			let manifestPath = `prebuild/${brandName}/manifest.json`
			console.log('manifestPath=',manifestPath)
			let destManifestPath = 'src/manifest.json'
			const manifestContent = fs.readFileSync(manifestPath, {
				encoding: "utf-8"
			});
			fs.writeFileSync(destManifestPath, manifestContent)
		})
	}
}

module.exports = CopyPlugin

//module_replace.js 文件
const {getApp} = require("./env");
const fs = require("fs");
const tag = 'loader:module-replace'

const brandName = getApp()
const brandSign = `-${brandName}.`

module.exports = function(content) {
	let resourcePath = this.resourcePath
	let dotIndex = resourcePath.lastIndexOf('.')
	let endFix = resourcePath.substring(dotIndex)
	let srcPath = resourcePath.substring(0, dotIndex) + '-' + brandName + endFix
	if (srcPath.indexOf(brandSign) <= 0) return content
	if (!fs.existsSync(srcPath)) return content
	console.log(tag, 'replace from', srcPath)
	const newContent = fs.readFileSync(srcPath, {
		encoding: "utf-8"
	});
	return newContent
}

运行打包时只需要控制台中输入package.json中指定的脚本key值即可：
npm run dev:tt-barndA
npm run build:ks-barndB
按照上述方法分包后即使实现一个项目多平台多渠道打包，如有问题请多指教
资源包在下一篇文章

熊佳龙
关注
专栏目录
uniapp项目前端埋点实现方案
前端程序员、项目经理、人工智能博主
11-23 1924
领导今天又来活了😣，要记录每个页面的停留时间，以及页面的操作，是由哪个页面跳转过来的，给每个页面生成GUID上报给服务端，并且需要携带设备型号和设备唯一标识🙄针对埋点的方案，自己也是不太熟悉，没有实战经验，找了很多途径，文中可能会有不对的地方，希望小伙伴们可以多多指点。一起加油！🤪。
uniapp自定义渠道包
qq_34631220的博客
08-26 808
uniapp自定义渠道包
app渠道包打包脚本
01-03
原文地址: http://blog.csdn.net/ddnosh/article/details/78959827
uniapp App云打包
最新发布
uniquepeng的博客
10-09 362
4.打包完成，会在本地生成apk文件，把apk文件发到手机上，在手机上就可以安装了，我通过微信下载到手机上 打开文件时发现手机不能安装未知来源的应用，在文件管理中找到这个下载下来的apk文件进行安装后成功。1.配置uniapp AppID 这个是初建项目时自动生成的，如果是别人创建的项目则需要对方在DCLOUD开发者平台上对应的项目中添加自己到团队成员中。2.发行，晚上相关配置，云端打包比较方便，基本上没啥特殊配置，直接打包。
小兔鲜儿 uniapp - 项目打包
每天都要努力学习哦~~
01-04 1408
条件编译支持: 支持 .vue, .ts, .js, .scss, .css, pages.json 等文件。Q：按照 uni-app 规范开发可保证多平台兼容，但每个平台有自己的一些特性，该如何处理？把当前 uni-app 项目打包成网页(H5)端，并配置路由基础路径。把当前 uni-app 项目打包成微信小程序端，并发布上线。根路径，部分网站并不是部署到根路径，需要按运维要求调整。项目打包上线需要使用到多个工具，注意工具之间的职责。的打包，预览、测试、发行，使用。，让代码按条件编译到指定平台。
uniapp打包后apk白屏_Android多渠道打包相关
weixin_39707478的博客
11-27 2906
一、多渠道打包概述由于国内存在着有众多的应用市场，在不同的应用市场可能有不同的统计需求，为此Android开发人员需要为每个应用市场发布一个安装包，这里就引出了Android的多渠道打包。在安装包中添加不同的标识，以此区分各个渠道，方便统计app在市场的各种效果。因此，每当发新版本时，市场会提供一个渠道列表，Android RD会根据这些渠道相应地生成等量的渠道包。随着渠道越来越多，为了提高渠道打...
【uni-app】实战总结（含多端打包）
热门推荐
Jdoit CW的博客
07-20 1万+
目标 了解 uni-app 开发过程中的注意点 能够独立完成简单项目的开发 能够完成不同平台的打包+发布
用uniapp开发打包多端应用完整指南
守望轩
11-30 5905
用uniapp开发打包多端应用完整指南
vue uniapp小程序多渠道打包
08-02
小程序多渠道多平台打包方案分享
Vue Uniapp实现小程序多平台打包指南
3. uniapp多渠道打包方案 uniapp通过统一的配置文件来管理不同平台的打包设置。开发者可以通过修改`vue.config.js`和`platform.json`等文件来定义每个平台的特定配置，如编译选项、插件配置、应用ID等。 4. 打包...
uniapp - 实现安卓App打包上架应用商店详细教程，详解Hbuilder打包编译apk发布上传到应用市场全流程，提供uniApp云打包、离线打包app、原生本地打包，附带APP备案和安卓证书申请
王佳斌
09-21 6297
uni-app，安卓，APP，应用商店，打包编译apk，上架到应用市场，如何打包app并发布到主流应用市场，发布为Android App流程，应用备案，如何申请安卓证书，hbuilder发布安卓apk后怎么上传到各家软件商店，创建app证书，uniapp发行 原生APP本地打包安卓APK，详细最全的步骤教程，项目打包成apk，云打包，安心打包，安卓app离线打包，一直审核不通过，被拒绝，不符合规范，上架发布失败，申请安卓证书和获取证书信息，uni-app打包发布安卓Android软件到各大应用商店，腾讯应用
Android代码-多渠道打包工具。
08-06
Android渠道打包工具Gradle插件 渠道包数量很多（如100个以上），对打包速度有要求的建议使用新版极速打包工具 Packer-Ng，100个渠道包只需10秒。 最新版本 2014.12.20 发布1.0.0版，支持渠道打包和版本号自增等功能 2014.12.24 发布1.0.1版，完善market文件异常处理 2015.02.12 发布1.0.2版，检查manifestMatcher配置 2015.03.24 发布1.0.3版，版本号自增与versionName和buildType无关 2015.05.18 发布1.0.4版，移除Android插件版本检查，支持最新版本 项目介绍 gradle-packer-plugin 是Android多渠道打包工具Gradle插件，可方便的于自动化构建系统集成，通过很少的配置可实现如下功能 ： 支持自动替换AndroidManifest文件中的meta-data字段实现多渠道打包 支持自定义多渠道打包输出的存放目录和最终APK文件名 支持自动修改versionName中的build版本号，实现版本号自动增长 gradle-pa
Uni-app打包步骤.docx
07-23
uniapp 安卓打包教程 超级详细简单 具体打包内容在文档里有详细的步骤 按照步骤即可打包完成 如有疑问 联系我
uniapp - 实现苹果App打包上架App Store应用商店详细教程，详解Hbuilder打包编译ipa发布上传到苹果ios软件商店全流程，提供云打包/离线本地打包ios、申请IOS苹果证书方法
王佳斌
09-21 5188
uni-app，苹果ios，苹果app，打包编译，app store应用商店，ipa发布到软件商店，uniapp的app苹果应用商店上架，上架苹果APP Store，uniApp打包的ipa文件上传到商店，上架苹果商城，审核失败，被拒绝，UniApp打包ipa文件，上架iOS App Store 流程指南，最新详细教程最全，Hbuilder打包发布ios app，苹果云打包上线全过程，云打包IPA并上传到商店，打包iOS ipa文件后怎么发布到应用商店，苹果证书申请教程，ios证书申请，mac电脑，审核很久
跨平台框架---uniapp--打包
qq_43808599的博客
06-15 628
uniappuniapp如何打包成安卓生成Android证书uniapp打包发布 uniapp如何打包成安卓 生成Android证书 正式打包发布Android的apk应用，需要先选择或新建一个数字证书，即keystore文件，生成数字证书的常用方法有两：一是利用eclipse生成，二是在命令行中生成，下面我们来介绍如何在命令行中生成Android的数字证书。 1.命令行生成依赖于jdk，这对于学过java的人来说并不陌生，这里就详细讲述配置jdk，默认都会配置 2.打开 CMD，直接输入以下指令（PS：需
uniapp 安卓多渠道获取原生插件
夜中雨滴的专栏
07-03 417
VasDolly 是腾讯开源的一个极速多渠道打包组件，同时支持基于 V1 和 V2 签名进行渠道打包，一般用于app推广统计等场景。购买插件前请先试用，试用通过再购买。在试用中如果遇到任何问题，可与作者联系，QQ：334106817，将全力协助你使用本插件。App 多渠道投放，如应用市场、网盟、搜索引擎、效果广告，但又不希望手工维护成千上百的渠道包。在需要使用插件的页面加载以下代码。具体方法的使用请参考。
uni-app卖座电影多端开发纪实（六）：多端打包
欧阳桫的技术博客
12-17 775
微信小程序【单个代码包的最大体积】不能超过2M，如果因为某些页面引用的静态资源文件较大较多的原因，导致单个代码包体积超过2M时，我们就需要进行页面的分包配置了；可以将小程序的众多页面分配到不同子包中，每个子包大小均不超过2M，所有子包的总体积加起来不能超过20M；等待一段时间之后，打包完成，生成的APK路径在unpackage/release/apk路径下。本教程不涉及原生App开发相关内容，我们为大家介绍云打包的App生成方式；如果公司中有专职的安卓/iOS开发程序员，我们可以选择执行本地打包；
uni打包到各端
chaosama的博客
10-23 958
首先到manifest.json，先获取到uni-app的APPID 一、h5 打包完后到项目根目录的\unpackage\dist\build\h5下可以找到打包好的文件，放到本地服务器测试下就OK了 二、小程序 1、需要先配置好manifest.json里面的小程序APPID， 2、“微信开发者工具”的“设置”=>"安全设置"=>"服务端口"，把"开启"勾选了。 ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值