Mobile Platform as a Service:Compartilhamento

Este recurso é compatível com a versão de base 10.1.60 e posteriores. O cliente deve implementar o compartilhamento no código nativo.

onShareAppMessage

Defina a função onShareAppMessage em um objeto Page para configurar as informações de compartilhamento da página.

• Por padrão, o botão Share aparece no menu do canto superior direito de cada página. Sobrescreva a função onShareAppMessage para personalizar o conteúdo compartilhado.

• O sistema chama essa função quando o usuário clica no botão Share.

• Esse manipulador de eventos deve retornar um Object para personalizar o conteúdo compartilhado.

Parâmetros de entrada

Valor de retorno

Exemplo de código

Page({
  onShareAppMessage() {
    return {
      title: 'Miniapp Sample',
      desc: 'Official miniapp sample demo, showing supported API capabilities and components.',
      path: 'page/component/component-pages/view/view?param=123'
    };
  },
});

Iniciar compartilhamento a partir de uma página

Defina a propriedade open-type="share" no componente de botão. Ao clicar no botão, o usuário aciona o evento Page.onShareAppMessage() e abre o painel de compartilhamento. Se a função onShareAppMessage não estiver definida para a página atual, clicar no botão não surtirá efeito. Para mais informações, consulte button.

App.onShareAppMessage

Configure um onShareAppMessage global no construtor App(Object). Se as configurações de compartilhamento no nível da página não estiverem definidas, o sistema usará as configurações globais ao invocar o compartilhamento.

my.hideShareMenu(Object)

Oculta o botão de compartilhamento.

Parâmetros de entrada

Exemplo de código

my.hideShareMenu();

Implementação de extensão no lado do cliente

O framework de miniapp não fornece compartilhamento nativo devido à alta personalização necessária. Portanto, implemente esse recurso.

Implementação

1. Ao iniciar o compartilhamento no miniapp, o sistema chama a API JavaScript (JSAPI) shareTinyAppMsg. Essa API transmite os parâmetros do objeto retornado pelo método onShareAppMessage em JavaScript para o cliente.

2. Implemente um plugin JS personalizado no cliente para lidar com o evento shareTinyAppMsg. Para mais informações sobre como implementar um plugin JS, consulte JSAPI personalizada para Android e JSAPI personalizada para iOS.

Exemplo de código Android

Nota: O botão de compartilhamento no menu de opções do canto superior direito do miniapp fica oculto por padrão. Para exibi-lo, configure o contêiner. Para mais informações, consulte Configuração do contêiner.

• O exemplo de código a seguir mostra como iniciar o compartilhamento no miniapp:

  Page({
  data: {
    height: 0,
    title: 'Thank you for trying it out!\\nWe welcome any feedback'
  },
  onLoad() {
    const { windowHeight, windowWidth, pixelRatio } = my.getSystemInfoSync();
    this.setData({
      height: windowHeight * 750 / windowWidth
    })
  },
  onShareAppMessage() {
    return {
      title: 'Result Page',
      desc: 'Successfully retrieved the result',
      myprop: 'hello', // Custom parameter. If the fields in the document do not meet your needs, you can add more as required. They will be passed through to the client.
      path: 'pages/result/result'
    }
  }
  });

• O exemplo de código a seguir mostra o plugin H5 do lado do cliente:

    package com.mpaas.demo.nebula;
  
    import com.alibaba.fastjson.JSONObject;
    import com.alipay.mobile.antui.dialog.AUNoticeDialog;
    import com.alipay.mobile.h5container.api.H5BridgeContext;
    import com.alipay.mobile.h5container.api.H5Event;
    import com.alipay.mobile.h5container.api.H5EventFilter;
    import com.alipay.mobile.h5container.api.H5SimplePlugin;
  
    public class ShareTinyMsgPlugin extends H5SimplePlugin {
  
        private static final String ACTION_SHARE = "shareTinyAppMsg";
  
        @Override
        public void onPrepare(H5EventFilter filter) {
            super.onPrepare(filter);
            filter.addAction(ACTION_SHARE);
        }
  
        @Override
        public boolean handleEvent(H5Event event, final H5BridgeContext context) {
            String action = event.getAction();
            if (ACTION_SHARE.equals(action)) {
                JSONObject param = event.getParam();
                String title = param.getString("title");
                String desc = param.getString("desc");
                String myprop = param.getString("myprop");
                String path = param.getString("page");
                String appId = event.getH5page().getParams().getString("appId");
  
                // You can call the sharing component here to implement subsequent features.
                String message = "App ID: " + appId + "\n"
                        + "title: " + title + "\n"
                        + "desc: " + desc + "\n"
                        + "myprop: " + myprop + "\n"
                        + "path: " + path + "\n";
  
                AUNoticeDialog dialog = new AUNoticeDialog(event.getActivity(),
                        "Sharing Result", message, "Share Successful", "Share Failed");
                dialog.setPositiveListener(new AUNoticeDialog.OnClickPositiveListener() {
                    @Override
                    public void onClick() {
                        JSONObject result = new JSONObject();
                        result.put("success", true);
                        context.sendBridgeResult(result);
                    }
                });
                dialog.setNegativeListener(new AUNoticeDialog.OnClickNegativeListener() {
                    @Override
                    public void onClick() {
                        context.sendError(11, "Share failed");
                    }
                });
                dialog.show();
                //
                return true;
            }
            return false;
        }
    }

Exemplo de código iOS

• O botão de compartilhamento no canto superior direito do miniapp fica oculto por padrão. Para exibi-lo, chame a seguinte interface durante a inicialização do contêiner:

  Nota: Importe manualmente o arquivo de cabeçalho correspondente: #import <TinyappService/TASUtils.h>.

    - (void)application:(UIApplication *)application afterDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  
        ...
  
        [TASUtils sharedInstance].shoulShowSettingMenu = YES;
  
        ...
    }

• Crie uma implementação personalizada da JSAPI shareTinyAppMsg para aceitar parâmetros da página do miniapp:

• Na classe de implementação MPJsApi4ShareTinyAppMsg, obtenha os parâmetros de compartilhamento da página do miniapp e processe a lógica de negócios. O código a seguir fornece um exemplo:

    #import <NebulaPoseidon/NebulaPoseidon.h>
    @interface MPJsApi4ShareTinyAppMsg : PSDJsApiHandler
  
    @end
  
    #import "MPJsApi4ShareTinyAppMsg.h"
    #import <MessageUI/MessageUI.h>      
  
    @interface MPJsApi4ShareTinyAppMsg()<APSKLaunchpadDelegate>
  
    @property(nonatomic, strong) NSString *shareUrlString;
  
    @end
  
    @implementation MPJsApi4ShareTinyAppMsg
  
    - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback
    {
        [super handler:data context:context callback:callback];
  
        NSString * appId = context.currentSession.createParam.expandParams[@"appId"];
        NSString * page = data[@"page"]?:@"";
        NSString * title = data[@"title"]?:@"";
        NSString * desc = data[@"desc"]?:@"";
  
        // Concatenate the sharing content and call the sharing SDK.
        self.shareUrlString = [NSString stringWithFormat:@"http://appId=%@&page=%@&title=%@&desc=desc", appId, page, title, desc];
        [self openPannel];
    }
  
    - (void)openPannel {
        NSArray *channelArr = @[kAPSKChannelWeibo, kAPSKChannelWeixin, kAPSKChannelWeixinTimeLine, kAPSKChannelSMS, kAPSKChannelQQ, kAPSKChannelQQZone, kAPSKChannelDingTalkSession, kAPSKChannelALPContact, kAPSKChannelALPTimeLine];
        APSKLaunchpad *launchPad = [[APSKLaunchpad alloc] initWithChannels:channelArr sort:NO];
        launchPad.tag = 1000;
        launchPad.delegate = self;
  
        [launchPad showForView:[[UIApplication sharedApplication] keyWindow] animated:YES];
    }
  
    #pragma mark - APSKLaunchpadDelegate
    - (void)sharingLaunchpad:(APSKLaunchpad *)launchpad didSelectChannel:(NSString *)channelName {
        [self shareWithChannel:channelName tag:launchpad.tag];
        [launchpad dismissAnimated:YES];
    }
  
    - (void)shareWithChannel:(NSString *)channelName tag:(NSInteger)tag{
        APSKMessage *message = [[APSKMessage alloc] init];
        message.contentType = @"url"; // The type can be "text", "image", or "url".
        message.content = [NSURL URLWithString:self.shareUrlString];
        message.icon = [UIImage imageNamed:@"MPShareKit.bundle/Icon_Laiwang@2x.png"];
        message.title = @"This is the web page title";
        message.desc = @"This is the description";
        APSKClient *client = [[APSKClient alloc] init];
        client.disableToastDisplay = YES;
  
        [client shareMessage:message toChannel:channelName completionBlock:^(NSError *error, NSDictionary *userInfo) {
            if(!error) { // Success
                [AUToast presentToastWithin:[[UIApplication sharedApplication] keyWindow]
                                   withIcon:AUToastIconSuccess
                                       text:@"Share successful"
                                   duration:2
                                     logTag:@"demo"];
            } else { // Failure
                NSString *desc = error.localizedFailureReason.length > 0 ? error.localizedFailureReason : @"Share failed";
                [AUToast presentToastWithin:[[UIApplication sharedApplication] keyWindow]
                                   withIcon:AUToastIconNone
                                       text:desc
                                   duration:2
                                     logTag:@"demo"];
                NSLog(@"error = %@", error);
            }
        }];
    }
  
    @end