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
|
@Component
|
||||||
export struct ShareGuideDialog {
|
export struct ShareGuideDialog {
|
||||||
/** 渠道:'wechat' | 'qq' | 'douyin'。 */
|
/** 渠道:'wechat' | 'qq' | 'douyin'。 */
|
||||||
platform: string = 'wechat';
|
platform: string = 'wechat';
|
||||||
/** 内容类型:'text' | 'image'。 */
|
/** 动作回调:'open'(立即打开App)| 'cancel'(稍后分享/点空白)。 */
|
||||||
contentKind: string = 'text';
|
|
||||||
/** 动作回调:'open' | 'system' | 'cancel'。 */
|
|
||||||
onPick: (action: string) => void = () => { };
|
onPick: (action: string) => void = () => { };
|
||||||
|
|
||||||
private appName(): string {
|
private appName(): string {
|
||||||
@@ -22,75 +20,108 @@ export struct ShareGuideDialog {
|
|||||||
return '微信';
|
return '微信';
|
||||||
}
|
}
|
||||||
|
|
||||||
private appIcon(): Resource {
|
/** 渠道主题色(标题序号徽标 + 打开按钮)。 */
|
||||||
|
private appColor(): string {
|
||||||
if (this.platform === 'qq') {
|
if (this.platform === 'qq') {
|
||||||
return $r('app.media.share_qq');
|
return '#12B7F5';
|
||||||
}
|
}
|
||||||
if (this.platform === 'douyin') {
|
if (this.platform === 'douyin') {
|
||||||
return $r('app.media.share_douyin');
|
return '#FE2C55';
|
||||||
}
|
}
|
||||||
return $r('app.media.share_wechat');
|
return '#07C160';
|
||||||
}
|
}
|
||||||
|
|
||||||
private hint(): string {
|
/** 各渠道"分享到好友或群聊"分步文案(差异主要在第 1 步进入聊天的入口)。 */
|
||||||
const name: string = this.appName();
|
private steps(): string[] {
|
||||||
return this.contentKind === 'image'
|
if (this.platform === 'qq') {
|
||||||
? `图片已复制,可在${name}长按粘贴;或点下方用系统分享`
|
return ['打开QQ,进入「消息」列表', '选择好友或群聊进入聊天', '在输入框长按粘贴内容', '点击发送即可分享'];
|
||||||
: `内容已复制,请打开${name}粘贴分享`;
|
}
|
||||||
|
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() {
|
build() {
|
||||||
Column() {
|
Column() {
|
||||||
Blank()
|
|
||||||
.layoutWeight(1)
|
|
||||||
.width('100%')
|
|
||||||
.onClick(() => this.onPick('cancel'))
|
|
||||||
|
|
||||||
Column() {
|
Column() {
|
||||||
Image(this.appIcon())
|
Text(`${this.appName()}分享准备完成`)
|
||||||
.width(48)
|
.fontSize(18)
|
||||||
.height(48)
|
.fontWeight(FontWeight.Bold)
|
||||||
.objectFit(ImageFit.Contain)
|
.fontColor('#222222')
|
||||||
.margin({ top: 16 })
|
.width('100%')
|
||||||
Text(this.hint())
|
|
||||||
|
Row() {
|
||||||
|
Text('✅').fontSize(15)
|
||||||
|
Text('内容已复制到剪贴板')
|
||||||
.fontSize(14)
|
.fontSize(14)
|
||||||
.fontColor('#333333')
|
.fontColor('#333333')
|
||||||
.textAlign(TextAlign.Center)
|
.margin({ left: 6 })
|
||||||
.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'))
|
|
||||||
}
|
}
|
||||||
.width('100%')
|
.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)
|
.backgroundColor(Color.White)
|
||||||
.borderRadius({ topLeft: 16, topRight: 16 })
|
.borderRadius(16)
|
||||||
.onClick(() => { /* 消费点击,避免穿透到遮罩 */ })
|
.onClick(() => { /* 消费点击,避免穿透到遮罩 */ })
|
||||||
}
|
}
|
||||||
.width('100%')
|
.width('100%')
|
||||||
.height('100%')
|
.height('100%')
|
||||||
.backgroundColor('rgba(0,0,0,0.45)')
|
.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 顶层)。 */
|
/** 分享指引窗显隐(渠道选定后叠在 Stack 顶层)。 */
|
||||||
@State private shareGuideVisible: boolean = false;
|
@State private shareGuideVisible: boolean = false;
|
||||||
private shareGuidePlatform: string = '';
|
private shareGuidePlatform: string = '';
|
||||||
private shareGuideKind: string = '';
|
|
||||||
/** 当前指引窗的一次性回投事件名(用户选动作后 emit 回 ShareProvider)。 */
|
/** 当前指引窗的一次性回投事件名(用户选动作后 emit 回 ShareProvider)。 */
|
||||||
private shareGuideResultEvent: string = '';
|
private shareGuideResultEvent: string = '';
|
||||||
|
|
||||||
@@ -166,7 +165,6 @@ export struct BridgeGameContainer {
|
|||||||
}
|
}
|
||||||
const req = p as ShareGuideRequest;
|
const req = p as ShareGuideRequest;
|
||||||
this.shareGuidePlatform = req.platform;
|
this.shareGuidePlatform = req.platform;
|
||||||
this.shareGuideKind = req.contentKind;
|
|
||||||
this.shareGuideResultEvent = req.resultEvent;
|
this.shareGuideResultEvent = req.resultEvent;
|
||||||
this.shareGuideVisible = true;
|
this.shareGuideVisible = true;
|
||||||
}
|
}
|
||||||
@@ -431,7 +429,6 @@ export struct BridgeGameContainer {
|
|||||||
if (this.shareGuideVisible) {
|
if (this.shareGuideVisible) {
|
||||||
ShareGuideDialog({
|
ShareGuideDialog({
|
||||||
platform: this.shareGuidePlatform,
|
platform: this.shareGuidePlatform,
|
||||||
contentKind: this.shareGuideKind,
|
|
||||||
onPick: (action: string) => this.emitShareGuideResult(action),
|
onPick: (action: string) => this.emitShareGuideResult(action),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -241,13 +241,8 @@ export class ShareProvider implements CapabilityProvider {
|
|||||||
if (platform === 'wechat') {
|
if (platform === 'wechat') {
|
||||||
this.reportResult(2, reportType);
|
this.reportResult(2, reportType);
|
||||||
}
|
}
|
||||||
} else if (action === 'system') {
|
|
||||||
this.systemText(uiCtx, bean);
|
|
||||||
if (platform === 'wechat') {
|
|
||||||
this.reportResult(2, reportType);
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
// cancel
|
// 稍后分享 / 取消:仅微信回执取消。
|
||||||
if (platform === 'wechat') {
|
if (platform === 'wechat') {
|
||||||
this.reportResult(3, reportType);
|
this.reportResult(3, reportType);
|
||||||
}
|
}
|
||||||
@@ -299,14 +294,6 @@ export class ShareProvider implements CapabilityProvider {
|
|||||||
|
|
||||||
// —— 系统分享(图片可靠交付 / 文本兜底;文本不下发 url)——
|
// —— 系统分享(图片可靠交付 / 文本兜底;文本不下发 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 {
|
private systemImage(uiCtx: common.UIAbilityContext, filePath: string, bean: SharetypeBean): void {
|
||||||
const typeId: string =
|
const typeId: string =
|
||||||
utd.getUniformDataTypeByFilenameExtension(this.extOf(filePath), utd.UniformDataType.IMAGE);
|
utd.getUniformDataTypeByFilenameExtension(this.extOf(filePath), utd.UniformDataType.IMAGE);
|
||||||
|
|||||||
Reference in New Issue
Block a user