微信小程序开发之相册选择和拍照详解及实例代

微信小程序相册选择和拍照详解及实例代码

=======================

随着移动互联网的发展，微信小程序成为了人们获取信息和服务的重要渠道。本文将详细介绍微信小程序中的相册选择和拍照功能，并附上实例代码，供需要的朋友参考。

一、前言

-

在微信小程序中获取图片主要有两种方式：一种是直接打开微信内部样式进行拍照或选择相册图片；另一种是弹出提示框让用户选择拍照还是从相册选择。下面分别介绍这两种方式。

二、选择相册的方式

选择相册主要通过`wx.chooseImage`函数实现。该函数的具体参数如下：

`count`: 默认9，指定用户可以选取的图片张数上限。

`sizeType`: 可以指定是原图还是压缩图，默认二者都有。

`sourceType`: 可以指定来源是相册还是相机，默认二者都有。

以下是打开相机相册的代码示例：

```javascript

Page({

data: {

tempFilePaths: ''

},

chooseImage: function () {

var that = this;

wx.chooseImage({

count: 1,

sizeType: ['original', 'pressed'],

sourceType: ['album', 'camera'],

success: function (res) {

// 返回选定照片的本地文件路径列表，可用于img标签的src属性显示图片

that.setData({tempFilePaths: res.tempFilePaths});

}

})

}

})

```

三、点击获取弹框提示的方式

--

这种方式用户体验更好，用户可以明确选择从相册选择还是拍照。具体实现如下：

通过`wx.showActionSheet`函数弹出提示框，然后根据用户的选择调用`wx.chooseImage`函数。示例代码如下：

```javascript

Page({

data: {tempFilePaths: ''},

chooseImage: function () {

var that = this;

wx.showActionSheet({

itemList: ['从相册中选择', '拍照'],

success: function (res) {

if (!res.cancel) {

if (res.tapIndex == 0) {that.chooseWxImage('album')}

else if (res.tapIndex == 1) {that.chooseWxImage('camera')}

}

}

})

},

chooseWxImage: function (type) {

var that = this;

wx.chooseImage({

sizeType: ['original', 'pressed'],

sourceType: [type],

success: function (res){ console.log(res); that.setData({tempFilePaths: res.tempFilePaths[0]}) }

})

}

})

```

四、注意事项和布局文件说明

文件的临时路径在小程序本次启动期间可以正常使用，如需持久保存，需主动调用wx.saveFile，在小程序下次启动时才能访问得到。布局文件包含按钮和图片展示区域。按钮用于触发获取图片的操作，图片展示区域用于展示获取到的图片。具体布局代码示例如下：`获取图片 `。关于微信小程序开发的其他细节和API调用，可以参考官方文档：<