Wechat applet-to realize the function of clicking and taking pictures
1. Realize the effect
2. Corresponding code
applyDetail.wxml
<!-- 相机-弹窗 -->
<camera wx:if="{
{isOpen}}" device-position="back" flash="off" binderror="error" class="photo">
<!-- 拍照按钮 -->
<view class="photo_btn black_text" bindtap="takePhoto">拍照</view>
</camera>
<view class="common_style header">
<!-- header部分 -->
<view class="displayCenter">
<view class="black_text">拍照</view>
<!-- 相机图标-点击后展示相机弹窗 -->
<view bindtap="openCamera"><van-icon name="photograph" size="52rpx" color="#ffaf10" /></view>
</view>
<!-- 拍完显示照片 -->
<image wx:if="{
{imageSrc}}" src='{
{imageSrc}}' class="img"></image>
</view>
applyDetail.wxss
.photo{
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 99;
}
.photo_btn{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
position: absolute;
left: calc(50% - 50rpx);
bottom: 50rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
.black_text {
font-size: 24rpx;
font-family: Source Han Sans CN-Normal, Source Han Sans CN;
color: #333333;
letter-spacing: 1rpx;
}
.common_style {
width: 100%;
padding: 0 60rpx 0 50rpx;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 32rpx;
}
.header {
padding-top: 18rpx;
padding-bottom: 18rpx;
}
.displayCenter {
display: flex;
justify-content: space-between;
align-items: center;
}
.img {
width: 400rpx;
height: 400rpx;
margin: auto;
margin-top: 20rpx;
}
applyDetail.js
Page({
/**
* 页面的初始数据
*/
data: {
imageSrc: '', //图片url
isOpen: false, // 判断是否展示相机弹窗
},
// 打开相机弹窗
openCamera() {
this.setData({
isOpen: true,
})
},
// 拍照的方法
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log(res);
this.setData({
imageSrc: res.tempImagePath,
isOpen: false,
})
},
fail() {
//拍照失败
console.log("拍照失败");
}
})
},
error(e) {
console.log(e.detail)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.ctx = wx.createCameraContext();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
applyDetail.json
{
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
},
"navigationBarTitleText":"申请详情",
"navigationBarBackgroundColor":"#f6f6f6"
}
【Supplement】Relevant knowledge points
Official documentation: https://developers.weixin.qq.com/miniprogram/dev/component/camera.html
