1

我正在尝试为我的颤振应用程序实现社交媒体集成，部署到移动设备和网络。使用share 包的移动实现工作得很好，但由于 web 有点新，我决定只使用基本的 html 和 js api 来处理喜欢和分享按钮之类的东西，就像你在这里找到的facebook，twitter，和linkedin。

当从 html 作为 src 静态馈送时，按钮可以正常工作。如果我有某种服务器端模板可供我使用，例如 thymeleaf 或 Django 模板，我可能会走这条路线来创建参数化的 HtmlElementView 小部件（例如，使用可共享 URL 的模板文字），但我仅限于 dart:html包裹。

这在理论上很好，但在实践中，无论出于何种原因，我都无法及时加载必要的社交媒体 js api，如下所示，以便 DOM 识别它们并正确呈现，无论我是在 dart 代码中准备它们还是将它们粘贴在标题中或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