在Vue项目中使用Facebook Instant Games CDN - Webpack
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Vue项目中使用Facebook Instant Games CDN - Webpack相关的知识，希望对你有一定的参考价值。
我想用Vue制作Facebook即时游戏。但Facebook只有一个cdn的js文件。
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
如果我在索引文件中导入cdn，我仍然无法在组件中使用它。 Vue显示未定义的错误。
我试着在body标签之后将它导入到body.js并将其初始化为窗口变量。但这似乎也不起作用。
<script>
window.onload = function() {
window._FBInstant = FBInstant;
FBInstant.initializeAsync()
.then(function() {
// Start loading game assets here
FBInstant.startGameAsync().then(function() {
startGame();
});
});
}
</script>
您可以将FB实例存储在已创建或任何其他挂钩中的数据属性上
data: () => ({ FBInstance: null}),
created() {
this.FBInstance = window._FBInstant
}
如果你想在全局使用它，你可以在mixin中做同样的技巧
Vue.mixin({
data: () => ({ FBInstance: null}),
created() {
this.FBInstance = window._FBInstant
}
})
在<body>标记之后插入Facebook Instant Game CDN脚本标记。
不要使用cdn或直接<script> include来导入项目中的vuejs。
下载vuejs生产版本并将其保存在项目文件夹中，并在上传到Web托管期间将其与zip中的其他游戏文件一起压缩（捆绑）。
在fb cdn之后，从文件中包含<script src="js/vue.js"></script>。
这样你就可以在即时游戏中使用facebook sdk和vuejs。
以上是关于在Vue项目中使用Facebook Instant Games CDN - Webpack的主要内容，如果未能解决你的问题，请参考以下文章
Facebook Instant Articles PHP SDK 调试行
如何访问和传递参数到 Android Instant App 的模块
如何访问和传递参数到 Android Instant App 的模块
angularjs国际化多语言，angular-translate教程详解，$translate.instant()为什么不生效