# 存客宝 - UniApp 套壳应用
这是一个基于 UniApp 开发的安卓套壳应用，主要功能是作为内置浏览器加载目标网站，并提供完整的组件通信功能。
## 🚀 主要特性
- **全屏 WebView** - 无边框、无导航栏的全屏显示
- **双向通信** - UniApp 与网页之间的完整消息通信
- **无缝体验** - 用户无法察觉这是一个套壳应用
- **错误处理** - 完善的加载失败和网络错误处理
- **备用地址** - 支持主地址失败时自动切换到备用地址
- **调试模式** - 可选的调试信息显示
## 📱 应用配置
### 1. 修改目标网站
在 `config.js` 文件中修改目标网站地址：
```javascript
webConfig: {
// 主要目标网站URL（请替换为您的实际网站）
mainUrl: 'https://your-target-website.com',
// 备用网站URL（如果主网站无法访问）
fallbackUrl: 'https://backup-website.com',
}
```
### 2. 应用设置
```javascript
appConfig: {
// 应用名称
appName: '存客宝',
// 应用版本
version: '1.0.0',
// 是否显示加载动画
showLoading: true,
// 加载超时时间（毫秒）
loadingTimeout: 10000,
// 是否启用调试模式
debug: false
}
```
## 🔄 通信功能
### UniApp 向网页发送消息
网页可以通过以下方式接收来自 UniApp 的消息：
```javascript
// 监听来自 UniApp 的消息
window.addEventListener("uniAppMessage", function (event) {
const message = event.detail;
console.log("收到 UniApp 消息:", message);
switch (message.type) {
case "userInfo":
// 处理用户信息
console.log("用户信息:", message.data);
break;
case "deviceInfo":
// 处理设备信息
console.log("设备信息:", message.data);
break;
case "shareResult":
// 处理分享结果
console.log("分享结果:", message.data);
break;
case "paymentResult":
// 处理支付结果
console.log("支付结果:", message.data);
break;
case "confirmResult":
// 处理确认结果
console.log("确认结果:", message.data);
break;
}
});
```
### 网页向 UniApp 发送消息
网页可以通过 `window.uniAppBridge` 对象与 UniApp 通信：
```javascript
// 检查桥接是否可用
if (window.uniAppBridge) {
// 获取用户信息
window.uniAppBridge.getUserInfo();
// 获取设备信息
window.uniAppBridge.getDeviceInfo();
// 显示 Toast
window.uniAppBridge.showToast("操作成功！", 2000);
// 显示 Alert
window.uniAppBridge.showAlert("提示", "这是一个提示信息");
// 显示 Confirm
window.uniAppBridge.showConfirm("确认", "确定要执行此操作吗？");
// 分享
window.uniAppBridge.share({
url: "https://example.com",
title: "分享标题",
summary: "分享描述",
});
// 支付
window.uniAppBridge.payment({
amount: 100,
orderId: "order123",
description: "商品描述",
});
// 发送自定义消息
window.uniAppBridge.postMessage("customType", {
key: "value",
data: "custom data",
});
}
```
## 🛠️ 开发指南
### 1. 环境准备
确保已安装 HBuilderX 并配置好 UniApp 开发环境。
### 2. 修改配置
1. 打开 `config.js` 文件
2. 修改 `mainUrl` 为您的目标网站地址
3. 根据需要修改其他配置项
### 3. 编译打包
1. 在 HBuilderX 中打开项目
2. 选择 "发行" -> "原生 App-云打包"
3. 选择 Android 平台
4. 配置应用图标和签名信息
5. 点击打包
### 4. 测试通信功能
在目标网站中添加以下测试代码：
```html
测试页面
UniApp 套壳应用测试
```
## 📋 消息类型说明
### 从网页到 UniApp
| 消息类型 | 说明 | 参数 |
| --------------- | ------------ | -------------------------------- |
| `getUserInfo` | 获取用户信息 | 无 |
| `getDeviceInfo` | 获取设备信息 | 无 |
| `toast` | 显示 Toast | `{message, duration}` |
| `alert` | 显示 Alert | `{title, content}` |
| `confirm` | 显示 Confirm | `{title, content}` |
| `share` | 分享功能 | `{url, title, summary}` |
| `payment` | 支付功能 | `{amount, orderId, description}` |
| `navigate` | 页面导航 | `{url}` |
### 从 UniApp 到网页
| 消息类型 | 说明 | 数据 |
| --------------- | -------- | --------------------- |
| `userInfo` | 用户信息 | 用户数据对象 |
| `deviceInfo` | 设备信息 | 设备数据对象 |
| `shareResult` | 分享结果 | `{success, error?}` |
| `paymentResult` | 支付结果 | `{success, orderId?}` |
| `confirmResult` | 确认结果 | `{confirmed}` |
## 🔧 自定义功能
### 添加新的消息类型
1. 在 `config.js` 中添加新的消息类型：
```javascript
messageTypes: {
// ... 现有类型
CUSTOM_ACTION: "customAction";
}
```
2. 在 `index.vue` 中添加处理逻辑：
```javascript
case this.config.communication.messageTypes.CUSTOM_ACTION:
this.handleCustomAction(data);
break;
```
3. 实现处理方法：
```javascript
handleCustomAction(data) {
// 处理自定义操作
console.log('自定义操作:', data);
// 返回结果给网页
this.sendToIframe('customActionResult', { success: true });
}
```
## 🚨 注意事项
1. **网络安全** - 确保目标网站使用 HTTPS 协议
2. **权限配置** - 在 `manifest.json` 中配置必要的网络权限
3. **兼容性** - 测试不同 Android 版本的兼容性
4. **性能优化** - 避免频繁的消息通信，影响性能
5. **错误处理** - 完善错误处理机制，提升用户体验
## 📞 技术支持
如有问题或需要技术支持，请联系开发团队。