281 lines
7.2 KiB
Markdown
281 lines
7.2 KiB
Markdown
# 存客宝 - 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
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>测试页面</title>
|
||
</head>
|
||
<body>
|
||
<h1>UniApp 套壳应用测试</h1>
|
||
|
||
<button onclick="testCommunication()">测试通信</button>
|
||
<button onclick="getUserInfo()">获取用户信息</button>
|
||
<button onclick="getDeviceInfo()">获取设备信息</button>
|
||
<button onclick="showToast()">显示 Toast</button>
|
||
|
||
<div id="result"></div>
|
||
|
||
<script>
|
||
// 监听来自 UniApp 的消息
|
||
window.addEventListener("uniAppMessage", function (event) {
|
||
const message = event.detail;
|
||
document.getElementById("result").innerHTML =
|
||
"<p>收到消息: " + JSON.stringify(message) + "</p>";
|
||
});
|
||
|
||
function testCommunication() {
|
||
if (window.uniAppBridge) {
|
||
window.uniAppBridge.postMessage("test", {
|
||
message: "Hello from Web!",
|
||
timestamp: Date.now(),
|
||
});
|
||
} else {
|
||
alert("桥接未初始化");
|
||
}
|
||
}
|
||
|
||
function getUserInfo() {
|
||
if (window.uniAppBridge) {
|
||
window.uniAppBridge.getUserInfo();
|
||
}
|
||
}
|
||
|
||
function getDeviceInfo() {
|
||
if (window.uniAppBridge) {
|
||
window.uniAppBridge.getDeviceInfo();
|
||
}
|
||
}
|
||
|
||
function showToast() {
|
||
if (window.uniAppBridge) {
|
||
window.uniAppBridge.showToast("这是一个测试 Toast");
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
## 📋 消息类型说明
|
||
|
||
### 从网页到 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. **错误处理** - 完善错误处理机制，提升用户体验
|
||
|
||
## 📞 技术支持
|
||
|
||
如有问题或需要技术支持，请联系开发团队。
|