vue开发app项目，涉及原生接口调用，用hbuilder打包

蟑螂恶霸Ggg

于 2019-06-11 18:04:27 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41870989/article/details/91452690

使用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