cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova

cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova

1.创建cordova(略)

这是创建好的cordova项目目录(图1)
cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova
我创建了一个名字叫hello的项目,www文件夹是cordova项目的入口,可以发现www文件夹下面有css,image,js三个文件夹和一个index.html页面(图2)

cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova

2.在你的cordova目录下创建一个vue-cli项目

vue目录如下图(图3)
cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova
注意这是我打包过的vue-cli,所以多出一个dist文件夹
我在cordova项目下创建了一个叫MyApp的项目如图(4)cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova

3.找到vue项目目录下config/index.js 并且修改如图(图5)

cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova
修改之后我们打包vue项目则不会生成dist文件夹,而是直接把dist文件夹里面的内容生成到cordova项目目录的www文件夹里
修改之后打包,查看cordova项目www目录,出现如图说明设置成功(图6)
cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova

4.打开vue目录index.html页面

引用cordova.js如图(图7)
cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova
注意此处路径在vs中是显示找不到的,项目打包后会正常引用

5.使用

首先打包vue项目,确认项目打包后的文件在cordova项目的www文件夹中,然后打包cordova项目,akp安装到模拟器上运行

 //当前网络连接状态    
 networkInfo() {      
 var networkState = navigator.connection.type;     
  var states = {}; 
      states[Connection.UNKNOWN] = "Unknown connection";  
          states[Connection.ETHERNET] = "Ethernet connection"; 
               states[Connection.WIFI] = "WiFi connection";      
               states[Connection.CELL_2G] = "Cell 2G connection";      states
               [Connection.CELL_3G] = "Cell 3G connection";      
               states[Connection.CELL_4G] = "Cell 4G connection";      states
               Connection.CELL] = "Cell generic connection";      
               states[Connection.NONE] = "No network connection";
               
      alert("Connection type: " + states[networkState]);    }

此方法是查看当前设备网络状态,需要先添加对应的Cordova插件,效果实现(图8)
cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova本文结束,欢迎留言,后续更新cordova项目如何在谷歌浏览器上调试(手机运行app,浏览器调试)