Question

我想用Vue制作一个Facebook Instant游戏。但是，facebook的js文件只有一个CDN。

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

如果将CDN导入索引文件中，我仍然无法在组件中使用它。 Vue显示未定义的错误。

我试图在body标签之后将其导入index.js中，并将其初始化为window变量。但这似乎也不起作用。

<script>
  window.onload = function() {
    window._FBInstant = FBInstant;
    FBInstant.initializeAsync()
    .then(function() {        
      // Start loading game assets here
      FBInstant.startGameAsync().then(function() {
        startGame();          
      });
    });
  }
  </script>

Answer 1

您可以将FB实例存储在已创建的钩子或其他任何钩子中的数据属性上

data: () => ({ FBInstance: null}),
created() {
  this.FBInstance = window._FBInstant
}

如果您想在全球范围内使用它，可以在mixin中做同样的事情

Vue.mixin({
  data: () => ({ FBInstance: null}),
  created() {
      this.FBInstance = window._FBInstant
  }
})

Answer 2

在<body>标签之后插入Facebook Instant Game CDN脚本标签。

请勿使用CDN或直接<script>包含项将vuejs导入项目中。

下载vuejs生产版本，并将其保存在项目文件夹中，并在网络托管中上传期间将其与zip中的其他游戏文件一起压缩（打包）。

在fb cdn之后，请包含文件中的<script src="js/vue.js"></script>。

这样，您可以在即时游戏中使用facebook sdk和vuejs。

在Vue项目中使用Facebook Instant Games CDN-Webpack

2 个答案: