cordova + vue 应用

cordova + vue 快速上手详细教程

weixin_45723246

3112人浏览 · 2022-01-04 10:39:39

weixin_45723246 · 2022-01-04 10:39:39 发布

cordova + vue 应用

一，创建一个cordova项目：

//第一步
cordova create myApp1 org.apache.cordova.myApp myApp2

//第二步
cd myApp1

//第三步 ———— 来生成Android平台的cordova库
cordova platform add android   

//此时cordova项目创建完毕

二，创建一个vue脚手架项目：

为了方便，不需要每次编译都拷贝文件，可直接在cordova项目根目录中创建vue项目。

第一步：vue create myapp创建vue项目
第二步：修改vue项目下的vue.config.js文件，修改如下：

const path = require('path');
module.exports = {
    publicPath: '',
    // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录 Default: 'dist'
    // Node.js 中， __dirname 总是指向被执行js 文件的绝对路径
    outputDir: path.resolve(__dirname, '../www'),
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。Default: 'index.html'
    indexPath: 'index.html',
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 Default: ''
    assetsDir: '',
    lintOnSave:false
}

第三步：在public文件夹下的index.html文件的body中引入cordova.js文件

可以监听设备启动(deviceready)之类的事件等

  <body>
    <script src="cordova.js"></script>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

监听设备启动

document.addEventListener(
  "deviceready",
  function () {
    alert("deviceready");
    openDatabase();
  },
  false
);

三，运行环境

添加平台
3.1 在安卓上运行

cordova platform add android --save  //创建安卓版本

3.2 在浏览器环境运行

cordova platform add browser  --save //创建浏览器文件

四，打包

1. 如果vue项目中修改或者添加了代码需要build到外层cordova项目的www文件中，执行命令:(要cd到vue项目中执行)

npm run build

2. 如果需要打包android的apk可执行下面命令

cordova build android

3. 如果不需要打apk包，只要执行下面命令就可以项目运行在手机中。（主要手机要用数据线和电脑连接并开启usb调试的功能）

cordova run android

五，在安卓端建立数据表

调用SQLite需要使用cordova的插件cordova-sqlite-storage，下载方法为在所建的project目录下打开cmd，输入cordova plugin add cordova-sqlite-storage回车

创建数据库示例

export function openDatabase(){
	  db = window.sqlitePlugin.openDatabase({
    name: 'my1.db',
    location: 'default',
    androidDatabaseImplementation: 2
  },
                                        
  //在浏览器端创建数据库                                
  //db = window.openDatabase('my', '', 'browser test database', -1,
                                        
    function callBack(db) {
      db.transaction(function (tx) {
        //备件照片记录表
        tx.executeSql(`CREATE TABLE IF NOT EXISTS t_Spare_Part_Photo_Record(
               ID INTEGER PRIMARY KEY   autoincrement,
               Item_Code            TEXT,
               TakePhoto_Date       TEXT,
               Location             TEXT,
               Operator             TEXT,
               PhotoData            TEXT,
               Syn_Status           TEXT
             )`);

        //故障记录表
        tx.executeSql(`CREATE TABLE IF NOT EXISTS t_Equipment_Fault_Record1(
              ID INTEGER PRIMARY KEY   autoincrement,
              Equipment_Code            TEXT,
              Fault_Record              TEXT,
              Fault_Datetime            TEXT
            )`);

      },
        function (err) {
          console.log(err, 'err-all')
        },
        function () {
          console.log('success-all')
        });
    });
}
}

关闭数据库示例

export function closeDatabase() {
  db.close(successcb, errorcb);
  function successcb() {
    alert('数据库关闭成功')
  };
  function errorcb() {
    alert('数据库关闭失败')
  }
}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^