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;