React Native Android端多环境自动打包_小马小沈

大大的周 02-07 3177

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

1、技术环境搭建

Android SDK

通过comdline-tools 管理SDK配置环境变量安装需要的SDK

常用命令行

列举所有组件：sdkmanager --list下载指定版本：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://·/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