微信小程序仿微信聊天语音播放自定义控件

效果如↓↓↓ 假装有声音。

很郁闷，没有做到完全解耦，试了试音频播放组件<audio></audio>与API wx.createInnerAudioContext()在自定义控件中没有作用！

也就是说，不能只传一个语音的url给自定义的控件了！播放的控制还得放在页面中，控制播放、暂停、等标识数据都得传，说是自定义控件，其实也就是一个UI罢了，与安卓IOS的继承再封装没法比，与小程序中引用片段<template name="×××"></template> 相比还没有人家简单。

个人认为：小程序的自定义组件是没有灵魂的，与引用片段无本质区别，当然，这是我乱说的，欢迎大神指导...

然后上代码吧：希望能抛砖引玉

1.在合适的目录右键新建component 自定义控件voice-view

wxml:

<!-- 仿微信语音播放 -->
<view class='voices'><view class='voice' hover-class='voice-hover' bindtap='playVoice' data-index='{{index}}' style="width:{{100+220*length/10}}rpx"><image src="../images/{{playing?'stop':'play'}}.png" style='margin-left:22rpx;' ></image><image src='../images/voice{{voiceImg}}.png' style='margin-right:10rpx;'></image></view><text style='font-size:24rpx;font-weight:400;color:rgba(155,155,155,1);line-height:34rpx;margin-left:16rpx'>{{length}}s</text>
</view>

wxss:

/* components/voice-view.wxss */
.voices {padding: 10rpx 0;display: flex;flex-direction: row;align-items: center;
}
.voices .voice {width: 320rpx;height: 40rpx;background: rgba(35, 69, 156, 1);border-radius: 20rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;
}
.voices .voice-hover{background: rgb(28, 54, 121);
}.voices .voice image {width: 26rpx;height:26rpx;
}

js:

// components/voice-view.js
Component({/*** 组件的属性列表*/properties: {index: {type: Number,value: 0},length: {type: Number,value: 10,},url: {type: String,value: ''},playing: {type: Boolean,value: false,observer: "playAnima" // observer 表示属性值被更改时的响应函数}},/*** 组件的初始数据*/data: {voiceImg: 3,},/*** 组件的方法列表*/methods: {//伪动画播放方法playAnima: function() {var that = thisif (!that.data.playing) {this.setData({voiceImg: 3})} else {switch (that.data.voiceImg) {case 1:that.setData({voiceImg: 2})breakcase 2:that.setData({voiceImg: 3})breakcase 3:that.setData({voiceImg: 1})break}setTimeout(function() {that.playAnima()}, 500)}},//播放、暂停音频playVoice: function(e) {this.triggerEvent('voiceClickss', {index: this.data.index,url:this.data.url,playing:this.data.playing});},},
})

2.page引用：要引用的先加声明：page页面的json中：

{"usingComponents": {"voice-view":"../../components/voice-view"},"navigationBarTitleText": "test"
}

布局wxml:

注意：url、length、等都是自定义控件中properties的属性。

<!--pages/test/test.wxml-->
<view wx:for="{{list}}"><voice-view url="{{item.url}}" length="{{item.length}}" playing="{{item.playing}}" index="{{index}}" bind:voiceClickss='voiceClick' />
</view>

bind:voiceClickss='voiceClick' 的意思是：绑定自定义控件中“voiceClickss”方法至page页面中“voiceClick”方法

当点击自定义控件时，执行控件中：
playVoice: function(e) {
this.triggerEvent('voiceClickss', {
index: this.data.index,
url:this.data.url,
playing:this.data.playing
});
},

将执行page页面中方法，并传值index...

js:

// pages/test/test.js
var playingSrc = ''
var playingIndex = 0
const innerAudioContext = wx.createInnerAudioContext()
Page({data: {list: [{url: 'https://fanyi.baidu.com/gettts?lan=en&text=%20pop%2Fdance%2Fclassical%2Fchurch%20music%20&spd=3&source=web',length: 3,playing: false},{url: 'https://fanyi.baidu.com/gettts?lan=en&text=She%20could%20hear%20music%20playing%20somewhere.&spd=3&source=web',length: 4,playing: false},{url: 'https://fanyi.baidu.com/gettts?lan=en&text=the%20popularity%20of%20Mozart%27s%20music&spd=3&source=web',length: 8,playing: false},],},//播放、暂停音频voiceClick: function(e) {console.log('page,-----voiceClick',)var index = e.detail.indexplayingIndex = indexvar playing = e.detail.playingvar src = this.data.list[index].urlconsole.log('播放url', src)if (playingSrc != src) {innerAudioContext.stop()innerAudioContext.src = srcplayingSrc = srcinnerAudioContext.play()} else if (!playing) {console.log('暂停中---->播放')innerAudioContext.play()} else {console.log('播放中---->暂停')innerAudioContext.pause()}},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {var that = thisinnerAudioContext.autoplay = falseinnerAudioContext.obeyMuteSwitch = falseinnerAudioContext.onPlay(function() {that.setStatus(true)})innerAudioContext.onPause(function() {that.setStatus()})innerAudioContext.onStop(function() {that.setStatus()})innerAudioContext.onEnded(function() {that.setStatus()})innerAudioContext.onError(function(res) {that.setStatus()var t = '未知错误'switch (res.errCode) {case 10001:t = '系统错误'break;case 10002:t = '网络错误'break;case 10003:t = '文件错误'break;case 10004:t = '格式错误'break;}wx.showToast({title: t,icon: 'none'})})},setStatus: function(sta = false) {for (var i = 0; i < this.data.list.length; i++) {this.data.list[i].playing = false}if (sta)this.data.list[playingIndex].playing = truethis.setData({list: this.data.list})}
})

开发中发现微信自带的判断音频播放是否暂停状态的方法不好用！无奈只好另写了个变量播放状态playing

wx文档： boolean paused 当前是是否暂停或停止状态（只读）

哦，顺便把图片资源文件给大家：

微信小程序仿微信聊天语音播放自定义控件相关推荐

微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
微信小程序仿微信漂流瓶
看到微信里有个漂流瓶.试了一下. 这里是用leancloud做后台.涉及到语音和文字的储存,查询. 技术点: 1.微信小程序开发之录音机音频播放动画 (真机可用) 2.微信小程序开发之用户系统一 ...
微信小程序仿微信聊天
主要思想使用websocket,微信小程序有提供websocket的直接方法,所有问题的难点在于后端代码的编写. 效果示意图演示视频地址 https://www.bilibili.com/video ...
微信小程序仿微信、支付宝数字密码软键盘wcKeyboard
微信小程序自定义数字键盘|仿微信支付数字密码键盘|仿支付宝数字键盘之前有开发过html5+js仿支付宝.微信支付自定义数字键盘,今天就在之前的插件基础上,重新开发出了小程序版本的仿微信.支付宝数字键 ...
微信小程序仿微信功能Day4
点击列表进入用户个人信息如图所示: 当点击了列表信息时候.跳转到用户个人信息的页面,并从js文件中获取值. 1.页面布局PersonalDetails.wxml <!-- pages/Pers ...
微信小程序仿微信功能Day3
仿微信通讯录功能实现右侧一个定位锚点跳转功能. 整体是列表的数据显示. 需要图片资源的请去网盘下载提取码:en17 1.phone.wxml <!-- pages/phone/phone.w ...
微信小程序仿微信语音
搞了这么长时间,第一次写文章.给大家分享个技术难度不高的,主要展示录音功能. 先看一下效果就是这样,点击底部按钮会产生变化,根据bind:touchstart在触摸时触发开始录音事件,根据bind: ...

微信小程序仿微信聊天语音播放自定义控件

微信小程序仿微信聊天语音播放自定义控件相关推荐

最新文章

热门文章