APP應用的H5資源文件工程化

應用場景

APP工程中使用H5頁面，這些H5資源將與APP安裝包一起分發出去。APP應用開發與H5頁面開發，通常是由兩批人員實現。那么H5頁面有必要存在于獨立的工程中，而非與APP工程放一起。只需要在APP打包前，將H5工程輸出資源，復制到APP工程中就可以。

H5工程是一VUE項目，編譯生成文件存放在dist目錄下。

H5工程

目標：

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/

本文章適合部分團隊。有不足的地方，歡迎點評。若有其它解決方案，請留言！