uniapp-微信小程序 同声传译功能实现-配合编辑器(获取后台数据)

uniapp-微信小程序 同声传译功能实现-配合编辑器

同声传译插件添加方法见 同声传译

麻烦在编辑器初始化 获取后台数据在编辑器上 和语音输入同步的功能

编辑器部分

不用同声传译时编辑器初始化,用下面的方法Content是后台的数据。最后用watch监听,不然有的时候来不及渲染,编辑器内容时有时无。

EditorContext.setContents(Object object)初始化编辑器内容

onEditorReady($event) {
			// console.log(uni.createSelectorQuery().in(this).select('#editor').context)
			// 	let that=this;
			// 	uni.createSelectorQuery().in(that).select('#editor').context(function(res) {
					
			// 		that.editorCtx = res.context;			
			// 	console.log('12'	,that.editorCtx);
			
				
			// 	that.editorCtx.setContents({
			// 		html:that.Content,
		
					
			// 	})	
			
			
					
				// }).exec();
			},
初始化用watch比较好
watch:{
			Content:{
			handler(newName, oldName) {
			  
				  let that=this;
				  uni.createSelectorQuery().in(that).select('#editor').context(function(res) {
				  	
				  	that.editorCtx = res.context;			
			  that.editorCtx.setContents({
				  	html:newName,
				  })
			  }).exec();
		     },
			      immediate: true	,	
				
			}
			
		} ,

语音输入 添加到编辑器上的内容 代码

		uni.createSelectorQuery().in(that).select('#editor').context(function(res) {
			
			that.editorCtx = res.context;			
		that.editorCtx.insertText({
			text:that.voiceState,
		})	
		}).exec();

同声传译部分

注意!文章所用的 initRecord() 语音回调 需要在onLoad 或者onReady中调用
但是我发现 this.initRecord(); 放在onLoad中不起作用,我不太清楚为什么可能是因为这是组件 所以我把他弄在onReady成功了

onReady() {
			manager.onRecognize = res=>{
			let text = res.result
			}
			manager.onStop = res=>{
				let that=this
			let text = res.result
			this.editorCtx=text
			this.voiceState=text
			uni.createSelectorQuery().in(that).select('#editor').context(function(res) {
			that.editorCtx = res.context;			
	that.editorCtx.insertText({
			text:that.voiceState,
		})	
		}).exec();	
			
			console.log(res,'12')
			
			if(text==''){
			console.log('用户没有说话')
			
			wx.showToast({
			icon:'none',
			
			title: '未识别',
			
			})
			
			}else{
			console.log(text)
			
			}
			
			}
			
			manager.onError = function (res) {
			wx.showToast({
			icon:'none',
			
			title: '报错了',
			
			})
			
			}
	
		},

recordState: false, //录音状态
content:’’,//内容
voiceState: “你可以这样说…” ,

其他的配置看最上面的链接不细说了 人家总结的很好

编辑器看我另外的文章内容
另外还有一个很奇怪的错误
其他别人分享的代码是这样的,但是在我的uniapp中报错了
onEditorReady() {
const that = this
wx.createSelectorQuery().select(’#editor’).context(function (res) {
that.editorCtx = res.context
}).exec()
}
我修改了下 成功了 .in(that) 的区别 但不懂为什么

// 	uni.createSelectorQuery().in(that).select('#editor').context(function(res) {
					
			// 		that.editorCtx = res.context;			
			// 	that.editorCtx.setContents({
			// 		html:that.Content,
				// 	})	
					// }).exec();

你可能感兴趣的:(小程序,前端,小程序)