cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova
cordova项目嵌套vue-cli,并调用原生android方法,vue+cordova
1.创建cordova(略)
这是创建好的cordova项目目录(图1)
我创建了一个名字叫hello的项目,www文件夹是cordova项目的入口,可以发现www文件夹下面有css,image,js三个文件夹和一个index.html页面(图2)
2.在你的cordova目录下创建一个vue-cli项目
vue目录如下图(图3)
注意这是我打包过的vue-cli,所以多出一个dist文件夹
我在cordova项目下创建了一个叫MyApp的项目如图(4)
3.找到vue项目目录下config/index.js 并且修改如图(图5)
修改之后我们打包vue项目则不会生成dist文件夹,而是直接把dist文件夹里面的内容生成到cordova项目目录的www文件夹里
修改之后打包,查看cordova项目www目录,出现如图说明设置成功(图6)
4.打开vue目录index.html页面
引用cordova.js如图(图7)
注意此处路径在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项目如何在谷歌浏览器上调试(手机运行app,浏览器调试)