FEAT => 本次更新项目为：
初始化appbuild
This commit is contained in:
280
Appbuild/README.md
Normal file
280
Appbuild/README.md
Normal file
@@ -0,0 +1,280 @@
|
||||
# 存客宝 - 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. **错误处理** - 完善错误处理机制，提升用户体验
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
如有问题或需要技术支持，请联系开发团队。
|
||||
Reference in New Issue
Block a user