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

Question

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

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

目标是能够将 SDK 包含到我的所有页面，最终在 SDK 加载完成时触发回调(参见上面的链接，第 3 步)，最后能够在我所有的观点(例如，最重要的是，MessengerExtensions.getContext(app_id, success, error))。

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

Answer 1

所以基于https://developers.facebook.com/docs/messenger-platform/webview/extensions和 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 
    };
  }
}