flutter - 如何在 Flutter 中为 Web 编写特定于平台的代码?
问题描述
在 Flutter 中,我们使用平台通道来调用特定于平台的 API,无论是 Android 上的 Kotlin 或 Java 代码,还是 iOS 上的 Swift 或 Objective-C 代码。
如何在颤振中实现与 web 相同的功能?如何使用 npm 包并编写一些 javascript 代码并将结果发送到颤振?这甚至可能吗?有为 Android 和 iOS 编写平台特定代码的官方文档,但我找不到任何为 web 编写平台特定代码的文档。
另外,我尝试使用js包。如果这是必须用于这种情况的一个,如何使用它?
解决方案
这就是我在 Flutter Web 上显示 Hubspot 聊天的方法。我有一个 Hubspot 的文件夹:
- 索引.html
- 脚本.js
- 样式.css
然后是带有 webview_flutter_plus 插件的 Flutter Widget:
class HubspotWebview extends StatefulWidget {
@override
_HubspotWebviewState createState() => _HubspotWebviewState();
}
class _HubspotWebviewState extends State<HubspotWebview> {
final _javascriptChannels = Set<JavascriptChannel>();
bool loading = true;
@override
void initState() {
super.initState();
_javascriptChannels.add(JavascriptChannel(
onMessageReceived: (JavascriptMessage message) {
debugPrint('message: ' + message.message);
_toggleLoading();
},
name: 'Loading'));
}
@override
Widget build(BuildContext context) {
final path = '${kIsWeb ? 'assets/' : ''}assets/hubspot_web_page/index.html';
final key = 'web_bot_key';
if (kIsWeb) {
ui.platformViewRegistry.registerViewFactory(
key,
(int viewId) => IFrameElement()
..width = '640'
..height = '360'
..src = path
..style.border = 'none'
..onLoadedData.listen((event) {
_toggleLoading();
}));
}
return Scaffold(
appBar: new AppBar(
backgroundColor: MyColors.blue_business,
title: MyText.subtitle(
getText('business_help_chat', backUpText: 'Help Chat'),
color: MyColors.white_rice,
)),
body: Stack(
children: [
kIsWeb
? HtmlElementView(viewType: key)
: WebViewPlus(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: path,
javascriptChannels: _javascriptChannels,
),
if (loading)
Center(child: CircularProgressIndicator()),
],
),
);
}
void _toggleLoading() => setState(() => loading = !loading);
}
在Flutter上的Javascript 文件Loading.postMessage('')
触发器上:toggleLoading()
function onConversationsAPIReady() {
window.hsConversationsSettings = {
inlineEmbedSelector: '#hubspot-conversations-inline-parent',
enableWidgetCookieBanner: true,
disableAttachment: true
};
window.history.pushState({}, 'bot', '?bot=true');
window.HubSpotConversations.widget.refresh({openToNewThread: true});
Loading.postMessage('');
}
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
window.hsConversationsOnReady = [onConversationsAPIReady];
}
推荐阅读
- flutter - RangeSlider 未在 Flutter 对话框中更新
- typescript - 是否有任何库或本机语法可以返回具有数组键和回调函数值的新对象?
- javascript - 如何在RouterLink中包含一个按钮,以便在按钮单击时不会发生导航
- python - Numpy 不会为点积抛出 FloatingPointError
- java - 我的 toString() 方法的代码有什么问题?
- java - 如何在 Android 中取消 Firebase 实时数据库正在进行的写入或删除操作
- linux-kernel - Linux 内核 out-of-tree 模块,安装 uapi 标头问题
- flutter - 使用浏览器打开网址并进入隐身模式
- python - o_datetime 创建新列而不是更改现有列
- node.js - Heroku 部署不工作,说期望另一个键值对