上一篇文章讲到混合工程解耦的原理,今天讲一下具体实践。
1.上传flutter产物到git
我们需要在Flutter工程编译完以后获取相关的产物然后上传到git上。
上一节我们知道,flutter是通过podfile文件在iOS的编译过程中插入了一段flutter编译流程。那我们就在这个流程之后,紧接着添加一个上传到git的流程就可以了。
我们修改iOS工程的podfile文件,添加上传流程
target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
upload_production(flutter_application_path) //添加上传流程
end
在iOS工程的根目录添加文件podhelper.rb添加上传流程,
def upload_production(flutter_application_path)
current_pathname = Pathname.new flutter_application_path
project_pathname = Pathname.new Dir.pwd
script_phase :name => 'Upload Flutter Production Script',
:script => "set -e\nset -u\n\"${SRCROOT}\"/#{current_pathname}/xcode_backend.sh build",
:execution_position => :before_compile
end
这段代码就是实现的在build phase中添加Upload Flutter Production Scrip这一过程,而这个过程中其实就是运行Flutter工程根目录下的xcode_backend.sh脚本文件实现的。
我们接下来添加xcode_backend.sh文件,这个文件实现的就是获取编译后的Flutter的各种产物,然后上传到github中,其中git的地址是git@github.com:haohongwei/xxx.git。同时需要注意的是因为要通过命令行提交产物,因此必须开通Git 服务器的 SSH 公钥认证。否则会导致没有上传权限的问题。
BUILD_MODE=${CONFIGURATION}
# 根文件
ROOT_PATH="$(dirname $0)"
# 编译目录
BUILD_PATH="${ROOT_PATH}/build_ios/${BUILD_MODE}"
# 存放产物的目录
PRODUCT_PATH="${BUILD_PATH}/BUILD_MODE"
# 存放产物的Git地址
PRODUCT_GIT_URL="git@github.com:haohongwei/xxx.git"
# podSpec的名称
Flutter_APPFRAMEWORK_PODSPEC_NAME="flutter_xxx_xxx.podspec"
temp=${PRODUCT_GIT_URL##*/}
# Git的目录
PRODUCT_GIT_DIR="${ROOT_PATH}/.ios/${temp%.*}"
# Git存放产物的目录
PRODUCT_GIT_BUILD_DIR="${PRODUCT_GIT_DIR}/${BUILD_MODE}"
echo "PRODUCT_GIT_DIR ${PRODUCT_GIT_DIR}"
current_path="$PWD"
echo "current_path ${current_path}"
flutter_copy_packages() {
echo "================================="
echo "Start copy flutter app plugin"
MYDIR=`dirname $0`
local flutter_appframework="App.framework"
local flutter_appframework_podspec="${Flutter_APPFRAMEWORK_PODSPEC_NAME}"
local flutter_appframework_plist="AppFrameworkInfo.plist"
local flutter_appframework_path="${MYDIR}/.ios/Flutter/"
local flutter_flutterframework_path="${MYDIR}/.ios/Flutter/engine/"
local flutter_flutterframework="engine"
local flutter_plugin_registrant="FlutterPluginRegistrant"
local flutter_plugin_registrant_path="${MYDIR}/.ios/Flutter/${flutter_plugin_registrant}"
echo "copy 'flutter_plugin_registrant' from '${flutter_plugin_registrant_path}' to '${PRODUCT_PATH}/${flutter_plugin_registrant}'"
if [ -d "${PRODUCT_GIT_DIR}" ]; then
rm -rf ${PRODUCT_GIT_DIR}
fi
mkdir -p "$PRODUCT_GIT_DIR"
git clone "$PRODUCT_GIT_URL" "$PRODUCT_GIT_DIR"
if [ -d "${PRODUCT_GIT_BUILD_DIR}" ]; then
rm -rf ${PRODUCT_GIT_BUILD_DIR}
fi
mkdir -p "$PRODUCT_GIT_BUILD_DIR"
cp -rf -- "${flutter_appframework_path}${flutter_appframework}" "${PRODUCT_GIT_BUILD_DIR}"
cp -rf -- "${flutter_appframework_path}${flutter_appframework_podspec}" "${PRODUCT_GIT_BUILD_DIR}"
cp -rf -- "${flutter_appframework_path}${flutter_appframework_plist}" "${PRODUCT_GIT_BUILD_DIR}"
cp -rf -- "${flutter_flutterframework_path}" "${PRODUCT_GIT_BUILD_DIR}/${flutter_flutterframework}"
cp -rf -- "${flutter_plugin_registrant_path}" "${PRODUCT_GIT_BUILD_DIR}/${flutter_plugin_registrant}"
local flutter_plugin="${ROOT_PATH}/.flutter-plugins"
if [ -e $flutter_plugin ]; then
OLD_IFS="$IFS"
IFS="="
cat ${flutter_plugin} | while read plugin; do
local plugin_info=($plugin)
local plugin_name=${plugin_info[0]}
echo "Start copy ${plugin_name}"
local plugin_path=${plugin_info[1]}
if [ -e ${plugin_path} ]; then
local plugin_path_ios="${plugin_path}ios"
if [ -e ${plugin_path_ios} ]; then
if [ -s ${plugin_path_ios} ]; then
echo "copy plugin 'plugin_name' from '${plugin_path_ios}' to '${PRODUCT_GIT_BUILD_DIR}/${plugin_name}'"
cp -rf ${plugin_path_ios} "${PRODUCT_GIT_BUILD_DIR}/${plugin_name}"
fi
fi
fi
done
IFS="$OLD_IFS"
fi
echo "Finish copy flutter app plugin"
}
upload_product() {
echo "=================================upload product"
pushd ${ROOT_PATH}
echo "Start copy "
popd
pushd ${PRODUCT_GIT_DIR}
git add .
git commit -m "Flutter product"
git push
popd
}
flutter_copy_packages
upload_product
2.上iOS工程中添加flutter产物的subModule
在iOS工程的根目录下添加subModule
git submodule add https://github.com/haohongwei/xxx.git flutter_production
更新iOS工程
git submoudle init
git submodule update
这样就把上传到git上的flutter 产物下载到iOS工程中
3.修改Flutter产物的Pod的路径
修改podfile文件添加修改Pod路径的方法:
flutter_production_path = "#{dir}/ios_product/#{USE_FLUTTER_PRODUCTION_TYPE}"
install_all_native_flutter_pods(flutter_production_path)
end
install_all_native_flutter_pods也是在文件podhelper.rb中实现的:
def install_all_native_flutter_pods(flutter_application_path = nil)
# flutter_application_path ||= File.join('..', '..')
nativemode = 0;
install_native_flutter_engine_pod(flutter_application_path)
install_native_flutter_plugin_pods(flutter_application_path)
install_native_flutter_application_pod(flutter_application_path)
end
# Install Flutter engine pod.
#
# @example
# target 'MyApp' do
# install_flutter_engine_pod
# end
def install_native_flutter_engine_pod(flutter_application_path)
engine_dir = File.join(flutter_application_path, 'engine')
# Keep pod path relative so it can be checked into Podfile.lock.
# Process will be run from project directory.
engine_pathname = Pathname.new engine_dir
puts "engine_dir: #{engine_pathname}"
project_directory_pathname = Pathname.new Dir.pwd
puts "project_directory_pathname: #{project_directory_pathname}"
relative = engine_pathname.relative_path_from project_directory_pathname
puts "relative: #{relative}"
puts "engine_pathname.relative_path_from project_directory_pathname: #{relative}"
pod 'Flutter', :path => relative.to_s, :inhibit_warnings => true
end
# Install Flutter plugin pods.
#
# @example
# target 'MyApp' do
# install_flutter_plugin_pods 'my_flutter'
# end
# @param [String] flutter_application_path Path of the root directory of the Flutter module.
# Optional, defaults to two levels up from the directory of this script.
# MyApp/my_flutter/.ios/Flutter/../..
def install_native_flutter_plugin_pods(flutter_application_path)
#flutter_application_path ||= File.join('..', '..')
# Keep pod path relative so it can be checked into Podfile.lock.
# Process will be run from project directory.
current_directory_pathname = Pathname.new flutter_application_path
project_directory_pathname = Pathname.new Dir.pwd
relative = current_directory_pathname.relative_path_from project_directory_pathname
Dir.foreach flutter_application_path do |sub|
# 忽略隐藏文件
if sub =~ /\.(.*)/
next
end
if sub =='engine'
next
end
sub_abs_path = File.join(flutter_application_path, sub)
puts "sub_abs_path: #{sub_abs_path}"
pod sub, :path=>sub_abs_path, :inhibit_warnings => true
end
end
# Install Flutter application pod.
#
# @example
# target 'MyApp' do
# install_flutter_application_pod '../flutter_settings_repository'
# end
# @param [String] flutter_application_path Path of the root directory of the Flutter module.
# Optional, defaults to two levels up from the directory of this script.
# MyApp/my_flutter/.ios/Flutter/../..
def install_native_flutter_application_pod(flutter_application_path)
app_framework_dir = File.join(flutter_application_path, 'App.framework')
app_framework_dylib = File.join(app_framework_dir, 'App')
if !File.exist?(app_framework_dylib)
# Fake an App.framework to have something to link against if the xcode backend script has not run yet.
# CocoaPods will not embed the framework on pod install (before any build phases can run) if the dylib does not exist.
# Create a dummy dylib.
FileUtils.mkdir_p(app_framework_dir)
`echo "static const int Moo = 88;" | xcrun clang -x c -dynamiclib -o "#{app_framework_dylib}" -`
end
# Keep pod and script phase paths relative so they can be checked into source control.
# Process will be run from project directory.
current_directory_pathname = Pathname.new flutter_application_path
project_directory_pathname = Pathname.new Dir.pwd
relative = current_directory_pathname.relative_path_from project_directory_pathname
pod 'flutter_xxx_xxx', :path => relative.to_s, :inhibit_warnings => true
end
这样就走通了整个流程。但是其中还有一些细节需要处理,比如:要同时兼容flutter开发同学和iOS原生开发同学的需求,因此在podfile中就要做条件判断,根据大家不同的需求来走不同的分支。
这几天会在github上创建一个示例工程,供大家参考。
Flutter工程:https://github.com/haohongwei/my_flutter
iOS工程:https://github.com/haohongwei/FlutterCI
Flutter产物git库:https://github.com/haohongwei/FlutterCI_FlutterProduction