如何将 ngCordova s​​qlite 服务和 Cordova-SQLitePlugin 与 Ionic 框架一起使用？

Posted 2023-02-19

【中文标题】如何将 ngCordova s​​qlite 服务和 Cordova-SQLitePlugin 与 Ionic 框架一起使用？

【英文标题】：How do I use the ngCordova sqlite service and the Cordova-SQLitePlugin with Ionic Framework?

【发布时间】：2014-11-23 22:02:00

【问题描述】：

我一直在尝试将 sqlite 合并到一个简单的 Ionic 应用程序中，这是我一直遵循的过程：

 ionic start myApp sidemenu

然后我安装 sqlite 插件：

ionic plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

和 ngCordova

bower install ngCordova

这给了我以下选项： 找不到适合 Angular 的版本，请选择一个： 1) angular#1.2.0 解析为 1.2.0 并且是 ngCordova#0.1.4-alpha 所要求的 2) angular#>= 1.0.8 解析为 1.2.0 并且 angular-ui-router#0.2.10 需要 3) angular#1.2.25 解析为 1.2.25，是 angular-animate#1.2.25、angular-sanitize#1.2.25 所要求的 4) angular#~1.2.17 解析为 1.2.25 并且是 ionic#1.0.0-beta.13 要求的前缀选择！将其持久化到 bower.json

我选择了选项 3) 我将脚本包含在文件中，如下所示：

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

然后我在搜索视图中添加了一个控制器：

.controller('SearchCtrl', function ($scope, $cordovaSQLite)
  console.log('Test');
   var db = $cordovaSQLite.openDB( name: "my.db" );

        // for opening a background db:
        var db = $cordovaSQLite.openDB( name: "my.db", bgType: 1 );

        $scope.execute = function() 
          console.log('Test');
          var query = "INSERT INTO test_table (data, data_num) VALUES (?,?)";
          $cordovaSQLite.execute(db, query, ["test", 100]).then(function(res) 
            console.log("insertId: " + res.insertId);
          , function (err) 
            console.error(err);
          );
     ;
)

这导致了错误：

> TypeError: Cannot read property 'openDatabase' of undefined
>     at Object.openDB  (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:2467:36) 

接下来我尝试通过以下方式手动包含 SQLitePlugin.js： 从 plugins/com.brodysoft.sqlitePlugin/www 复制到主 www/ 并将其添加到索引中。 html页面

我尝试在一切之前包括：

 <script src="SQLitePlugin.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

我收到错误 ReferenceError: cordova is not defined 所以我然后尝试在 cordova.js 脚本之后包含它，但仍然得到同样的错误

非常感谢您的帮助 如果相关，这些是我正在使用的 Cordova 和 ionic 的当前版本：

ionic --version  1.2.5
cordova --version 3.5.0-0.2.7

这是生成的 bower.json

  "name": "myApp",
  "private": "true",
  "devDependencies": 
    "ionic": "driftyco/ionic-bower#1.0.0-beta.13"
  

还有我的 package.json：

  "name": "myapp",
  "version": "1.0.0",
  "description": "myApp: An Ionic project",
  "dependencies": 
    "gulp": "^3.5.6",
    "gulp-sass": "^0.7.1",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0"
  ,
  "devDependencies": 
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  

【参考方案1】：

原来这是因为 Cordova 是特定于平台的，并且在您运行 ionic serve 时不起作用

当我构建和部署时，我能够在 android 设备上运行相同的代码而没有问题。

更新

你可以用window替换cordova插件来使用websql数据库 所以你可以使用window.openDatabase()而不是sqlitePlugin.openDatabase()

【讨论】：

奇数。 WebSQL 在 Chrome 中本机运行 - 您应该能够在桌面上对其进行测试。

您可以将window.openDatabase 与ionic serve 和window.sqlitePlugin.openDatabase 一起用于平台。

谢谢，其实我前几天才发现自己，我会更新我的答案来显示这个

你真的在插件文件中替换了吗？这不应该与浏览器/设备一起使用吗？

不要只使用窗口而不是插件在桌面上进行测试，例如在我的控制器中，我会将var db = $cordovaSQLite.openDB( name: "my.db" ); 替换为var db = window.openDB( name: "my.db" );

【参考方案2】：

如果有人尝试在浏览器中运行它时仍然遇到错误，请尝试以下操作：

if (window.cordova) 
      db = $cordovaSQLite.openDB( name: "my.db" ); //device
    else
      db = window.openDatabase("my.db", '1', 'my', 1024 * 1024 * 100); // browser
    

【讨论】：

这是医生吩咐的，非常感谢！

关于表示数据库大小的最后一个参数。 1024 * 1024 * 100 是什么意思？

【参考方案3】：

在 Ionic 2 中，我使用以下代码。

constructor(platform: Platform) 
platform.ready().then(() => 



  if(platform.is("cordova"))
    //USE Device
  
  else 
    //USE Browser
  



  StatusBar.styleDefault();
);

【参考方案4】：

对于更高的 Ionic 版本（Ionic 2+）：

使用 Ionic 处理持久存储的最佳方法是使用 ionic-storage。

Ionic Storage 是由 ionic 团队创建和维护的一个包，用于从每个浏览器或平台的具体细节中抽象出开发，并自动使用可用的最佳存储解决方案。

1.安装依赖项

对于 SQLite，您需要先安装 Angular 和 Cordova 的依赖项：

npm install @ionic/storage --save

和

cordova plugin add cordova-sqlite-storage --save

然后在 src/app/app.module.ts 中编辑您的 NgModule 声明，将 IonicStorageModule 添加为导入：

import  IonicStorageModule  from '@ionic/storage';

@NgModule(
  declarations: [...],
  imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(
      name: '__mydb',
      driverOrder: ['indexeddb', 'sqlite', 'websql'],
    )
  ],
  bootstrap: [...],
  entryComponents: [...],
  providers: [...],
)
export class AppModule  

2。将 Storage 注入到你的组件中

import  Component  from '@angular/core';
import  Storage  from '@ionic/storage';

@Component(
  selector: 'page-home',
  templateUrl: 'home.html'
)
export class HomePage 
  constructor(public storage: Storage) 

3。在 SQLite 中存储数据

每当您访问存储时，请确保始终将您的代码包装在以下内容中：

storage.ready().then(() =>  /* code here safely */);

3.1 保存键值对

storage.ready().then(() => 
    storage.set('some key', 'some value');
);

3.2 检索值

storage.ready().then(() => 
  storage.get('age').then((val: string) => 
      console.log('Your age is', val);
  );
);

3.3 删除键值对

storage.ready().then(() => 
    storage.remove('key').then((key: string) =>  /* do something after deletion */)
);