Vue.js 中的 Messenger Extensions 并将其数据用作全局变量

Question

我正在尝试将 Messenger's Extension SDK 与 Vue.js 一起使用。我对 Vue.js 比较陌生，在偶然发现 Vue 之前没有使用过任何 js 框架。

我考虑过（并尝试过）将 SDK 代码（参见上面的 link，第 2 步）添加到我的 App.vue 站点，该站点包含我的 router-view。我还尝试将脚本包含到我的 index.html 中，它包含我添加 Vue 的 div。

目标是能够将 SDK 包含到我的所有页面，最终在 SDK 加载完成时触发回调（参见上面的 link，第 3 步），最后能够在我的所有视图上使用 SDK 功能（例如，也是最重要的，MessengerExtensions.getContext(app_id, success, error)）。

我怎样才能完成这项工作？谢谢，

Answer 1

所以基于 https://developers.facebook.com/docs/messenger-platform/webview/extensions and https://router.vuejs.org/en/essentials/getting-started.html 你可能会做这样的事情：

const app = new Vue({
  router,
  created() {
    return (function(d, s, id){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'Messenger'));
  }
}).$mount('#app')

然后在你的 App.vue:

export default {
  mounted() {
    window.extAsyncInit = function() {
      // the Messenger Extensions JS SDK is done loading 
    };
  }
}

Vue.js 中的 Messenger Extensions 并将其数据用作全局变量

Messenger Extensions in Vue.js and using its data as a global variable

javascript

vue.js

vuejs2

facebook-messenger-bot