APP应用的H5资源文件工程化
应用场景
APP工程中使用H5页面,这些H5资源将与APP安装包一起分发出去。APP应用开发与H5页面开发,通常是由两批人员实现。那么H5页面有必要存在于独立的工程中,而非与APP工程放一起。只需要在APP打包前,将H5工程输出资源,复制到APP工程中就可以。
H5工程是一VUE项目,编译生成文件存放在dist目录下。
目标:
1、APP应用开发人员,不一定需要熟悉H5内容。
2、APP可直接使用H5工程输出的内容。开发时不需要同时打开H5工程;
3、H5工程输出内容,可复用。
方法说明
涉及工具
WebStorm、npm、TeamCity、Maven
TeamCity构建步骤:
1、ready准备工作
rd /s /q .\distrd /s /q .\targetdir
2、npn install
3、构建工程
npm run build
4、压缩vue工程输出资源
md .\targetcd .\distzip -r ..\target\examvue.zip *
5、将ZIP资源发布到maven中心库
mvn deploy:deploy-file -e -DgroupId=com.hb.generalqb -DartifactId=examvue -Dversion=0.0.1-SNAPSHOT -Dpackaging=zip -Dfile=.\target\examvue.zip -DrepositoryId=snapshots -Durl=http://192.168.1.116:8081/nexus/content/repositories/snapshots
注:版本号附加SNAPSHOT,这样版本可方便迭代。
上述为了支持mvn命令,需要对maven的setting.xml中添加如下内容:
APP工程
主工程添加pom.xml文件,这是为了获取zip资源包
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.hb.vue</groupId>
<artifactId>tmp</artifactId>
<version>0.0.1</version>
<dependencies>
<dependency>
<groupId>com.hb.generalqb</groupId>
<artifactId>examvue</artifactId>
<version>0.0.1-SNAPSHOT</version>
<type>zip</type>
</dependency>
</dependencies>
</project>
通用mvn命令,获取vue的资源。示例:
mvn dependency:copy-dependencies -DoutputDirectory=.\\nexus\\ -DincludeScope=runtime
下载ZIP到本地。解压ZIP文件到APP资源存放目录下。
unzip -o ./nexus/examvue-0.0.1-SNAPSHOT.zip -d ./platforms/ios/HBApp/assets/
本文章适合部分团队。有不足的地方,欢迎点评。若有其它解决方案,请留言!