1

モバイルとウェブの両方にデプロイして、フラッター アプリケーションにソーシャル メディア統合を実装しようとしています。shareパッケージを使用したモバイル実装は問題なく動作していますが、web は少し新しいため、基本的な html および js API を使用することにしました。たとえば、facebook、twitter、とリンクイン。

html から src として静的に供給されると、ボタンは正常に動作します。thymeleaf や Django テンプレートなどのサーバー側のテンプレートを自由に使用できる場合は、その方法でパラメーター化された HtmlElementView ウィジェットを作成することもできますが (たとえば、共有可能な URL のテンプレート リテラルを使用して)、代わりに dart:html に限定されます。パッケージ。

これは理論的には問題ありませんが、実際には何らかの理由で、DOM がそれらを認識して正しくレンダリングするのに間に合うように、次のような必要なソーシャル メディア js API を読み込むことができません。 index.html ファイルの本体。

Dart でペイロードを準備するには、次のようにします。

static final _FB_API_HEADER1 = DivElement()
    ..id = "fb-root";

  static final _FB_API_HEADER2 =
    ScriptElement()
    ..async = null
    ..defer = null
    ..crossOrigin = "anonymous"
    ..nonce = "plTxQNq6"
    ..src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0";

  static Element _createFacebookHeader() {
    Element _temp = DivElement();
    _temp.append(_FB_API_HEADER1);
    _temp.append(_FB_API_HEADER2);
    return _temp;
  }

  static get FB_API_HEADER => _createFacebookHeader();

static Element createFacebookButton(String linkToLikeAndShare) {
    return DivElement()
      ..appendHtml('<div class="fb-like" data-href="$linkToLikeAndShare" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>',
          validator: NodeValidatorBuilder()
            ..allowElement('div', attributes: ['data-share','data-size','data-action','data-layout','data-width','data-href'])
            ..allowHtml5(uriPolicy: ItemUrlPolicy())
            ..allowNavigation(ItemUrlPolicy())
            ..allowImages(ItemUrlPolicy()) );
  }

次に、次のようにビューにプッシュします。

DivElement _finalView = DivElement();
_finalView.append(SocialMediaApis.FB_API_HEADER);
_finalView.append(SocialMediaApis.createFacebookButton("mysite.com"));

// ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      'LikeAndShare',
      (int viewId) => _finalView,
    );

次のように、ウィジェットとして構築されます。

@override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          SizedBox(
            height: 500,
            width: 500,
            child: HtmlElementView(
              viewType: 'LikeAndShare',
            ),
          )
        ],
      ),
    );
  }
}

これを乗り越える方法を知っている人はいますか？おそらく、いくつかのプリロードメカニズムですか？

コンテキストについては、互換性のために Flutter バージョン1.23.0-18.1.preを使用しています。役立つコードを喜んで共有します。

どうぞよろしくお願いいたします。

4

0 に答える 0