网页打包 App 可以让我们将网页封装成一个 app，在手机上直接访问网页，无需再打开浏览器等操作。而微信 H5 支付是指在微信公众号或微信内打开的 H5 网页，通过微信支付完成的支付行为。
网页打包 App 微信 H5 支付的原理为：
1.先将网页打包成 app 的形式，并上传至应用商店，用户下载并安装 app 到手机。
2.用户在 app 中打开对应的网页，进行商品购买操作。
3.在支付页面，用户选择微信支付，并输入相应的支付信息。
4.微信服务端将支付请求发送给用户在微信中的账号，用户确认后，微信将支付结果返回给 app。
5.app 将支付结果展示给用户并记录支付信息，同时将支付结果发送给服务器。
以上就是网页打包 app 微信 H5 支付的简单原理介绍。
下面详细介绍一下网页打包 app 微信 H5 支付的实现过程：
1.网页打包 app
网页打包 app 可以使用多种工具进行实现，比如 Phonegap，Cordova 等等。其中，借助 Cordova 实现网页打包 app 的步骤如下：
(1) 安装 Cordova。我们可以根据自己电脑的操作系统来选择对应的工具安装，比如在 Windows 上可下载安装 exe 文件来安装 Cordova。
(2) Cordova 创建应用。输入命令 cordova create myApp com.example.myApp MyApp，创建一个应用名为 myApp，包名为 com.example.myApp 的应用。
(3) 添加平台。我们需要为打包 app 添加平台，所以需要输入命令 cordova platform add android，添加安卓平台。
(4) 创建插件。为了实现微信 H5 支付功能，我们需要自己编写插件。
(5) 编写插件。在 Cordova 应用中创建 plugin.xml 文件，增加需要使用的插件，同时在 Java 文件中编写具体的功能。
(6) 根据需求进行配置。
(7) 安装插件。安装插件后，就可以在代码中调用对应的插件功能。
2.实现微信 H5 支付
在网页打包 app 中实现微信 H5 支付，需要开发者自行编写微信支付的相关代码，其中，使用微信 JsAPI 接口 canPay 来判断当前设备的微信支付是否可用，如果可用，则通过 chooseWXPay 方法完成支付。
（1）引入微信 JsAPI
我们需要在 html 文件中引入微信 jsapi 的库文件：
```
```
（2）初始化微信 JsAPI
我们需要在网页中初始化微信 JsAPI：
```
wx.config({
debug: false,
appId: '',
timestamp: ,
nonceStr: '',
signature: '',
jsApiList: ['chooseWXPay']
});
```
(3) 获取用户授权
引入微信 jsapi 库文件并初始化后，我们还需要获取用户授权：
```
wx.checkJsApi({
jsApiList: ['chooseWXPay'], // 需要检测的JS接口列表，通过JS-SDK的getJSApiTicket票据计算出
success: function (res) {
},
fail: function(res) {
// 提示用户授权失败
}
});
```
(4) 调用微信 H5 支付
获取用户授权后，我们可以在支付页面中调用微信 H5 支付：
```
wx.chooseWXPay({
timestamp: '',
nonceStr: '',
package: '',
signType: '',
paySign: '',
success: function (res) {
// 提示用户支付成功
},
fail: function(res) {
// 提示用户支付失败
}
});
```
以上是实现网页打包 app 微信 H5 支付的实现过程。需要注意的是，在实现过程中需要开发者对微信 H5 支付有一定了解，同时需要防止支付过程中出现漏洞，保护用户支付安全。
