时间戳

首页 > 解决方案 > 如何将 Cordova 插件暴露给 Svelte 应用程序？

cordova - 如何将 Cordova 插件暴露给 Svelte 应用程序？

问题描述

我有里面有苗条的科尔多瓦应用程序，但是我在将科尔多瓦.插件从科尔多瓦暴露到苗条时遇到问题

这是我尝试过的 index.js

const app = {


// Application Constructor
  initialize: function () {
    this.bindEvents();
  },
  bindEvents: function () {
    document.addEventListener("deviceready", this.onDeviceReady, false);
    document.addEventListener("offline", this.onDeviceOffline, false);
  },
  onDeviceOffline: function () {
    app.receivedEvent("No Internet");
    PHONEGAP.isOffline = true;
  },
  onDeviceReady: function () {
    app.receivedEvent("deviceready");
    console.log(cordova.plugins); // this return object plugins
    if (cordova && cordova.plugins) {
      PHONEGAP.plugins = cordova.plugins;
      PHONEGAP.platform = cordova.platformId;
    }
},
  cordovaObject: function () {
    return cordova;
  },
  // Update DOM on a Received Event
  receivedEvent: function (id) {
    console.log("Received Event: " + id);
  },
};

索引.html

<script type="text/javascript" src="cordova.js"></script>
<script>
  let _showSplash = localStorage.getItem('init');
  let _lNotif = localStorage.getItem("notification");
  let _lUnreadMessage = localStorage.getItem("messages_unread");

  if(_showSplash){
    if(parseInt(_showSplash) == 0){
      localStorage.removeItem('init');
    }
  }else{
    localStorage.setItem('init', 1);
  }
</script>

<script>
var PHONEGAP = {
        plugins: false,
        platform: false,
        isOffline: false,
        messaging: false,
        notification: _lNotif ? JSON.parse(localStorage.getItem("notification")) : []
};
</script>
<script type="text/javascript" src="js/index.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js"></script>
<script type="text/javascript">
    
    app.initialize();
    console.log(cordova.plugins); //this return **undefined**


  
</script>

<script src="js/main.bundle.js"></script>

我在这里是cordova的新手，所以我不明白为什么我不能在我的svelte应用程序（main.bundle.js）中调用cordova.plugins。

我还尝试通过调用在 svelte 应用程序中调用 cordova 对象console.log(cordova)，它可以工作！我检查了控制台，它里面有插件对象但是当我调用console.log(cordova.plugins)它时返回未定义。

cordova version 6.0.0
platformVesion 6.0.0
platformId browser (it has same error too with android platform)
phonegap cli version 9.0.0

的结果phonegap plugins

cordova-plugin-androidx 2.0.0 "cordova-plugin-androidx"
cordova-plugin-androidx-adapter 1.1.1 "cordova-plugin-androidx-adapter"
cordova-plugin-battery-status 1.2.5 "Battery"
cordova-plugin-camera 2.4.1 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 1.1.7 "Device"
cordova-plugin-dialogs 1.3.4 "Notification"
cordova-plugin-file 4.3.3 "File"
cordova-plugin-firebase-analytics 4.3.1 "FirebaseAnalyticsPlugin"
cordova-plugin-firebase-messaging 4.4.2 "FirebaseMessagingPlugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-globalization 1.0.9 "Globalization"
cordova-plugin-inappbrowser 1.7.2 "InAppBrowser"
cordova-plugin-media-capture 1.4.3 "Capture"
cordova-plugin-network-information 1.3.4 "Network Information"
cordova-plugin-vibration 2.1.6 "Vibration"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-support-android-plugin 1.0.2 "cordova-support-android-plugin"
cordova-support-google-services 1.4.1 "cordova-support-google-services"

的结果console.log(cordova)

 {version: "6.0.0", platformVersion: "6.0.0", platformId: "browser", define: ƒ, require: ƒ, …}
    InAppBrowser: {open: ƒ}
    addConstructor: ƒ (func)
    addDocumentEventHandler: ƒ (event)
    addStickyDocumentEventHandler: ƒ (event)
    addWindowEventHandler: ƒ (event)
    callbackError: ƒ (callbackId, args)
    callbackFromNative: ƒ (callbackId, isSuccess, status, args, keepCallback)
    callbackId: 1855496235
    callbackStatus: {NO_RESULT: 0, OK: 1, CLASS_NOT_FOUND_EXCEPTION: 2, ILLEGAL_ACCESS_EXCEPTION: 3, INSTANTIATION_EXCEPTION: 4, …}
    callbackSuccess: ƒ (callbackId, args)
    callbacks: {}
    commandProxy: {add: ƒ, remove: ƒ, get: ƒ}
    define: ƒ (id, factory)
    exec: ƒ (success, fail, service, action, args)
    file: {applicationDirectory: "http://localhost:3000/", applicationStorageDirectory: null, dataDirectory: "filesystem:file:///persistent/", cacheDirectory: "filesystem:file:///temporary/", externalApplicationStorageDirectory: null, …}
    fireDocumentEvent: ƒ (type, data, bNoDetach)
    fireWindowEvent: ƒ (type, data)
    getOriginalHandlers: ƒ ()
    platformId: "browser"
    platformVersion: "6.0.0"
    plugins: {firebase: {…}}
    removeDocumentEventHandler: ƒ (event)
    removeWindowEventHandler: ƒ (event)
    require: ƒ (id)
    version: "6.0.0"
    __proto__: Object

编辑 这里的问题是当我调用console.log(cordova)结果对象时，它里面有插件对象，但是当我调用console.log(cordova.plugins)它时返回未定义（在主 index.html 文件中调用全部）。

标签： cordovasvelte

解决方案

为了使 svelte 与cordova（cordova.plugins）一起工作，我必须将 svelte 初始化代码包装在里面onDeviceReady（deviceready 事件）

main.js（在 svelte src 内）

import "./main.pcss";
import App from './App.svelte';

function onDeviceReady(){
    new App({
        target: document.body,
        hydrate: true
    });
}
document.addEventListener('deviceready', onDeviceReady, false);

结果，我终于可以在我的苗条应用程序中访问科尔多瓦插件了

App.svelte

import { cordovaObject } from "./store.js";
.....
console.log(cordova.plugins); //just for testing, finally it works!
cordovaObject.set(cordova); //save cordova object inside store
.....

之后我可以将cordova对象保存在商店中，然后我可以使用我想要的所有插件。当然，我不认为这是一个好的或坏的解决方案，但至少它现在工作。

推荐阅读