什么是 cordova

cordova 是由 Apache 基金会支持的，使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架。其支持调用手机系统（Android、IOS、Windows phone）原生 API，它可以将你写的 Web 程序包裹进原生的 APP 壳中，也就是我们常说的 Hybrid APP （混合应用）。本文是一个前端开发者如何从 0 开始结合 Vue 来构建一个简单的 APP

1. 安装cordova

npm install -g cordova

2. 创建 cordova 程序

cordova create hello-cordova

项目结构图如下
重点关注 www 和 platforms 目录

• vue项目打包好的HTML/CSS/JS 代码 放在www文件夹中
• platforms是用来存放我们为相应的系统平台打包的运行源码，它现在是空的，我们依次执行以下命令来添加相应的平台

cordova platform add android --save

cordova platform add ios --save

cordova platform add browser --save

cordova platform   // 可查看添加的全部平台
cordova run < platform > // 运行相应平台的代码
cordova run browser // 在浏览器中运行项目
...

• 如果想要运行在其他平台，需要配置相应的开发环境

  vue+cordova移动端Android开发环境配置

cordova run android // 运行项目
cordova build android  // 运行项目apk
打包成功之后的安装包可以在 "platforms → android → app → build → outputs → apk → debug" 下面找到。

如何配置vue项目

vue项目可以放在cordova项目里，不过悉听尊便

• 接下来是配置打包文件

目的是将 Vue 项目的打包目录设置为我们 cordova 项目的 www 目录之下

• 监听原生返回事
  1、在main.js中写入

// 打包APP配置，引入cordova.js  监听返回原生事件
if (window.location.protocol === 'file:' || window.location.port === '3000') {
  const cordovaScript = document.createElement('script');
  cordovaScript.setAttribute('type', 'text/javascript');
  cordovaScript.setAttribute('src', 'cordova.js');
  document.body.appendChild(cordovaScript);
}

document.addEventListener('deviceready', function () {
  new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount("#app")
}, false)
// 开发环境
// new Vue({
//   router,
//   store,
//   render: h => h(App)
// }).$mount("#app")

2、在App.vue写入

methods:{
    backbutton () {
      if (this.time == 0) {
        this.time = (new Date()).getTime(); // 2s内再次点击就退出
      }
      // 监听返回按钮
      const url = this.$route.path
      if (url === '/' || url ==='/statisticalAnalysis' || url === '/goodsQuery') {  // 处于app首页,满足退出app操作
        let tmpTime = (new Date()).getTime()
        let isShort = (tmpTime - this.time < 4000)
        if (isShort && this.backClick!= 0) {
          navigator.app.exitApp()
        } else if (isShort) {
          this.backClick++
        } else {
          this.backClick = 0
        }
        Toast({
          message: '再按一次退出程序',
          duration: 2000
        })
        this.time = tmpTime
        return
      }else{
        this.backClick = 0
        history.back()
      }
    }
  },
  mounted () {
    // 物理返回键
    document.addEventListener('backbutton', this.backbutton, false)
  },
  beforeDestroy () {
    document.removeEventListener('backbutton', this.backbutton, false)
  }