webConfig: {
    // 主要目标网站URL（请替换为您的实际网站）
    mainUrl: 'https://your-target-website.com',

    // 备用网站URL（如果主网站无法访问）
    fallbackUrl: 'https://backup-website.com',
}

2. 应用设置

appConfig: {
    // 应用名称
    appName: '存客宝',

    // 应用版本
    version: '1.0.0',

    // 是否显示加载动画
    showLoading: true,

    // 加载超时时间（毫秒）
    loadingTimeout: 10000,

    // 是否启用调试模式
    debug: false
}

🔄 通信功能

UniApp 向网页发送消息

网页可以通过以下方式接收来自 UniApp 的消息：

// 监听来自 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 通信：

// 检查桥接是否可用
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. 修改配置

打开 config.js 文件
修改 mainUrl 为您的目标网站地址
根据需要修改其他配置项

3. 编译打包

在 HBuilderX 中打开项目
选择 "发行" -> "原生 App-云打包"
选择 Android 平台
配置应用图标和签名信息
点击打包

4. 测试通信功能

在目标网站中添加以下测试代码：

<!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}`

🔧 自定义功能

添加新的消息类型

在 config.js 中添加新的消息类型：

messageTypes: {
  // ... 现有类型
  CUSTOM_ACTION: "customAction";
}

在 index.vue 中添加处理逻辑：

case this.config.communication.messageTypes.CUSTOM_ACTION:
    this.handleCustomAction(data);
    break;

实现处理方法：

handleCustomAction(data) {
    // 处理自定义操作
    console.log('自定义操作:', data);
    // 返回结果给网页
    this.sendToIframe('customActionResult', { success: true });
}

🚨 注意事项

网络安全 - 确保目标网站使用 HTTPS 协议
权限配置 - 在 manifest.json 中配置必要的网络权限
兼容性 - 测试不同 Android 版本的兼容性
性能优化 - 避免频繁的消息通信，影响性能
错误处理 - 完善错误处理机制，提升用户体验

📞 技术支持

如有问题或需要技术支持，请联系开发团队。

README.md Unescape Escape

存客宝 - UniApp 套壳应用

🚀 主要特性

📱 应用配置

1. 修改目标网站

2. 应用设置

🔄 通信功能

UniApp 向网页发送消息

网页向 UniApp 发送消息

🛠️ 开发指南

1. 环境准备

2. 修改配置

3. 编译打包

4. 测试通信功能

📋 消息类型说明

从网页到 UniApp

从 UniApp 到网页

🔧 自定义功能

添加新的消息类型

🚨 注意事项

📞 技术支持

README.md