zhangyan/cmr-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善原生内容卡与H5详情分工

Browse Source
This commit is contained in:
zhangyan
2026-03-27 21:03:55 +08:00
parent 0e0a724025
commit 0703fd47a2
21 changed files with 903 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
miniprogram/pages/experience-webview/experience-webview.js
View File

@@ -39,19 +39,29 @@ function emitCloseAndBack(payload) {
Page({
data: {
pageTitle: '内容体验',
pageSubtitle: '',
presentation: 'sheet',
webViewSrc: '',
webViewReady: false,
loadErrorText: '',
panelBodyHeightPx: 420,
},
onLoad() {
const systemInfo = wx.getSystemInfoSync()
const windowHeight = typeof systemInfo.windowHeight === 'number' ? systemInfo.windowHeight : 700
pageResolved = false
currentRequest = null
currentEventChannel = null
this.setData({
pageTitle: '内容体验',
pageSubtitle: '',
presentation: 'sheet',
webViewSrc: '',
webViewReady: false,
loadErrorText: '',
panelBodyHeightPx: Math.max(420, Math.floor(windowHeight * 0.62)),
})
try {
@@ -66,14 +76,21 @@ Page({
currentEventChannel.on('init', (request) => {
currentRequest = request
wx.setNavigationBarTitle({
title: request.title || '内容体验',
fail() {},
})
const presentation = request.presentation || 'sheet'
const panelHeightPx = presentation === 'dialog'
? Math.max(420, Math.floor(windowHeight * 0.7))
: presentation === 'fullscreen'
? Math.max(520, windowHeight - 24)
: Math.max(420, Math.floor(windowHeight * 0.72))
const headerHeightPx = presentation === 'fullscreen' ? 84 : 76
this.setData({
pageTitle: request.title || '内容体验',
pageSubtitle: request.subtitle || '',
presentation,
webViewSrc: buildWebViewSrc(request),
webViewReady: true,
loadErrorText: '',
panelBodyHeightPx: Math.max(240, panelHeightPx - headerHeightPx),
})
})
},
@@ -124,4 +141,8 @@ Page({
})
emitFallbackAndClose()
},
handleCloseTap() {
emitCloseAndBack({})
},
})

2
miniprogram/pages/experience-webview/experience-webview.json
View File

@@ -1,3 +1,5 @@
{
"navigationStyle": "custom",
"disableScroll": true,
"navigationBarTitleText": "内容体验"
}

33
miniprogram/pages/experience-webview/experience-webview.ts
View File

@@ -1,9 +1,13 @@
import { type H5BridgeMessage, type H5ExperienceRequest } from '../../game/experience/h5Experience'
type ExperienceWebViewPageData = {
pageTitle: string
pageSubtitle: string
presentation: 'sheet' | 'dialog' | 'fullscreen'
webViewSrc: string
webViewReady: boolean
loadErrorText: string
panelBodyHeightPx: number
}
let currentRequest: H5ExperienceRequest | null = null
@@ -47,19 +51,29 @@ function emitCloseAndBack(payload?: Record<string, unknown>) {
Page<ExperienceWebViewPageData, WechatMiniprogram.IAnyObject>({
data: {
pageTitle: '内容体验',
pageSubtitle: '',
presentation: 'sheet',
webViewSrc: '',
webViewReady: false,
loadErrorText: '',
panelBodyHeightPx: 420,
},
onLoad() {
const systemInfo = wx.getSystemInfoSync()
const windowHeight = typeof systemInfo.windowHeight === 'number' ? systemInfo.windowHeight : 700
pageResolved = false
currentRequest = null
currentEventChannel = null
this.setData({
pageTitle: '内容体验',
pageSubtitle: '',
presentation: 'sheet',
webViewSrc: '',
webViewReady: false,
loadErrorText: '',
panelBodyHeightPx: Math.max(420, Math.floor(windowHeight * 0.62)),
})
try {
@@ -74,14 +88,21 @@ Page<ExperienceWebViewPageData, WechatMiniprogram.IAnyObject>({
currentEventChannel.on('init', (request: H5ExperienceRequest) => {
currentRequest = request
wx.setNavigationBarTitle({
title: request.title || '内容体验',
fail: () => {},
})
const presentation = request.presentation || 'sheet'
const panelHeightPx = presentation === 'dialog'
? Math.max(420, Math.floor(windowHeight * 0.7))
: presentation === 'fullscreen'
? Math.max(520, windowHeight - 24)
: Math.max(420, Math.floor(windowHeight * 0.72))
const headerHeightPx = presentation === 'fullscreen' ? 84 : 76
this.setData({
pageTitle: request.title || '内容体验',
pageSubtitle: request.subtitle || '',
presentation,
webViewSrc: buildWebViewSrc(request),
webViewReady: true,
loadErrorText: '',
panelBodyHeightPx: Math.max(240, panelHeightPx - headerHeightPx),
})
})
},
@@ -133,4 +154,8 @@ Page<ExperienceWebViewPageData, WechatMiniprogram.IAnyObject>({
})
emitFallbackAndClose()
},
handleCloseTap() {
emitCloseAndBack({})
},
})

36
miniprogram/pages/experience-webview/experience-webview.wxml
View File

@@ -1,11 +1,27 @@
<view wx:if="{{!webViewReady}}" class="experience-webview__loading">
<view class="experience-webview__loading-title">内容页加载中</view>
<view wx:if="{{loadErrorText}}" class="experience-webview__loading-error">{{loadErrorText}}</view>
</view>
<view class="experience-shell experience-shell--{{presentation}}">
<view class="experience-shell__backdrop" catchtap="handleCloseTap"></view>
<view class="experience-shell__panel experience-shell__panel--{{presentation}}">
<view class="experience-shell__header">
<view class="experience-shell__header-copy">
<view class="experience-shell__title">{{pageTitle}}</view>
<view wx:if="{{pageSubtitle}}" class="experience-shell__subtitle">{{pageSubtitle}}</view>
</view>
<view class="experience-shell__close" catchtap="handleCloseTap">关闭</view>
</view>
<web-view
wx:if="{{webViewReady && webViewSrc}}"
src="{{webViewSrc}}"
bindmessage="handleWebViewMessage"
binderror="handleWebViewError"
></web-view>
<view class="experience-shell__body" style="height: {{panelBodyHeightPx}}px;">
<view wx:if="{{!webViewReady}}" class="experience-webview__loading">
<view class="experience-webview__loading-title">内容页加载中</view>
<view wx:if="{{loadErrorText}}" class="experience-webview__loading-error">{{loadErrorText}}</view>
</view>
<web-view
wx:if="{{webViewReady && webViewSrc}}"
style="height: 100%;"
src="{{webViewSrc}}"
bindmessage="handleWebViewMessage"
binderror="handleWebViewError"
></web-view>
</view>
</view>
</view>

92
miniprogram/pages/experience-webview/experience-webview.wxss
View File

@@ -1,12 +1,94 @@
.page {
height: 100%;
}
page {
background: #f5f7f6;
background: transparent;
}
.experience-shell {
position: relative;
min-height: 100vh;
overflow: hidden;
}
.experience-shell__backdrop {
position: absolute;
inset: 0;
background: rgba(14, 18, 17, 0.48);
}
.experience-shell__panel {
position: absolute;
left: 24rpx;
right: 24rpx;
background: #f6faf7;
border: 2rpx solid rgba(21, 36, 27, 0.08);
box-shadow: 0 24rpx 64rpx rgba(19, 31, 25, 0.22);
overflow: hidden;
}
.experience-shell__panel--sheet {
bottom: 24rpx;
border-radius: 36rpx 36rpx 24rpx 24rpx;
}
.experience-shell__panel--dialog {
top: 50%;
transform: translateY(-50%);
border-radius: 32rpx;
}
.experience-shell__panel--fullscreen {
top: 12rpx;
bottom: 12rpx;
left: 12rpx;
right: 12rpx;
border-radius: 24rpx;
}
.experience-shell__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
padding: 24rpx 24rpx 18rpx;
background: linear-gradient(180deg, rgba(227, 243, 234, 0.96), rgba(246, 250, 247, 0.96));
border-bottom: 2rpx solid rgba(30, 63, 46, 0.08);
}
.experience-shell__header-copy {
min-width: 0;
flex: 1;
}
.experience-shell__title {
color: #13241c;
font-size: 32rpx;
font-weight: 700;
line-height: 1.25;
}
.experience-shell__subtitle {
margin-top: 6rpx;
color: #557463;
font-size: 22rpx;
line-height: 1.35;
}
.experience-shell__close {
flex-shrink: 0;
padding: 12rpx 22rpx;
border-radius: 999rpx;
background: rgba(23, 46, 34, 0.08);
color: #244432;
font-size: 24rpx;
font-weight: 600;
}
.experience-shell__body {
position: relative;
background: #f6faf7;
}
.experience-webview__loading {
min-height: 100vh;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;

19
miniprogram/pages/map/map.ts
View File

@@ -800,8 +800,11 @@ Page({
punchFeedbackText: '',
punchFeedbackTone: 'neutral',
contentCardVisible: false,
contentCardTemplate: 'story',
contentCardTitle: '',
contentCardBody: '',
contentCardActionVisible: false,
contentCardActionText: '查看详情',
punchButtonFxClass: '',
panelProgressFxClass: '',
panelDistanceFxClass: '',
@@ -1117,8 +1120,11 @@ Page({
punchFeedbackText: '',
punchFeedbackTone: 'neutral',
contentCardVisible: false,
contentCardTemplate: 'story',
contentCardTitle: '',
contentCardBody: '',
contentCardActionVisible: false,
contentCardActionText: '查看详情',
punchButtonFxClass: '',
panelProgressFxClass: '',
panelDistanceFxClass: '',
@@ -1903,6 +1909,19 @@ Page({
}
},
handleOpenContentCardDetail() {
if (mapEngine) {
wx.showToast({
title: '打开详情',
icon: 'none',
duration: 900,
})
mapEngine.openCurrentContentCardDetail()
}
},
handleContentCardTap() {},
openH5Experience(request: H5ExperienceRequest) {
wx.navigateTo({
url: '/pages/experience-webview/experience-webview',

24
miniprogram/pages/map/map.wxml
View File

@@ -29,13 +29,6 @@
<view class="map-stage__stage-fx {{stageFxClass}}" wx:if="{{stageFxVisible}}"></view>
<view class="game-punch-feedback game-punch-feedback--{{punchFeedbackTone}} {{punchFeedbackFxClass}}" wx:if="{{punchFeedbackVisible}}">{{punchFeedbackText}}</view>
<view class="game-content-card {{contentCardFxClass}}" wx:if="{{contentCardVisible}}" bindtap="handleCloseContentCard">
<view class="game-content-card__title">{{contentCardTitle}}</view>
<view class="game-content-card__body">{{contentCardBody}}</view>
<view class="game-content-card__hint">点击关闭</view>
</view>
<view class="map-stage__overlay-center-layer" wx:if="{{!showDebugPanel && !showGameInfoPanel && !showResultScene && !showSystemSettingsPanel}}">
<view class="center-scale-ruler" wx:if="{{centerScaleRulerVisible}}" style="left: {{centerScaleRulerCenterXPx}}px; top: {{centerScaleRulerZeroYPx}}px; height: {{centerScaleRulerHeightPx}}px;">
<view class="center-scale-ruler__axis" style="bottom: {{centerScaleRulerAxisBottomPx}}px;"></view>
@@ -80,6 +73,23 @@
</view>
</view>
<view
class="game-content-card game-content-card--{{contentCardTemplate}} {{contentCardFxClass}}"
wx:if="{{contentCardVisible}}"
catchtap="handleContentCardTap"
>
<view class="game-content-card__title">{{contentCardTitle}}</view>
<view class="game-content-card__body">{{contentCardBody}}</view>
<view class="game-content-card__action-row {{contentCardActionVisible ? 'game-content-card__action-row--split' : ''}}">
<view
wx:if="{{contentCardActionVisible}}"
class="game-content-card__action"
catchtap="handleOpenContentCardDetail"
>{{contentCardActionText}}</view>
<view class="game-content-card__close" catchtap="handleCloseContentCard">关闭</view>
</view>
</view>
<view class="game-punch-hint" wx:if="{{!showResultScene && showPunchHintBanner && punchHintText}}" style="top: {{topInsetHeight}}px;" catchtouchstart="handlePunchHintTap" catchtouchmove="handlePunchHintTap" catchtouchend="handlePunchHintTap">
<view class="game-punch-hint__text">{{punchHintText}}</view>
<view class="game-punch-hint__close" catchtouchstart="handlePunchHintTap" catchtouchmove="handlePunchHintTap" catchtouchend="handlePunchHintTap" catchtap="handleClosePunchHint">×</view>

78
miniprogram/pages/map/map.wxss
View File

@@ -2003,7 +2003,24 @@
background: rgba(248, 251, 244, 0.96);
box-shadow: 0 18rpx 48rpx rgba(22, 48, 32, 0.18);
box-sizing: border-box;
z-index: 17;
z-index: 33;
pointer-events: auto;
}
.game-content-card--minimal {
width: 396rpx;
padding: 24rpx 24rpx 20rpx;
border-radius: 24rpx;
background: rgba(248, 251, 244, 0.94);
}
.game-content-card--focus {
width: 468rpx;
padding: 30rpx 30rpx 26rpx;
border-radius: 30rpx;
background: linear-gradient(180deg, rgba(240, 248, 241, 0.98), rgba(248, 251, 244, 0.96));
box-shadow: 0 22rpx 54rpx rgba(22, 48, 32, 0.2);
border: 2rpx solid rgba(92, 139, 109, 0.14);
}
.game-content-card__title {
@@ -2013,6 +2030,15 @@
color: #163020;
}
.game-content-card--minimal .game-content-card__title {
font-size: 30rpx;
}
.game-content-card--focus .game-content-card__title {
font-size: 36rpx;
color: #103020;
}
.game-content-card__body {
margin-top: 12rpx;
font-size: 24rpx;
@@ -2020,10 +2046,52 @@
color: #45624b;
}
.game-content-card__hint {
margin-top: 16rpx;
font-size: 20rpx;
color: #809284;
.game-content-card--minimal .game-content-card__body {
margin-top: 10rpx;
font-size: 22rpx;
}
.game-content-card--focus .game-content-card__body {
margin-top: 14rpx;
color: #3f5f49;
}
.game-content-card__action-row {
margin-top: 18rpx;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16rpx;
}
.game-content-card__action-row--split {
justify-content: space-between;
}
.game-content-card__action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56rpx;
padding: 0 22rpx;
border-radius: 999rpx;
background: rgba(25, 78, 47, 0.1);
color: #18472d;
font-size: 22rpx;
font-weight: 700;
}
.game-content-card__close {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56rpx;
padding: 0 22rpx;
border-radius: 999rpx;
background: rgba(16, 32, 20, 0.06);
color: #5a685f;
font-size: 22rpx;
font-weight: 600;
}
.game-content-card--fx-pop {