当前位置:   article > 正文

微信小程序录音和头像上传

微信小程序录音和头像上传

录音:

WXML

  1. <view class="box4">{{time}}</view>
  2. <button bind:tap="recorderBtn">开始录音</button>
  3. <button bind:tap="removeBtn">结束录音</button>
  4. <button bind:tap="playBtn">播放录音</button>

JS

  1. Page({
  2.   data:{
  3.     time:0,
  4.     clearTime:"",
  5.     fileText:"",
  6.   },
  7.   recorderBtn(){
  8.     this.data.clearTime = setInterval(()=>{
  9.       this.data.time += 1;
  10.       this.setData({time:this.data.time});
  11.     },1000);
  12.     a.start()
  13.   },
  14.   removeBtn(){
  15.     clearInterval(this.data.clearTime);
  16.     this.setData({time:0})
  17.     a.stop();
  18.     a.onStop((res)=>{
  19.       this.data.fileText = res.tempFilePath;
  20.     })
  21.   },
  22.   playBtn(){
  23.     b.src = this.data.fileText;
  24.     b.play();
  25.   },

头像上传:

wxml

  1. <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
  2. <image class="avatar" src="{{ avatarUrl }}" />
  3. </button>

wxss

  1. .avatar-wrapper {
  2. width: 160rpx;
  3. height: 160rpx;
  4. padding: 0;
  5. background: none;
  6. }
  7. .avatar {
  8. width: 160rpx;
  9. height: 160rpx;
  10. border-radius: 20rpx;
  11. }

js

  1. const defaultAvatar = '../../images/banner.jpg';
  2. Page({
  3. data:{
  4. avatarUrl:defaultAvatar,}
  5. )},
  6. onChooseAvatar(e){
  7. console.log(e);
  8. const { avatarUrl } = e.detail
  9. this.setData({ avatarUrl })
  10. },

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号