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

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

image.png

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

1.官方文档

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 () {

      }
    });
  }
})

image.png

wxml代码：

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

<view class="step_item">
    <!-- 按钮 -->
    <view class="content_button">
        <view class="content_button_panel">
            <text>驾驶员驾照</text>
            <image bindtap='clickCarWin' src="../../images/zhaoxiangji.png" background-size="contain"></image>
        </view>
    </view>
<!-- 存放照片  -->
    <view hidden='{{carDriver_img_hidden}}' class="content_zhaopian" style="height:400rpx;">
        <image class="_success" src="{{carDriver_img!=''?carDriver_img:'../../images/jiashizheng.jpg'}}" background-size="100% 100%"></image>
    </view>
</view>

最后编辑于：2018.09.19 15:22:13