微信小程序开发-调用手机相机/相册功能

在编写小程序中,很多时候都会用到牌照功能,或者是上车手机相册中的图片,那么问题来了,如何调用拍照/手机相册功能呢?

微信小程序开发-调用手机相机/相册功能_第1张图片
image.png

微信小程序开发-调用手机相机/相册功能_第2张图片
image.png

微信小程序开发-调用手机相机/相册功能_第3张图片
image.png

使用接口:wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照。

1.官方文档
微信小程序开发-调用手机相机/相册功能_第4张图片
image.png

微信小程序开发-调用手机相机/相册功能_第5张图片
image.png
2.我的

这个非常简单,不需要太多的解释,大家直接看代码即可。
逻辑很简单,点击的时候调用微信接口wx.chooseImage()即可。这个是微信的调用相机接口。

js代码:
Page({
  data: {
    carWin_img_hidden:true, //展示照片的view是否隐藏
    carWin_img:'' //存放照片路径的
  },
//页面加载设置初始值 可以不要
  onReady(res){
    this.setData({
      carWin_img_hidden: true,
      carWin_img: ''
    });
  },
//点击事件
  clickCarWin(){
    var that = this;
    wx.chooseImage({
      count: 1,
      success: function (res) {
        // 无论用户是从相册选择还是直接用相机拍摄,路径都是在这里面
        var filePath = res.tempFilePaths[0];
        //将刚才选的照片/拍的 放到下面view视图中
        that.setData({
          carWin_img: filePath, //把照片路径存到变量中,
          carWin_img_hidden: false //让展示照片的view显示
        });
        // 这个是使用微信接口保存文件到数据库
        // wx.uploadFile({
        //   url: "",
        //   filePath: filePath,
        //   name: 'file',
        //   success: function (res) {

        //   }
        // })
      },
      fail: function (error) {
        console.error("调用本地相册文件时出错")
        console.warn(error)
      },
      complete: function () {

      }
    });
  }
})
微信小程序开发-调用手机相机/相册功能_第6张图片
image.png
wxml代码:

解释:布局随便设, 这个是我的,就一个标题,一个相机按钮(加上事件),一个绑定数据显示隐藏的view(存放image的),src根据你js变量判断是赋值什么。


    
    
        
            驾驶员驾照
            
        
    

    

你可能感兴趣的:(微信小程序开发-调用手机相机/相册功能)