小程序拍照功能
输入“/”快速插入内容
小程序拍照功能
小程序拍照功能
用户845用户8452023年9月7日修改
1.
拍照组件下载
poster.zip
5.35KB
2.
页面引用
代码块
// json页面 --- 引入拍照组件
"usingComponents": {
"ezxr-takephoto":"../../Components/poster/poster" // 路径根据组件位置自行更改
}
代码块
// wxml页面
<!-- 拍照组件 -->
<ezxr-takephoto id="ezxr-takephoto" bind:photoBack="showTakePtoto"></ezxr-takephoto>
<!-- 拍照触发按钮 -->
<view id="paizhao" wx:if="{{isTakePhotoShow}}" class="take-photo" style="background-image: url(https://ar-scene-source.nosdn.127.net/c66008b96eec0d311578d9ada702dead.png);" bindtap="takePhoto"></view>
代码块
// 拍照触发按钮样式
.take-photo {
position: absolute;
width: 140rpx;
height: 140rpx;
bottom: 120rpx;
left: 50%;
transform: translateX(-50%);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 29;
}
代码块
// js脚本
//#region 拍照
// 拍照按钮触发事件
takePhoto() {
this.hideTakePtoto();
const ezxrTakePhotoCpt = this.selectComponent('#ezxr-takephoto');
ezxrTakePhotoCpt.takePhoto(this.arEzxr, this.arContentCpt);
},
// 显示拍照按钮（点击返回显示）
showTakePtoto() {
this.setData({isTakePhotoShow: true});
},
// 隐藏拍照按钮（点击拍照隐藏）
hideTakePtoto() {
this.setData({isTakePhotoShow: false});
},
//#endregion
3.
海报可配置项