小程序钉钉语音录入组件

前言

本文章的代码，主要针对于钉钉上小程序的开发，实现语音录入转化为文本的功能。如有什么问题欢迎留言交流。

注意：
本功能只有钉钉Version4.6.5以后的版本才支持，目前钉钉的小程序开发工具v0.26.0-beta.3版本上暂时不支持此功能，会导致报错。需要将本代码有关语音的部分注释掉，当在真机上预览或发布的时候放开注释掉的代码即可。我相信后续钉钉应该会完善对应的支持，如果你的版本已经支持，无需看本条提示。

代码效果

引入组件的页面

//.axml页面
//使用组件
<speech label="备注(可选)" keyName="remarks"  placeholder="请按住语音图片录入语音..." maxlength="100" onChange="onChange"/>//.json页面
{"usingComponents": {//引用speech组件"speech": "/component/speech/speech",}
}

speech组件代码

//speech .axml文件
<view class="speechInputBox"><view class="labelBox"><view class="{{required?'labelSpeech dingding-required':'labelSpeech'}}">{{label}}</view></view><textarea value="{{value}}" onBlur="onBlur" placeholderClass="placeholder" onInput="onItemInput" maxlength="{{maxlength}}" placeholder="{{placeholder}}"  auto-height placeholder="自动变高" />
<view class="speech" data-index="{{currentIndex}}"><image onTouchStart="startRecord" onTouchEnd="stopRecord" src="{{isHold?'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545977468089&di=e84e59b12acbaef93c912c282b2f43c7&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F12%2F06%2F32%2F58PIC1B58PICEQa.jpg':'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545977468000&di=eb455dbd345f76f6ca613bce1ad29020&imgtype=0&src=http%3A%2F%2Fimg.zjbiz.net%2Fupload%2Fproduct%2F2016p1%2F2016062312%2F22916.png'}}"/>
</view><view class="errorMessageSpeech" hidden="{{errorMessage===''?true:false}}">{{errorMessage}}</view>
</view>//speech .js文件
let rm = dd.getRecorderManager();
Component({mixins: [{didMount() {this.handleValidated(this.data.value)this.props.onChange({ "keyName": this.props.keyName, "value": this.data.value, "validated": this.data.validated, "currentIndex": this.props.currentIndex })},}],data: {value: "",errorMessage: "",validated: true,//验证是否通过，通过为true，否则为false  isHold: false,//是否在录音},props: {label: "",keyName: "",currentIndex: "",maxlength: "100",placeholder: "",required: false,isSubmit: false,onChange: (data) => {}},didUpdate(prevProps, prevData) {if (this.props.required) {//点击确定if (this.props.isSubmit) {if (this.data.value === "") {this.setData({errorMessage: "必填项，请输入",})} else {this.setData({errorMessage: "",})}}}},didUnmount() { },methods: {handleValidated(value) {if (this.props.required == "true") {if (this.data.value && this.data.value != "") {this.setData({ validated: true })} else {this.setData({ validated: false })}}},onBlur(e) {this.setData({ value: e.detail.value })this.handleValidated(this.data.value)this.props.onChange({ "keyName": this.props.keyName, "value": this.data.value, "validated": this.data.validated, "currentIndex": this.props.currentIndex })},onItemInput(e) {this.setData({value: e.detail.value,})this.handleValidated(this.data.value)this.props.onChange({ "keyName": this.props.keyName, "value": this.data.value, "validated": this.data.validated, "currentIndex": this.props.currentIndex })},startRecord(event) {//开始录音rm.start({ duration: 30 }); //最长录音时间为30sthis.setData({ isHold: true })},stopRecord(event) {//停止录音this.setData({ isHold: false })let self =this;rm.stop();rm.onstop = (res) => {console.log("res.tempFilePath  in  on  stop:", res.tempFilePath);dd.uploadFile({url: '上传到远程的路径',fileType: 'audio',fileName: 'file',filePath: res.tempFilePath,formData: { info: res.tempFilePath },//上传到远程的参数success: res => {//上传后后台解析后的语音文本let data= JSON.parse(res.data);if (data.code ==200) {self.setData({ value: recordInfo.data });this.props.onChange({ "keyName": this.props.keyName, "value": recordInfo.data, "validated": this.data.validated, "currentIndex": this.props.currentIndex })}},fail: function(res) {console.log('fail  in  onstop  :  ', JSON.stringify(res))},});}},},
})//speech .acss
.speechInputBox{padding: 32rpx;background: white;
}
.labelBox{display: flex;flex-direction:row;justify-content: space-between;
}
.speech{text-align: center;
}
.speech image{width: 104rpx;height: 104rpx;}
.labelSpeech{width: 40%;font-size:30rpx;font-weight:500;color:rgba(25,31,37,1);margin-bottom: 24rpx;
}
textarea{font-size: 30rpx;margin-left: -12rpx;
}.errorMessageSpeech{display: block;color: red;margin-left:26%;font-size: 25rpx;padding-bottom: 20rpx;background: white;
}
.placeholder{ color:#B3B3B3; font-size:28rpx;
}//speech .json
{"component": true
}

小程序钉钉语音录入组件相关推荐

微信小程序转钉钉小程序适配问题
与阿里云项目合作,作为ISV,不能使用腾讯系产品,必须将微信小程序转成钉钉小程序. 经过12天的艰苦奋斗,基本完成.将经验教训整理一下给大家. 不支持wxs,无法自定义页面函数很方便的{{mc.to ...
ngrok内网穿透工具搭建，方便微信公众号，小程序、钉钉等开发【已投入使用】
前言:微信公众号,小程序.钉钉等开发需要内网穿透工具. 1.经过不断的摸索和调试,完成ngrok内网穿透的工具的搭建,对于微信公众号,小程序.钉钉等开发提供便利性. 2.搭建环境Linux cento ...
uniapp小程序文字与语音互相转化
小程序文字与语音互相转化插件名称: 微信同声传译插件使用文字转语音功能语音转文字总结插件名称: 微信同声传译微信同声传译由微信智聆语音团队.微信翻译团队与公众平台联合推出的同传开放接口, ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
小程序日期加时间筛选组件
小程序日期加时间筛选组件新建component->date-time-picker .wxml <picker mode="multiSelector" class= ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
微信小程序学习笔记(四)自定义组件
文章目录 1. 组件的创建与引用 1.1 创建组件 1.2 引用组件 1.3 全局引用 VS 局部引用 1.4 组件和页面的区别 2. 样式 2.1 组件样式隔离 2.2 修改组件的样式隔离选项 3. ...
uniapp 小程序封装左滑效果组件
uniapp 小程序封装左滑效果组件引言封装组件页面使用注意事项引言小程序电商项目购物车,往往都会有左滑删除功能,在不想使用插件的前提下,就需要自己编写,因此我个人写了一个左滑效果组件封 ...

小程序钉钉语音录入组件

前言

代码效果

引入组件的页面

speech组件代码

小程序钉钉语音录入组件相关推荐

最新文章

热门文章