H5 App打包生成是一種將前端H5應用轉換成可以在移動設備上運行的原生應用的方式。原理是通過將H5應用嵌入到一個原生App的Web容器中，Web容器是一個原生開發的普通應用，內部包含一個WebView組件，WebView組件可以加載和渲染H5應用頁面。通過這種方式，你可以把一個H5應用封裝成一個原生移動應用，無需為每個移動平臺（Android和iOS）分別開發原生應用。

下面我們詳細介紹H5打包生成的過程：

1. 準備H5應用：

首先，你需要有一個完成的H5應用，包括HTML、CSS、JavaScript等資源文件。你可以通過前端開發技術（如HTML5、CSS3、JavaScript、jQuery等）來開發這個應用。

2. 選擇打包工具：

有很多H5應用打包工具可供選擇，這里我們以Apache Cordova（一款非常著名的H5打包工具）為例。其它類似的工具還有Ionic、React Native、Flutter等。你可以根據實際需求選擇相應的工具。

3. 安裝Apache Cordova：

首先，在命令行中通過npm安裝Cordova：`npm install -g cordova`。

4. 開始打包：

(1) 創建cordova項目：`cordova create myApp [your_package_id] MyAppName`。

(2) 進入項目目錄：`cd myApp`。

(3) 添加移動平臺：`cordova platform add android`（或`cordova platform add ios`）。

(4) 把你的H5應用資源文件（如index.html、CSS、JavaScript等）替換到 /www 目錄下。

(5) 添加需要的cordova插件（如Camera、Contacts等）。例如：`cordova plugin add cordova-plugin-camera`。

(6) 編譯打包應用：`cordova build android`（或`cordova build ios`）。

5. 完成打包：

在完成這些步驟后，你的H5應用就已經被成功封裝成一個原生移動應用了。在 platforms/android/app/build/outputs/apk 或 platforms/ios/build/ 目錄下可以找到生成的.apk（安卓）或.ipa（iOS）文件。

注意：

1) 根據打包的平臺不同，Android和iOS可能需要不同的操作。例如，為iOS打包時，還需要安裝Xcode、配置簽名等。具體的操作你可以參照Cordova官方文檔。

2) H5打包的方式有優點也有缺點。優點是開發成本低、效率高，缺點是性能可能不如原生應用并且某些設備功能上可能存在限制。

3) 如果你的應用需要在各個平臺上獲得更優的性能表現，可以考慮使用React Native等。這些工具提供了一個在原生層進行渲染的JS Bridge，可以將JS代碼轉換成真正的原生UI組件。