React Native Android端多环境自动打包

最新推荐文章于 2023-09-12 10:07:29 发布

小马小沈

最新推荐文章于 2023-09-12 10:07:29 发布

阅读量1.5k

点赞数

分类专栏： React Native 文章标签： android react native jenkins

本文链接：https://blog.csdn.net/mamr227/article/details/122191736

版权

React Native 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

1、技术环境搭建
2、配置Android构建参数。
3、编辑复制文件到指定位置的脚本
4、Jenkins创建工程
5、下载nginx，配置相关参数、HTTPS证书
6、写iOS下载配置文件plist
7、编写下载页面
9、将下载页面、文件下载路径配置到nginx的配置文件中
10、启动nginx

1、技术环境搭建

Android SDK
1. 通过comdline-tools 管理SDK
2. 配置环境变量
3. 安装需要的SDK
常用命令行
1. 列举所有组件：sdkmanager --list
2. 下载指定版本：sdkmanager “platform-tools” “platforms;android-23” build-tools;30.0.3"
Gradle
JDK
Node

2、配置Android构建参数。

在build.gradle中配置环境

// 配置js入口文件
project.ext.react = [
        entryFile       : "index.js",
        releaseEntryFile: "index.release.js",
]

// 配置多环境构建参数
buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
        preRelease {
           ...
            applicationIdSuffix ".test"
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            matchingFallbacks = ['preRelease', 'release', 'debug']
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
        debug {
           ...
            signingConfig signingConfigs.release
            applicationIdSuffix ".debug"
        }
    }

修改react.gradle中的打包命令

// 在jsBundle打包之前，根据环境变量配置对应的js文件入口
if(targetName.toLowerCase().equals("release")){
	entryFile= config.releaseEntryFile?: "index.js"
} else {
	entryFile="index.js"
}

3、编辑复制文件到指定位置的脚本

autoPackage.sh

#!/bin/sh

# 预先定义对应的环境变量
envionmentVariables(){
	#安卓项目工程路径
	android_project_path="D:\gerrit\workspace\Traffic\pmcloud-android-rn\android"
	# 安卓apk目录路径
	apk_dir_path="$android_project_path/app/build/outputs/apk"
	# apk 路径
	apk_debug_path="$apk_dir_path/debug/app-debug.apk"
	apk_preRelease_path="$apk_dir_path/preRelease/app-preRelease.apk"
	apk_release_path="$apk_dir_path/release/app-release.apk"
	# 安装文件最终存储路径
	output_path="D:\marui\download\files"
}

apkBuild(){
	# 删除老的apk
	rm -rf $apk_debug_path
	rm -rf $apk_preRelease_path
	rm -rf $apk_release_path

	cd "$android_project_path"
	pwd
	sleep 1
	# 执行安卓打包脚本
	echo " ----clear start----"
	./gradlew clear
	echo " ----build start----"
	./gradlew build
	# 检查apk文件是否存在
	if [ -f "$apk_debug_path" ]; then
	echo "----build success(debug)----"
	sleep 1
	else
	echo "----build failed(debug)----"
	exit 1
	fi

	if [ -f "$apk_preRelease_path" ]; then
	echo "----build success(preRelease)----"
	sleep 1
	else
	echo "----build failed(preRelease)----"
	exit 1
	fi

	if [ -f "$apk_release_path" ]; then
	echo "----build success(release)----"
	sleep 1
	else
	echo "----build failed(release)----"
	exit 1
	fi
}

copyFiles(){
	echo "复制结果文件到下载目录"	
	robocopy "$apk_dir_path/debug" "$output_path" "app-debug.apk"
	robocopy "$apk_dir_path/preRelease" "$output_path" "app-preRelease.apk"
	robocopy "$apk_dir_path/release" "$output_path" "app-release.apk"
	echo "复制完成"	
	# echo xcopy 
}

envionmentVariables
#apkBuild
copyFiles

4、Jenkins创建工程

在公司的jenkins（https://ci.yonyou.com/）上创建项目。其中重要的是构建步骤的配置如下：

执行windows批处理命令：yarn
执行windows批处理命令：git reset --hard
Invoke Gradle script：Use Gradle Wrapper、Wrapper location（ ${workspace}/android/）、Tasks（build）
执行windows批处理命令：
```
cd D:\marui
sh autoPackage.sh
```

5、下载nginx，配置相关参数、HTTPS证书

6、写iOS下载配置文件plist

ios.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>items</key>
	<array>
		<dict>
			<key>assets</key>
			<array>
				<dict>
					<key>kind</key>
					<string>software-package</string>
					<key>url</key>
					// ios包的下载地址
					<string>https://ygccs.yonyoucloud.com/files/app-ios-release.ipa</string>
				</dict>
			</array>
			<key>metadata</key>
			<dict>
				<key>bundle-identifier</key>
				// 项目id
				<string>com.yonyou.engineerCloud</string>
				<key>bundle-version</key>
				<string>3.3.0</string>
				<key>kind</key>
				<string>software</string>
				<key>title</key>
				<string>友工程</string>
			</dict>
		</dict>
	</array>
</dict>
</plist>

7、编写下载页面

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>工程云</title>

    <style>

        html, body {
            width:100%;
            height: 100%;
            margin: 0 auto;
            text-align: center;
            background-color: #ffffff;
            cursor: pointer;
			-webkit-tap-highlight-color: transparent !important;
        }

		* {
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		
        .centent {
            max-width: 600px;
            width: 80%;
            height: 100%;
            margin: 20px auto;
            border-radius: 6px;
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: 60px 0 20px 0;
        }

        .down-btn {
            max-width: 300px;
            width: 80%;
            background-color: #E6E6FA;
            padding: 10px 0 10px 0;
            border-radius: 6px;
            font-size: 16px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class = "centent">
        <h2>友工程app下载</h2>
        <div class="down-btn" onclick="downClick(1);">Android 开发包</div>
        <div class="down-btn" onclick="downClick(2);">Android 测试包</div>
        <div class="down-btn" onclick="downClick(3);">Android 正式包</div>
		<br/>
        <div class="down-btn" onclick="downClick(4);">iOS 测试包</div>
        <div class="down-btn" onclick="downClick(6);">iOS 正式包</div>
		<br/>
        <div class="down-btn" onclick="downClick(5);">数字体验馆Android包</div>
    </div>
    


<script>

	
	window.onerror = function(msg,url,line,col,error){
		//alert("下载包不存在")
	}
	
    function downClick(type){
		
		let ua = navigator.userAgent.toLowerCase();
		let isWeixin = ua.indexOf('micromessenger') !== -1;
		if (isWeixin) {
			alert("请在浏览器打开下载");
			return;
		}
		
        switch(type){
            case 1:
				top.location.href="https://ygccs.yonyoucloud.com/files/app-debug.apk";
            break;
            case 2:
				top.location.href="https://ygccs.yonyoucloud.com/files/app-preRelease.apk";
            break;
            case 3:
				top.location.href="https://ygccs.yonyoucloud.com/files/app-release.apk";
            break;
            case 4:
				top.location.href="itms-services://?action=download-manifest&url=https://ygccs.yonyoucloud.com/ios-test.plist";
            break;
            case 6:
				top.location.href="itms-services://?action=download-manifest&url=https://ygccs.yonyoucloud.com/ios.plist";
            break;
            case 5:
				top.location.href="https://ygccs.yonyoucloud.com/files/app-exhibit.apk";
            break;
        }
    }
	
</script>
</body>
</html>

9、将下载页面、文件下载路径配置到nginx的配置文件中

10、启动nginx

小马小沈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React Native Android端多环境自动打包

文章目录1、技术环境搭建2、配置Android构建参数。3、编辑复制文件到指定位置的脚本4、Jenkins创建工程5、下载nginx，配置相关参数、HTTPS证书6、写iOS下载配置文件plist7、编写下载页面9、将下载页面、文件下载路径配置到nginx的配置文件中10、启动nginx1、技术环境搭建Android SDK通过comdline-tools 管理SDK配置环境变量安装需要的SDK常用命令行列举所有组件：sdkmanager --list下载指定版本：sdkmanag
复制链接

扫一扫