englishread-front/README-page-flip.md

# 在小程序中使用page-flip库的方案

## 方案概述

由于小程序环境不支持DOM操作，无法直接使用page-flip库，我们采用了web-view组件嵌入网页的方式来实现翻书效果。

## 实现步骤

### 1. 创建HTML页面

我们已经创建了两个HTML文件：
- `hybrid/html/page-flip.html`：用于App环境
- `static/page-flip.html`：可用于部署到服务器

这两个文件包含了page-flip库的引用和基本实现。

### 2. 部署HTML文件到服务器

小程序环境下的web-view组件只能加载网络URL，不能加载本地HTML文件。因此，您需要：

1. 将`static/page-flip.html`文件部署到您的服务器上
2. 确保该文件可以通过HTTPS访问

### 3. 配置小程序域名白名单

在小程序管理后台，您需要配置以下内容：

1. 进入小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名
2. 在「web-view业务域名」中添加您部署HTML文件的域名
3. 在「request合法域名」中添加CDN域名（如果使用了CDN加载page-flip库）

### 4. 修改test.vue文件中的URL

将`test.vue`文件中的示例URL替换为您实际部署的URL：

```javascript
webviewUrl: 'https://您的域名/page-flip.html'
```

## 通信机制

HTML页面和小程序之间的通信通过`uni.postMessage`和`@message`事件实现：

1. HTML页面中通过`uni.postMessage`发送消息：
```javascript
if (window.uni) {
    uni.postMessage({
        data: {
            action: 'pageChange',
            page: e.data
        }
    });
}
```

2. 小程序中通过`@message`事件接收消息：
```javascript
handleMessage(event) {
    console.log('收到web-view消息:', event.detail);
    if (event.detail.data && event.detail.data.action === 'pageChange') {
        this.currentPage = event.detail.data.page;
        console.log('当前页面:', this.currentPage);
    }
}
```

## 注意事项

1. 小程序中的web-view组件会自动铺满整个页面，且一定有原生导航栏
2. 小程序的web-view使用的是小程序自带的浏览器内核，不同厂商可能有差异
3. 如果需要在web-view上覆盖内容，小程序端无法实现，只能由web-view内部的页面自己弹出div
4. 确保page-flip库的CDN地址可以被小程序访问

## App环境使用说明

App环境下可以直接使用本地HTML文件，路径为：

```javascript
webviewUrl: '/hybrid/html/page-flip.html'
```

## 自定义内容

您可以根据需要修改HTML文件中的内容，例如：

1. 修改页面内容
2. 调整page-flip库的配置参数
3. 添加自定义样式
4. 增加更多交互功能

只需确保修改后的HTML文件重新部署到服务器，并且URL在小程序中正确配置即可。