feat(share): 文本分享指引框重做为分步引导卡片(参考截图),去掉系统分享
ShareGuideDialog: 居中卡片 标题{渠道}分享准备完成 + 内容已复制到剪贴板 + 微信/QQ/抖音三套分步指引
+ 两按钮(稍后分享/立即打开{渠道},渠道主题色)。文本不再提供系统分享(移除onGuideAction system分支+systemText)。
容器移除 contentKind 接线。
This commit is contained in:
@@ -1,15 +1,13 @@
|
||||
/**
|
||||
* 分享指引弹窗(渠道选定后弹出)。纯展示组件:动作经 onPick 回容器,
|
||||
* 由容器一次性 resultEvent 回投 ShareProvider(同 SharePanel 模式,不持业务逻辑)。
|
||||
* 文案按 contentKind:文本→"请打开XX粘贴分享";图片→"可在XX长按粘贴;或用系统分享"。
|
||||
* 分享指引弹窗(文本分享用;图片分享走系统分享面板、不经此)。居中卡片:
|
||||
* 标题「{渠道}分享准备完成」+「内容已复制到剪贴板」+ 分步指引 + 「稍后分享」/「立即打开{渠道}」。
|
||||
* 纯展示组件:动作经 onPick 回容器,由容器一次性 resultEvent 回投 ShareProvider。
|
||||
*/
|
||||
@Component
|
||||
export struct ShareGuideDialog {
|
||||
/** 渠道:'wechat' | 'qq' | 'douyin'。 */
|
||||
platform: string = 'wechat';
|
||||
/** 内容类型:'text' | 'image'。 */
|
||||
contentKind: string = 'text';
|
||||
/** 动作回调:'open' | 'system' | 'cancel'。 */
|
||||
/** 动作回调:'open'(立即打开App)| 'cancel'(稍后分享/点空白)。 */
|
||||
onPick: (action: string) => void = () => { };
|
||||
|
||||
private appName(): string {
|
||||
@@ -22,75 +20,108 @@ export struct ShareGuideDialog {
|
||||
return '微信';
|
||||
}
|
||||
|
||||
private appIcon(): Resource {
|
||||
/** 渠道主题色(标题序号徽标 + 打开按钮)。 */
|
||||
private appColor(): string {
|
||||
if (this.platform === 'qq') {
|
||||
return $r('app.media.share_qq');
|
||||
return '#12B7F5';
|
||||
}
|
||||
if (this.platform === 'douyin') {
|
||||
return $r('app.media.share_douyin');
|
||||
return '#FE2C55';
|
||||
}
|
||||
return $r('app.media.share_wechat');
|
||||
return '#07C160';
|
||||
}
|
||||
|
||||
private hint(): string {
|
||||
const name: string = this.appName();
|
||||
return this.contentKind === 'image'
|
||||
? `图片已复制,可在${name}长按粘贴;或点下方用系统分享`
|
||||
: `内容已复制,请打开${name}粘贴分享`;
|
||||
/** 各渠道"分享到好友或群聊"分步文案(差异主要在第 1 步进入聊天的入口)。 */
|
||||
private steps(): string[] {
|
||||
if (this.platform === 'qq') {
|
||||
return ['打开QQ,进入「消息」列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
|
||||
}
|
||||
if (this.platform === 'douyin') {
|
||||
return ['打开抖音,点击右下角「消息」', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
|
||||
}
|
||||
return ['打开微信,进入聊天列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
|
||||
}
|
||||
|
||||
@Builder
|
||||
stepRow(index: number, text: string) {
|
||||
Row() {
|
||||
Text(`${index + 1}`)
|
||||
.fontSize(13)
|
||||
.fontColor(Color.White)
|
||||
.width(20)
|
||||
.height(20)
|
||||
.textAlign(TextAlign.Center)
|
||||
.backgroundColor(this.appColor())
|
||||
.borderRadius(4)
|
||||
Text(text)
|
||||
.fontSize(14)
|
||||
.fontColor('#333333')
|
||||
.margin({ left: 10 })
|
||||
.layoutWeight(1)
|
||||
}
|
||||
.width('100%')
|
||||
.margin({ top: 10 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
}
|
||||
|
||||
build() {
|
||||
Column() {
|
||||
Blank()
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
|
||||
Column() {
|
||||
Image(this.appIcon())
|
||||
.width(48)
|
||||
.height(48)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.margin({ top: 16 })
|
||||
Text(this.hint())
|
||||
Text(`${this.appName()}分享准备完成`)
|
||||
.fontSize(18)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontColor('#222222')
|
||||
.width('100%')
|
||||
|
||||
Row() {
|
||||
Text('✅').fontSize(15)
|
||||
Text('内容已复制到剪贴板')
|
||||
.fontSize(14)
|
||||
.fontColor('#333333')
|
||||
.textAlign(TextAlign.Center)
|
||||
.margin({ top: 12, bottom: 12 })
|
||||
.padding({ left: 20, right: 20 })
|
||||
|
||||
Divider().color('#EEEEEE')
|
||||
Text(`打开${this.appName()}`)
|
||||
.fontSize(16)
|
||||
.fontColor('#1989FA')
|
||||
.width('100%')
|
||||
.textAlign(TextAlign.Center)
|
||||
.padding({ top: 14, bottom: 14 })
|
||||
.onClick(() => this.onPick('open'))
|
||||
Divider().color('#EEEEEE')
|
||||
Text('用系统分享')
|
||||
.fontSize(16)
|
||||
.fontColor('#333333')
|
||||
.width('100%')
|
||||
.textAlign(TextAlign.Center)
|
||||
.padding({ top: 14, bottom: 14 })
|
||||
.onClick(() => this.onPick('system'))
|
||||
Divider().color('#EEEEEE')
|
||||
Text('取消')
|
||||
.fontSize(16)
|
||||
.fontColor('#666666')
|
||||
.width('100%')
|
||||
.textAlign(TextAlign.Center)
|
||||
.padding({ top: 14, bottom: 14 })
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
.margin({ left: 6 })
|
||||
}
|
||||
.width('100%')
|
||||
.margin({ top: 14 })
|
||||
|
||||
Text('🎯 分享到好友或群聊步骤:')
|
||||
.fontSize(14)
|
||||
.fontColor('#666666')
|
||||
.width('100%')
|
||||
.margin({ top: 14 })
|
||||
|
||||
ForEach(this.steps(), (item: string, index: number) => {
|
||||
this.stepRow(index, item)
|
||||
})
|
||||
|
||||
Row() {
|
||||
Button('稍后分享')
|
||||
.fontSize(16)
|
||||
.fontColor('#666666')
|
||||
.backgroundColor('#F2F2F2')
|
||||
.layoutWeight(1)
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
Button(`立即打开${this.appName()}`)
|
||||
.fontSize(16)
|
||||
.fontColor(Color.White)
|
||||
.backgroundColor(this.appColor())
|
||||
.layoutWeight(1)
|
||||
.margin({ left: 12 })
|
||||
.onClick(() => this.onPick('open'))
|
||||
}
|
||||
.width('100%')
|
||||
.margin({ top: 22 })
|
||||
}
|
||||
.width('82%')
|
||||
.padding(20)
|
||||
.backgroundColor(Color.White)
|
||||
.borderRadius({ topLeft: 16, topRight: 16 })
|
||||
.borderRadius(16)
|
||||
.onClick(() => { /* 消费点击,避免穿透到遮罩 */ })
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor('rgba(0,0,0,0.45)')
|
||||
.justifyContent(FlexAlign.Center)
|
||||
.alignItems(HorizontalAlign.Center)
|
||||
.onClick(() => this.onPick('cancel'))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +56,6 @@ export struct BridgeGameContainer {
|
||||
/** 分享指引窗显隐(渠道选定后叠在 Stack 顶层)。 */
|
||||
@State private shareGuideVisible: boolean = false;
|
||||
private shareGuidePlatform: string = '';
|
||||
private shareGuideKind: string = '';
|
||||
/** 当前指引窗的一次性回投事件名(用户选动作后 emit 回 ShareProvider)。 */
|
||||
private shareGuideResultEvent: string = '';
|
||||
|
||||
@@ -166,7 +165,6 @@ export struct BridgeGameContainer {
|
||||
}
|
||||
const req = p as ShareGuideRequest;
|
||||
this.shareGuidePlatform = req.platform;
|
||||
this.shareGuideKind = req.contentKind;
|
||||
this.shareGuideResultEvent = req.resultEvent;
|
||||
this.shareGuideVisible = true;
|
||||
}
|
||||
@@ -431,7 +429,6 @@ export struct BridgeGameContainer {
|
||||
if (this.shareGuideVisible) {
|
||||
ShareGuideDialog({
|
||||
platform: this.shareGuidePlatform,
|
||||
contentKind: this.shareGuideKind,
|
||||
onPick: (action: string) => this.emitShareGuideResult(action),
|
||||
})
|
||||
}
|
||||
|
||||
@@ -241,13 +241,8 @@ export class ShareProvider implements CapabilityProvider {
|
||||
if (platform === 'wechat') {
|
||||
this.reportResult(2, reportType);
|
||||
}
|
||||
} else if (action === 'system') {
|
||||
this.systemText(uiCtx, bean);
|
||||
if (platform === 'wechat') {
|
||||
this.reportResult(2, reportType);
|
||||
}
|
||||
} else {
|
||||
// cancel
|
||||
// 稍后分享 / 取消:仅微信回执取消。
|
||||
if (platform === 'wechat') {
|
||||
this.reportResult(3, reportType);
|
||||
}
|
||||
@@ -299,14 +294,6 @@ export class ShareProvider implements CapabilityProvider {
|
||||
|
||||
// —— 系统分享(图片可靠交付 / 文本兜底;文本不下发 url)——
|
||||
|
||||
private systemText(uiCtx: common.UIAbilityContext, bean: SharetypeBean): void {
|
||||
const text: string = buildShareText(bean.title, bean.description);
|
||||
const record: systemShare.SharedRecord = {
|
||||
utd: utd.UniformDataType.PLAIN_TEXT, content: text !== '' ? text : ' ',
|
||||
};
|
||||
this.showSystemShare(uiCtx, record);
|
||||
}
|
||||
|
||||
private systemImage(uiCtx: common.UIAbilityContext, filePath: string, bean: SharetypeBean): void {
|
||||
const typeId: string =
|
||||
utd.getUniformDataTypeByFilenameExtension(this.extOf(filePath), utd.UniformDataType.IMAGE);
|
||||
|
||||
Reference in New Issue
Block a user