微信小程序调用相册和相机
在微信小程序中，调用相册和相机是非常常见的需求。下面我们将一步步地讲解如何实现这一功能。
1. 添加依赖首先，我们需要添加 `weui-ui` 和 `image-picker` 这两个依赖包。这些包提供了对话框和图片选择器的组件。
```json{
"name": "myapp",
"version": "1.0",
"description": "",
"main": "app.js",
"dependencies": {
"weui-ui": "^2.3.4",
"image-picker": "^1.5.0"
}
}
```
2. 引入组件在 `app.json` 中，我们需要引入这些依赖包。
```json{
...
"pages": [
{
"path": "index",
"component": "index/index"
},
{
"path": "image-picker",
"component": "image-picker/image-picker"
}
],
"dependencies": {
"weui-ui": "^2.3.4",
"image-picker": "^1.5.0"
}
}
```
3. 编写 WXML接下来，我们需要编写 `index.wxml` 文件来实现图片列表和上传图片的按钮。
```wxml
```
4. 编写 WXSS然后，我们需要编写 `index.wxss` 文件来样式化我们的组件。
```wxss.container {
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
.img_body {
position: relative;
width:80%;
height:60vh;
background-color: f7f7f7;
padding:10px;
border-radius:5px;
}
.img_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width:100%;
height:80%;
}
.img_li {
position: relative;
width:30%;
height:40vh;
margin:10px;
background-color: fff;
border-radius:5px;
box-shadow:0010px rgba(0,0,0,0.1);
}
.img {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
height:80%;
}
.addimg {
position: absolute;
bottom:10px;
right:10px;
background-color: 4cd964;
color: fff;
padding:5px15px;
border-radius:5px;
}
```
5. 编写 JS最后，我们需要编写 `index.js` 文件来实现图片选择器和上传图片的逻辑。
```javascriptPage({
data: {
imgList: []
},
chooseImage() {
wx.chooseImage({
count:9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.setData({
imgList: res.tempFilePaths });
}
});
},
uploadImage() {
wx.uploadFile({
url: ' filePath: this.data.imgList[0],
name: 'file',
success: (res) => {
console.log(res);
}
});
}
});
```
6. 测试最后，我们需要测试我们的小程序是否能够正常工作。
通过以上步骤，我们就可以实现一个基本的图片选择器和上传图片功能的小程序了。
