vue开发app项目,涉及原生接口调用,用hbuilder打包
使用vue开发app项目,怎么使用手机的原生功能,以获取手机的相册,调用摄像头为例。这里使用的是hbuilder打包。第一步:定义一个vue组件,代码如下:<template><div class="mui-content"><button @click="galleryImg">从相册选取</button><...
使用vue开发app项目,怎么使用手机的原生功能,以获取手机的相册,调用摄像头为例。
这里使用的是hbuilder打包。
第一步:
定义一个vue组件,代码如下:
<template>
<div class="mui-content">
<button @click="galleryImg">从相册选取</button>
<button @click="captureImage">拍照</button>
<div class="imgBox">
<img :src="imgSrc">
</div>
</div>
</template>
<script>
export default{
data(){
return{
imgSrc:''//展示的图片路径
}
},
methods:{
// 从相册中选取图片
galleryImg(){
let This=this
console.log("从相册中选择图片:");
plus.gallery.pick( function(path){//从相册中选择图片
This.imgSrc=path
alert(path);
}, function ( e ) {//取消选择图片
console.log( "取消选择图片" );
}, {filter:"image"} );
},
// 拍照
captureImage(){
let This=this
var cmr = plus.camera.getCamera();//获取摄像头管理对象
var res = cmr.supportedImageResolutions[0];//字符串数组,摄像头支持的拍照分辨率
var fmt = cmr.supportedImageFormats[0];//字符串数组,摄像头支持的拍照文件格式
console.log("拍照分辨率: "+res+", 拍照文件格式: "+fmt);
cmr.captureImage( function( path ){//进行拍照操作
// 通过URL参数获取目录对象或文件对象
plus.io.resolveLocalFileSystemURL(path, function(entry) {
var tmpPath= entry.toLocalURL();//获取目录路径转换为本地路径URL地址
This.imgSrc=tmpPath
alert( "拍摄成功: " + tmpPath)
})
},
function( error ) {//捕获图像失败回调
alert( "捕获图像失败: " + error.message );
},
{resolution:res,format:fmt}
);
}
}
}
</script>
<style scoped>
.imgBox{
width: 450px;
height:400px;
}
.imgBox img{
width: 100%;
height: 100%;
}
</style>
注意:此时运行在浏览器的时候会报错:plus未定义。
然后运行 npm run build 生成dist文件
解释一下:
其实看看H5+的官方文档估计你就明白了,因为H5+这个功能是集成在Hbuilder里面的,而npm run build进行编译的仅仅是 vue代码而已(编译成普通的html+js+css代码),这时候 这些编译后的代码 还未用Hbuilder 进行打包,所以 plus 这个变量仍是一个无效变量。
后续步骤中,Hbuilder进行打包之后会自动在全局变量中生成一个 plus 变量,这时进行 真机调试 你会发现 控制台 并没有报错了。
第二步:
打开hbuilder;新建一个web项目,随便取个名字,你会看到文件夹上显示的一个W;
把dist文件夹里面的内容全部复制到你新建的这个文件夹下,点击右键选择转换成移动app,你会得到下图的文件;
点击这个json文件,可以设置app的名字
点击发行
选择云打包-打原生安装包,按提示一步一步来,最后生成apk文件,直接发送到手机,安装就可以看到已经可以实现调用手机相册和摄像头的功能了。
更多原生功能可以参考官方文档,里面有很多示例;
地址:http://www.html5plus.org/doc/zh_cn/camera.html
更多推荐
所有评论(0)