Cordova与Vue结合使用
1.Cordova与Vue结合使用,调用安卓基层功能 在完成我的上一篇文章所述的操作以后,我们就可以来完成以下的操作。1.1 .在Cordova中创建Vue项目命令行创建完Cordova 项目后,cd 项目名,使用vue-cli 创建Vue项目。 创建完毕的项目目录如右图。其中的Vue文件就是我们的H5项目 1.2 .项目中调用安卓功能 在...
1.Cordova与Vue结合使用,调用安卓基层功能
在完成我的上一篇文章所述的操作以后,我们就可以来完成以下的操作。
1.1 .在Cordova中创建Vue项目
命令行创建完Cordova 项目后,cd 项目名,使用vue-cli 创建Vue项目。 创建完毕的项目目录如右图。其中的Vue文件就是我们的H5项目
1.2 .项目中调用安卓功能
在Cordova中调用基础工程比较轻松,它把基础的插件都集成在一块。
首先添加我们需要的插件。这里以相机为例子。在CordovaProject目录下,命令行输入
cordova plugin add cordova-plugin-camera
我们把相机功能放在HELLOWORD的组件里,HTML结构
<template>
<div class="hello">
<button @click="cameraTakePicture">打开相机</button>
<img id = "myImage"/>
</div>
</template>
JS代码如下
cameraTakePicture() {
console.log("1")
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL
})
function onSuccess(imageData) {
var image = document.getElementById('myImage')
image.src = "data:image/jpeg;base64," + imageData
}
function onFail(message) {
alert('Failed because: ' + message)
}
}
如此调用一个安卓的基础相机功能就完成了。接下来我们要的就是将它打包出来并放在安卓机器上实现。但在这之前,我们需要修改一下webpack的打包生成目录,使它生成的H5项目文件放置在www目录文件下,减少工程步骤。进入到vue目录config文件下,进入index.js,将build模块修改一下,如下
build: {
// Template for index.html
index: path.resolve(__dirname, '../../www/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../../www'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
.
.
.
.
}
命令行进入vue项目,命令行npm run build,我们会发现打包后的文件出现在www下。完成这个以后。我们就可以进行打包APK
打包APK流程在下一章。
更多推荐
所有评论(0)