Skip to content

飞
飞鹤小程序
Commit a1925ada authored by 王炽's avatar 王炽
Browse files
Options

66666

parent 272e4330
Hide whitespace changes
Inline Side-by-side
Showing with 566 additions and 2 deletions
.DS_Store
View file @ a1925ada
No preview for this file type
api/request.js
View file @ a1925ada
...@@ -17,8 +17,8 @@ const { ...@@ -17,8 +17,8 @@ const {
// 通常可以吧 baseUrl 单独放在一个 js 文件了 // 通常可以吧 baseUrl 单独放在一个 js 文件了
// const baseUrl = "http://172.16.230.108:7777/pmall"; // const baseUrl = "http://172.16.230.108:7777/pmall";
// const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境 // const baseUrl = "https://momclub-uat.feihe.com/pmall";//测试环境
const baseUrl = "https://momclub-test.feihe.com/pmall"; // const baseUrl = "https://momclub-test.feihe.com/pmall";
// let baseUrl = "https://momclub.feihe.com/pmall";//生产环境 let baseUrl = "https://momclub.feihe.com/pmall";//生产环境
// const baseUrl = "https://docs.dui88.com/mock/1956/api";//mock // const baseUrl = "https://docs.dui88.com/mock/1956/api";//mock
// const baseUrl = "https://feihe.m.duibatest.com.cn/pmall" // const baseUrl = "https://feihe.m.duibatest.com.cn/pmall"
......
docs/H5分享方法调用文档.md 0 → 100644
View file @ a1925ada
# 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: 添加分享到朋友圈支持
docs/H5投放参数使用文档.md 0 → 100644
View file @ a1925ada
# 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`
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment