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. **错误处理** - 完善错误处理机制，提升用户体验
|
|||
|
|
|
|||
|
|
## 📞 技术支持
|
|||
|
|
|
|||
|
|
如有问题或需要技术支持，请联系开发团队。
|