赵勇鹏787

赵勇鹏在天上
94 阅读7分钟

项目概述

本产品是用来监控需要进行减肥的用户，让用户更好的看到自己身体各个指标是否在健康人的水准，让用户控制饮食 实时监控自己的体重，让用户自己记录每一天的减肥数据可以根据自己的个人需要设置饮食偏好，我们来引入了大量的减肥知识课堂，例如 营养搭配。。，如果有不懂的可以和真人客服一对一的沟通为用户解答需求，我们还提供了健康手环更简单方便的查看自己的步数，消耗了多少卡路里等等，还有提供了更适合减肥的早餐午餐和晚餐，还有正适合用户的减肥工具，以及减肥专家的建议。。。

技术栈

我们使用开发工具是HbuiderX,更方便，更快捷，框架使用了vue2更好的兼容一些市场 第三方库使用了 uview一个十分强大的组件库，、GOeasy+阿里云对象存储服务教程来事件客服的及时通信和发送语言图片等一系列的消息，百度云服务的识别文字功能，css的样式使用了sass，还有uniapp自带的路由功能，数据采用了Mysql数据库，后端采用了koa2作为服务器框架

项目

  • 客服即时聊天
  • 语音识别文字功能
  • 图片识别文字功能
  • 语音聊天功能

亮点

  • 跨域服务 本项目同时产出小程序和App两个客服端

  • 发送语音 采用了阿里云对象存储OSS的服务，先去创建一个对象 然后在去GoEasy中应用里的IM文件存储配置阿里云的OSS，阿里云对象存储OSS服务有一个生成的合法域名去微信公共平台>设置>开发设置>服务器域>uploadFile合法域名,设置阿里云对象存储OSS语音生成的合法语音这是最基本的配置，然后就到了如何实现发送语音,用到了uni.getRecorderManager(),uni.createInnerAudioContext() 这两个uniapp自带的api方法,uni.getgetRecorderManager().start()开始录音 和 uni.recorderManager().onStop()停止录音,当用户按住开始语言功能按钮时调用uni.recorderManager().start() api,并且需要配置一下属性属性

     uni.getRecorderManager().start({
            duration: 600000, // 指定录音的时长,单位 ms
            sampleRate: 16000, //采样率
            numberOfChannels: 1, //单通道
            format: 'mp3', //音频格式
     })

然后当用户松开按钮时调用 uni.recorderManager().onstop() 方法这个方法有回调函数有一个返回值res，也就是录音的mp3的暂存路径，大小和时长 ,然后通过使用goeasy的发送录音功能的api吧mp3 的暂存路径发送给客服实现了发送语音的功能

        	var im = self.goeasy.im;
		//创建消息, 内容最长不超过3K，可以发送字符串，对象和json格式字符串
                let textMessage = im.createTextMessage({
			text: str[1].data, //消息内容
                        to: {
			type: GoEasy.IM_SCENE.PRIVATE, //私聊还是群聊，群聊为GoEasy.IM_SCENE.GROUP
			id: 'user002', //接收方用户id
                    }
		});

			//发送消息
		im.sendMessage({
                    message: textMessage,
                    onSuccess: function(message) { //发送成功
                            console.log("Private message sent successfully.", message);
                        },
                    onFailed: function(error) { //发送失败
                            console.log('Failed to send private message，code:' + error.code +' ,erro'+error.content);
                        }
                    });

  • 语音转文字 利用的腾讯云的语音识别中的一句话识别接口,配置完基本的内容之后，需要在腾讯的搜索 API Explorer 中搜索语音识别ASR中的一句话识别接口调试,中选择node.js版本,配置完基本参数然后调用复制粘贴配置好的文档到自己的服务器 ！注意配置音频格式时使用选择m4a,如果选择mp3会产生问题 切记！切记！切记！ 还有下载腾讯的sdk包 ,服务器的设置就这样设置好了 ,然后到了小程序部分当用户触发了语言转文字时开始录音调用 uni.getgetRecorderManager().start() 和 uni.recorderManager().onStop()停止录音, 当路由结束是需要吧mp3的暂存文件地址转为base64编码这里使用了uni.getFileSystemManager().readFileSync(mp3文件地址, 'base64') 变量接受一些base64编码 可以请求服务区发送音频的base64编码 音频的大小和时长,服务器接受之后拿着参数向腾讯云请求,最后返回给 服务器转变好的文字在吧文字返回给小程序

  • 图片转文字 采用了百度智能云服务来完成图片识别文字 先去百度智能云创建一个项目获取 key值等,然后去api在线调试中的通用文字识别标准版配置完基本属性然后点击node.js版本赋值代码到自己的服务器中,还有一个非常重要的属性token需要在百度云服务中获取token,获取token需要自己创建的AK、SK去获取百度云token,获取完token别忘了开起文字识别功能。服务器端配好了然后是小程序,用户调用 uni.chooseImage() 选择图片成功之后有一个成功的回调函数success中有res返回值反回了图片的基本属性图片的暂存地址,然后使用uni.getFileSystemManager().readFileSync(mp3文件地址, 'base64') 修改成base64编码,然后请求服务器吧base64编码传递给服务器,服务器在吧图片的base64编码发送给百度的识别文字接口进行识别完整获取返回是一个对象对象中有words_result属性是一个数组,数足的key是words值是文字然后使用forEach方法循环数组,然后拼接成一个整个字符串返回给前段 ！！！这里有一个半坑点吧 就是获取文字是一个函数,你想要async来获取时没有问题但是会报错因为接口函数上没有写async,直接用await获取是会报错了,当然如果使用.then方法的话不需要,我.then出来字符串

性能优化

  • 分包 在manifest.json文件中的源码试图里的mp-weixin对象中添加以下属性开启分包在项目的根目录下创分包文件,pages里的文件八载分包文件中,然后去pages.json文件中配置对象 subPackages 对象 对象的值是数组,数组每一个对象是一个分包文件,最后吧用的 的路由进行修改,利用利用路由跳转页面时需要修改成 subPackages里的文件路径
           //开启分包
        "optimization":{
                        "subPackages":true
                    }
                    
        //分包目录
        
            "subPackages": [
		{
			"root": "pagesA",//分包文件路径
			"pages": [{
				"path": "home/index",//拼接上分包文件上vue文件配置好路径
				"style": {
					"navigationBarTitleText": "首页",
					"enablePullDownRefresh": false
				}
			}]
		},
             ]
  • 小程序CDN加速,减少本地的静态资源

封装函数

  • 获取dom的在页面的位置

    吧js文件引入到mian.js文件中让vue的实例上挂载改函数,就能实现全局调用

    export default {
	getRect(selector) {
		return new Promise((resolve) => {
			let view = uni.createSelectorQuery().select(selector);
			view.fields({
				size: true,
				rect: true,
				scrollOffset: true
			}, (res) => {
				resolve(res);
			}).exec();
		})
	}
}

语音条长度控制

利用录音的时间来控制语言条的长度,当结束录音时吧录音的时长/1000来获取秒数,在进行判断,如何小于10秒的语音让语言条的长度是默认的,如果大于10秒,就让录音时长减去10秒之后的值在加上默认值就是语言条的长度

项目遇到的问题

  • 在图片中识别文字中参考的文章上有一段代码段中的请求接口中的小问题,参考文章上请求的详细识别文字,而参考文章上让我注册的是普通识别文字,所以一直报错,上百度查怎么也查不出来,让高手查看说出了问题所在

  • 分装组件是用到了slot插槽,不会使用了完全忘记了连slot

  • 开始录音时会有一个定时器来计算录音时间,因为我忘记清除定时器就会出现时间叠加的问题,之后在data函数中声明了一个变量，让定时器赋值给变量,当停止录音时使用clearInterVal()来清除定时器

avatar
文章
阅读
粉丝