66666

a1925ada · 王炽 · 272e4330 · a1925ada · a1925ada · a1925ada
Commit a1925ada authored Nov 04, 2025 by 王炽
Showing with 566 additions and 2 deletions

.DS_Store .DS_Store +0 -0

request.js api/request.js +2 -2

H5分享方法调用文档.md docs/H5分享方法调用文档.md +358 -0

H5投放参数使用文档.md docs/H5投放参数使用文档.md +206 -0

No files found.
--- a/.DS_Store
+++ b/.DS_Store
--- a/api/request.js
+++ b/api/request.js
@@ -17,8 +17,8 @@ const {
 // 通常可以吧 baseUrl 单独放在一个 js 文件了
 // const baseUrl = "http://172.16.230.108:7777/pmall";
 // const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
-const baseUrl = "https://momclub-test.feihe.com/pmall";
-// let baseUrl = "https://momclub.feihe.com/pmall";//生产环境   
+// const baseUrl = "https://momclub-test.feihe.com/pmall";
+let baseUrl = "https://momclub.feihe.com/pmall";//生产环境   
 // const baseUrl = "https://docs.dui88.com/mock/1956/api";//mock
 // const baseUrl = "https://feihe.m.duibatest.com.cn/pmall"


--- a/docs/H5分享方法调用文档.md
+++ b/docs/H5分享方法调用文档.md
+# H5分享方法调用文档
+
+## 概述
+
+本文档说明H5页面如何通过微信小程序的消息机制调用小程序的分享功能，实现自定义分享内容。
+
+## 适用场景
+
+当H5页面需要在小程序中自定义分享内容（标题、图片、路径）时，可以通过 `postMessage` API向小程序发送分享数据。
+
+## 前置条件
+
+1. H5页面必须在微信小程序的 `<web-view>` 组件中加载
+2. 小程序页面路径：`/pages/gameWebview/webview`
+3. 需要在微信小程序环境中运行（微信开发者工具或真实微信环境）
+
+## 调用方法
+
+### 基本语法
+
+```javascript
+wx.miniProgram.postMessage({
+  data: {
+    // 分享数据对象
+    shareUrl: '/pages/index/index?param=value',
+    shareTitle: '分享标题',
+    shareImageUrl: 'https://example.com/share-image.jpg'
+  }
+})
+```
+
+### 完整示例
+
+```javascript
+// H5页面代码
+function shareToWechat() {
+  // 检查是否在微信小程序环境中
+  if (typeof wx !== 'undefined' && wx.miniProgram) {
+    wx.miniProgram.postMessage({
+      data: [{
+        shareUrl: '/pages/index/index?activityId=123&type=game',
+        shareTitle: '快来参与游戏，赢取丰厚奖品！',
+        shareImageUrl: 'https://example.com/images/share.jpg'
+      }]
+    })
+    
+    // 触发分享（需要用户手动触发，如点击按钮）
+    wx.miniProgram.navigateBack()
+  } else {
+    console.warn('当前不在微信小程序环境中')
+  }
+}
+```
+
+## 分享数据格式
+
+### 数据结构
+
+分享数据必须是一个**数组**，数组中的每个元素是一个对象，包含以下字段：
+
+```javascript
+[
+  {
+    shareUrl: string,        // 分享路径（小程序页面路径）
+    shareTitle: string,       // 分享标题
+    shareImageUrl: string     // 分享图片URL（可选）
+  },
+  // ... 可以包含多个分享数据对象
+]
+```
+
+**重要**：小程序会使用数组的**最后一个元素**作为分享数据。
+
+### 字段说明
+
+| 字段名 | 类型 | 必填 | 说明 | 示例 |
+|--------|------|------|------|------|
+| `shareUrl` | String | 是 | 分享后跳转的小程序页面路径（支持参数） | `/pages/index/index?activityId=123` |
+| `shareTitle` | String | 是 | 分享卡片显示的标题 | `快来参与活动！` |
+| `shareImageUrl` | String | 否 | 分享卡片显示的图片URL（网络图片） | `https://example.com/share.jpg` |
+
+### 字段详细说明
+
+#### shareUrl
+
+- **格式**：小程序页面路径，以 `/` 开头
+- **支持参数**：可以在路径后添加查询参数
+- **默认值**：如果未提供或为空，使用 `/pages/index/index`
+- **示例**：
+  - `/pages/index/index`
+  - `/pages/index/index?pageType=home`
+  - `/pages/gameWebview/webview?url=https://example.com/h5/page&activityId=123`
+
+#### shareTitle
+
+- **格式**：纯文本字符串
+- **长度限制**：建议不超过20个字符（微信分享卡片显示限制）
+- **示例**：`快来参与活动，赢取丰厚奖品！`
+
+#### shareImageUrl
+
+- **格式**：完整的网络图片URL（必须以 `http://` 或 `https://` 开头）
+- **尺寸要求**：建议 500x500 像素或更高（微信会自动压缩）
+- **格式要求**：支持 JPG、PNG 格式
+- **大小限制**：建议不超过 200KB
+- **默认值**：如果未提供或为空，使用小程序默认分享图
+
+## 调用时机
+
+### 推荐调用时机
+
+1. **用户点击分享按钮时**
+   ```javascript
+   document.getElementById('share-btn').addEventListener('click', function() {
+     wx.miniProgram.postMessage({
+       data: [{
+         shareUrl: '/pages/index/index?activityId=123',
+         shareTitle: '分享标题',
+         shareImageUrl: 'https://example.com/share.jpg'
+       }]
+     })
+   })
+   ```
+
+2. **页面加载完成后**
+   ```javascript
+   window.addEventListener('load', function() {
+     // 设置默认分享数据
+     wx.miniProgram.postMessage({
+       data: [{
+         shareUrl: window.location.href,
+         shareTitle: document.title,
+         shareImageUrl: 'https://example.com/default-share.jpg'
+       }]
+     })
+   })
+   ```
+
+3. **动态更新分享内容**
+   ```javascript
+   function updateShareContent(activityId, activityName) {
+     wx.miniProgram.postMessage({
+       data: [{
+         shareUrl: `/pages/index/index?activityId=${activityId}`,
+         shareTitle: `快来参与${activityName}！`,
+         shareImageUrl: `https://example.com/activity/${activityId}/share.jpg`
+       }]
+     })
+   }
+   ```
+
+## 完整示例代码
+
+### 示例1：基础分享功能
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>H5分享示例</title>
+</head>
+<body>
+  <button id="shareBtn">分享给好友</button>
+  
+  <script>
+    // 检查是否在微信小程序环境中
+    function isInMiniProgram() {
+      return typeof wx !== 'undefined' && wx.miniProgram
+    }
+    
+    // 设置分享内容
+    function setShareContent() {
+      if (!isInMiniProgram()) {
+        console.warn('当前不在微信小程序环境中')
+        return
+      }
+      
+      wx.miniProgram.postMessage({
+        data: [{
+          shareUrl: '/pages/index/index?source=h5&activityId=123',
+          shareTitle: '快来参与活动，赢取丰厚奖品！',
+          shareImageUrl: 'https://example.com/images/share-activity.jpg'
+        }]
+      })
+      
+      console.log('分享内容已设置')
+    }
+    
+    // 页面加载时设置默认分享内容
+    window.addEventListener('load', function() {
+      setShareContent()
+    })
+    
+    // 点击分享按钮
+    document.getElementById('shareBtn').addEventListener('click', function() {
+      setShareContent()
+      alert('分享内容已更新，请点击右上角分享按钮')
+    })
+  </script>
+</body>
+</html>
+```
+
+### 示例2：动态更新分享内容
+
+```javascript
+// 根据活动状态动态更新分享内容
+function updateShareByActivity(activity) {
+  if (!isInMiniProgram()) {
+    return
+  }
+  
+  const shareData = {
+    shareUrl: `/pages/index/index?activityId=${activity.id}&type=${activity.type}`,
+    shareTitle: activity.shareTitle || `快来参与${activity.name}！`,
+    shareImageUrl: activity.shareImage || 'https://example.com/default-share.jpg'
+  }
+  
+  wx.miniProgram.postMessage({
+    data: [shareData]
+  })
+}
+
+// 获取活动信息后更新分享
+fetch('/api/activity/123')
+  .then(res => res.json())
+  .then(activity => {
+    updateShareByActivity(activity)
+  })
+```
+
+### 示例3：多个分享数据（使用最后一个）
+
+```javascript
+// 小程序会使用数组最后一个元素
+wx.miniProgram.postMessage({
+  data: [
+    {
+      shareUrl: '/pages/index/index',
+      shareTitle: '第一个分享（不会被使用）',
+      shareImageUrl: 'https://example.com/image1.jpg'
+    },
+    {
+      shareUrl: '/pages/index/index?activityId=123',
+      shareTitle: '第二个分享（会被使用）',
+      shareImageUrl: 'https://example.com/image2.jpg'
+    }
+  ]
+})
+```
+
+## 小程序端处理
+
+小程序端会自动接收H5页面发送的分享数据，并在用户触发分享时使用。
+
+### 分享类型
+
+小程序支持两种分享方式：
+
+1. **分享给好友**（`onShareAppMessage`）
+2. **分享到朋友圈**（`onShareTimeline`）
+
+两种分享方式都会使用相同的分享数据。
+
+## 注意事项
+
+### 1. 数据格式要求
+
+- 分享数据必须是**数组格式**
+- 数组最后一个元素会被使用
+- 如果数组为空或格式错误，会使用默认分享内容
+
+### 2. 调用时机限制
+
+- `postMessage` 必须在用户交互（如点击）后调用才能生效
+- 不能在页面加载时立即调用（可能被微信拦截）
+
+### 3. 环境检测
+
+建议在调用前检测是否在微信小程序环境中：
+
+```javascript
+function isInMiniProgram() {
+  return typeof wx !== 'undefined' && wx.miniProgram
+}
+
+if (isInMiniProgram()) {
+  // 调用 postMessage
+} else {
+  console.warn('当前不在微信小程序环境中')
+}
+```
+
+### 4. 分享图片要求
+
+- 必须是网络图片（不能是本地路径）
+- 建议尺寸：500x500 像素或更高
+- 建议格式：JPG、PNG
+- 建议大小：不超过 200KB
+
+### 5. 分享路径
+
+- 必须以 `/` 开头
+- 可以是小程序内任意页面路径
+- 支持查询参数
+- 路径必须在 `pages.json` 中配置
+
+### 6. 调试方法
+
+在微信开发者工具中：
+1. 打开调试器
+2. 查看 Console 输出
+3. 检查 `postMessage` 是否成功调用
+4. 点击右上角分享按钮测试分享功能
+
+## 常见问题
+
+### Q1: 分享数据发送后没有生效？
+
+A: 检查以下几点：
+- 数据格式是否正确（必须是数组）
+- 是否在用户交互后调用（不能直接调用）
+- 是否在微信小程序环境中
+- 分享数据字段是否完整
+
+### Q2: 如何动态更新分享内容？
+
+A: 可以在需要的时候多次调用 `postMessage`，每次调用都会更新分享内容。
+
+### Q3: 分享图片显示不出来？
+
+A: 检查：
+- 图片URL是否可访问（必须是网络图片）
+- 图片格式是否正确（JPG、PNG）
+- 图片大小是否合适（建议不超过200KB）
+
+### Q4: 可以同时设置多个分享数据吗？
+
+A: 可以，但小程序只会使用数组的最后一个元素。
+
+### Q5: 分享路径可以跳转到其他小程序吗？
+
+A: 不可以，`shareUrl` 只能是小程序内的页面路径，不能跳转到其他小程序或H5页面。
+
+## 最佳实践
+
+1. **及时更新分享内容**：根据页面状态动态更新分享内容
+2. **提供默认分享**：页面加载时设置默认分享内容
+3. **优化分享图片**：使用高质量、合适尺寸的分享图片
+4. **测试分享功能**：在不同场景下测试分享功能是否正常
+5. **错误处理**：添加环境检测和错误处理逻辑
+
+## 更新日志
+
+- 2025-01-XX: 初始版本，支持基础分享功能
+- 2025-01-XX: 添加分享到朋友圈支持
+
--- a/docs/H5投放参数使用文档.md
+++ b/docs/H5投放参数使用文档.md
+# H5投放参数使用文档
+
+## 概述
+
+本文档说明如何在小程序中跳转到H5页面（webview），以及如何传递参数给H5页面。
+
+## 页面路径
+
+小程序webview页面路径：`/pages/gameWebview/webview`
+
+## URL参数说明
+
+### 基础参数
+
+| 参数名 | 类型 | 必填 | 说明 | 示例 |
+|--------|------|------|------|------|
+| `url` | String | 否 | H5页面URL（完整URL或相对路径） | `https://example.com/h5/page` |
+| `baseUrl` | String | 否 | 同 `url`，用于指定H5页面URL | `https://example.com/h5/page` |
+| `scene` | String | 否 | 二维码场景值（会自动双重解码） | `?type=activity&id=123` |
+| `needLogin` | String | 否 | 是否需要登录（`'true'` 或 `'false'`） | `'true'` |
+
+**注意**：
+- `url` 和 `baseUrl` 参数互斥，两者功能相同，优先使用 `url`
+- 如果 `url` 或 `baseUrl` 不包含协议（`http://` 或 `https://`），会自动添加 `https://`
+- 如果未指定 `url` 或 `baseUrl`，默认使用：`https://momclub-test.feihe.com/h5/game/index.html`
+
+### 自定义参数
+
+除了上述基础参数外，其他所有参数都会原样传递给H5页面。
+
+**示例**：
+```javascript
+uni.navigateTo({
+  url: '/pages/gameWebview/webview?url=https://example.com/h5/page&activityId=123&type=game&source=wechat'
+})
+```
+
+H5页面接收到的URL为：
+```
+https://example.com/h5/page?activityId=123&type=game&source=wechat&cuk=xxx&openId=xxx&...
+```
+
+## 自动添加的参数
+
+小程序会自动在H5 URL中添加以下参数（无需手动传递）：
+
+### 用户身份参数
+
+| 参数名 | 说明 | 示例值 | 备注 |
+|--------|------|--------|------|
+| `cuk` | 用户登录凭证 | `abc123def456` | 自动添加（如果已登录） |
+| `miniopenid` | 用户OpenID | `oXXX...` | 自动添加 |
+| `unionId` | 用户UnionID | `uXXX...` | 自动添加（如果存在） |
+| `wxNickName` | 微信昵称 | `张三` | 自动添加（如果存在） |
+
+### 会员信息参数（仅已登录用户）
+
+| 参数名 | 说明 | 示例值 | 备注 |
+|--------|------|--------|------|
+| `memberid` | 会员ID | `CRM000000000188501075` | 自动添加（已登录时） |
+| `crmId` | 会员ID（同memberid） | `CRM000000000188501075` | 自动添加（已登录时） |
+| `programLogin` | 是否登录 | `'1'` 或 `'0'` | `'1'`=已登录，`'0'`=未登录 |
+| `memberType` | 会员等级名称 | `V1黄金会员` | 从 `gradeList` 中根据 `grade` 匹配获取 |
+
+**会员等级说明**：
+- `memberType` 的值来自接口返回的 `gradeList` 数组
+- 根据当前用户的 `grade` 值，在 `gradeList` 中查找对应的 `gradeName`
+- 如果找不到，则使用 `gradeName` 字段
+- 如果都没有，则使用 `grade` 的字符串值
+
+**示例数据**：
+```json
+{
+  "grade": "0",
+  "gradeList": [
+    {"grade": "0", "gradeName": "V1黄金会员"},
+    {"grade": "1", "gradeName": "V2铂金会员"},
+    {"grade": "2", "gradeName": "V3钻石会员"}
+  ]
+}
+```
+
+如果用户的 `grade` 为 `"0"`，则 `memberType` 参数值为 `"V1黄金会员"`。
+
+## 完整示例
+
+### 示例1：基础跳转
+
+```javascript
+// 小程序代码
+uni.navigateTo({
+  url: '/pages/gameWebview/webview?url=https://example.com/h5/game'
+})
+```
+
+**实际传递到H5的URL**：
+```
+
+```
+
+### 示例2：带自定义参数和场景值
+
+```javascript
+// 小程序代码
+uni.navigateTo({
+  url: '/pages/gameWebview/webview?url=https://example.com/h5/activity&activityId=123&type=game&scene=' + encodeURIComponent(encodeURIComponent('?campaign=summer&source=qr'))
+})
+```
+
+**说明**：
+- `scene` 参数会被双重解码，所以需要双重编码
+- 其他参数会原样传递
+
+### 示例3：需要登录的页面
+
+```javascript
+// 小程序代码
+uni.navigateTo({
+  url: '/pages/gameWebview/webview?url=https://example.com/h5/member&needLogin=true'
+})
+```
+
+**说明**：
+- 如果 `needLogin=true` 且用户未登录，会自动跳转到注册页
+- 注册成功后返回webview页面
+
+### 示例4：使用相对路径
+
+```javascript
+// 小程序代码
+uni.navigateTo({
+  url: '/pages/gameWebview/webview?url=momclub-test.feihe.com/h5/game'
+})
+```
+
+**说明**：
+- 如果URL不包含协议，会自动添加 `https://`
+- 实际URL：`https://momclub-test.feihe.com/h5/game`
+
+## 参数编码说明
+
+### 自动编码
+
+所有参数值都会自动进行 `encodeURIComponent` 编码，无需手动编码。
+
+### Scene参数特殊处理
+
+`scene` 参数会被双重解码，所以如果需要传递 `scene` 参数，需要双重编码：
+
+```javascript
+const scene = '?campaign=summer&source=qr'
+const encodedScene = encodeURIComponent(encodeURIComponent(scene))
+uni.navigateTo({
+  url: `/pages/gameWebview/webview?url=https://example.com/h5/page&scene=${encodedScene}`
+})
+```
+
+## 在H5页面中获取参数
+
+H5页面可以通过以下方式获取参数：
+
+```javascript
+// 方式1：使用 URLSearchParams
+const urlParams = new URLSearchParams(window.location.search)
+const activityId = urlParams.get('activityId')
+const memberId = urlParams.get('memberId')
+const programLogin = urlParams.get('programLogin')
+const memberType = urlParams.get('memberType')
+
+// 方式2：手动解析
+function getQueryParam(name) {
+  const urlParams = new URLSearchParams(window.location.search)
+  return urlParams.get(name)
+}
+
+const memberId = getQueryParam('memberId')
+```
+
+## 注意事项
+
+1. **参数长度限制**：URL总长度有限制，建议不要传递过多参数
+2. **参数编码**：参数值会自动编码，无需手动处理
+3. **登录状态**：`programLogin` 参数会自动根据用户登录状态设置
+4. **会员信息**：会员相关参数（`memberId`、`memberType`）仅在用户已登录时添加
+5. **Scene参数**：`scene` 参数会被特殊处理（双重解码），主要用于二维码场景
+6. **默认URL**：如果未指定 `url` 或 `baseUrl`，会使用默认的测试环境URL
+
+## 常见问题
+
+### Q1: 如何判断用户是否登录？
+A: 检查 `programLogin` 参数，值为 `'1'` 表示已登录，`'0'` 表示未登录。
+
+### Q2: 如何获取会员等级？
+A: 使用 `memberType` 参数，值为会员等级名称（如 `"V1黄金会员"`）。
+
+### Q3: 如何传递复杂数据结构？
+A: 建议将复杂数据序列化为JSON字符串传递，或通过接口获取。
+
+### Q4: Scene参数如何使用？
+A: `scene` 参数主要用于二维码场景，会自动双重解码，可以包含查询字符串格式的参数。
+
+## 更新日志
+
+- 2025-01-XX: 添加 `memberId`、`programLogin`、`memberType` 参数自动传递
+- 2025-01-XX: `memberType` 改为从 `gradeList` 中获取 `gradeName`
+