使用vue3实现一个人喵交流小程序

作者:我是胖虎 时间:2024-04-27 16:03:21 

目录
  • 前言

  • 初始化项目

  • 设计

  • 代码实现

    • 按需加载

    • 播放音频

    • 录音

    • 长按事件

    • 运行调试

  • 总结

    前言

    相信很多养猫的人都很想跟自己的猫进行沟通,当猫咪发出各种不同声音的喵喵叫时,通常都会问猫咪怎么了啊,是不是饿了啊,还是怎样怎样的。我也曾经搜索过有没有宠物翻译的软件,现在自己来实现一个吧[手动狗头]。

    微信小程序是不支持直接使用 vue 进行开发的,但目前行业中已经有不少解决方案去支持用各种开发框架开发跨端应用了。

    Taro 3.0版本开始支持使用 Vue3 进行开发,那就用 Taro 来实现我们的微信小程序吧。

    初始化项目

    Taro 的详细使用可以参考官方文档,先全局安装 @tarojs/cli


    npm install -g @tarojs/cli

    安装成功后用 taro 命令来创建模板项目:


    taro init catApp

    使用vue3实现一个人喵交流小程序

    这里选择了 vue3-nutUI 框架,这个框架功能没有 taro-ui 多,但 taro-ui 只支持 react,无奈只能用了。

    设计

    毕竟没有视觉出图,一切只能靠自己。马上打开 PPT,简简单单画个草图。

    使用vue3实现一个人喵交流小程序

    主要有两块功能组成:

    • 输入想对猫咪说的话,转成喵语进行播放

    • 录音,录下喵叫声,转成文字,也可以播放录音

    代码实现

    按需加载

    按需引入 vue3-nutUI 框架,刚才在初始化项目时已经是按需引入了,在 app.js 中,按需引入项目所需要用到的组件即可


    import { createApp } from 'vue'
    import { Button,Toast,Tabbar,TabbarItem,Icon,Avatar,Input  } from '@nutui/nutui-taro';
    import '@nutui/nutui-taro/dist/style.css';

    const App = createApp()
    App.use(Button).use(Toast).use(Tabbar).use(TabbarItem).use(Icon).use(Avatar).use(Input)

    export default App

    播放音频

    当输入想对猫主人的话,转成喵语后,想要播放,就得使用 Taro 提供的播放音频接口。播放音频现在使用官方更加推荐的 Taro.createInnerAudioContext 接口了,原先的 Taro.stopVoice 和 Taro.playVoice 不再维护了。


    const innerAudioContext = Taro.createInnerAudioContext();
    Taro.setInnerAudioOption({
    obeyMuteSwitch: false,
    });

    innerAudioContext.src = 'xxx.mp3';
    innerAudioContext.play();

    innerAudioContext.onPlay(()=>{
    console.log('开始播放')
    })
    innerAudioContext.onEnded(()=>{
    console.log('播放结束')
    })

    obeyMuteSwitch 配置是(仅在 iOS 生效)是否遵循静音开关,设置为 false 之后,即使是在静音模式下,也能播放声音,默认是true的,这里没注意,疑惑了好久,还以为我自己播放音频有问题,原来是给静音了。

    录音

    要给猫主人录音就需要用到 Taro.getRecorderManager 录音接口


    const recorderManager = Taro.getRecorderManager();
    recorderManager.onStart(() => {
    console.log("recorder start");
    });
    recorderManager.onStop((res) => {
    console.log("recorder stop", res);
    const { tempFilePath, duration } = res;
    // tempFilePath 是录音文件的临时路径
    // duration 是录音时长
    // 这里需要播放时,设置录音文件地址,则可以播放录音
    innerAudioContext.src = tempFilePath;
    innerAudioContext.play();
    });

    长按事件

    录音可能大家都习惯了长按时开始录音,松手时完成录音。vue3-nutUI 框架中并没有给按钮提供长按事件,所以需要用小程序原生提供的 longpress 事件,这个事件是手指触摸后,超过350ms时就会触发该事件,并且不会触发到 tap 事件。想要松手结束录音,需要结合 touchend 事件,才能完成长按录音,松手结束的需求。


    <nut-button block type="info" icon="microphone" @longpress="handleLongpress" @touchend="handleTouchend">
    录音
    </nut-button>

    运行调试

    执行 npm run dev:weapp 项目,会一直监听文件修改并实时编译成小程序,然后打开微信开发者工具,导入项目,选择打开 catApp 根目录即可,就可以进行预览了。

    来源:https://juejin.cn/post/7028361972982759455

    标签:vue3,小程序
    0
    投稿

    猜你喜欢

  • PyQt5 QSerialPort子线程操作的实现

    2023-08-21 13:07:28
  • asp提高首页性能的一个技巧

    2008-04-05 06:54:00
  • Pandas中批量替换字符的六种方法总结

    2022-10-23 05:23:12
  • 超详细注释之OpenCV制作图像Mask

    2021-10-20 14:15:34
  • python中遍历文件的3个方法

    2022-10-21 08:41:07
  • golang API请求队列的实现

    2024-03-11 16:39:50
  • 利用Python实现获取照片位置信息

    2022-12-07 06:58:16
  • 详解Node.js中的事件机制

    2024-05-03 15:58:52
  • 对dataframe进行列相加,行相加的实例

    2023-07-24 16:57:59
  • 详解Django中CSRF和CORS的区别

    2021-02-19 19:16:51
  • python 实现 hive中类似 lateral view explode的功能示例

    2021-08-20 13:51:45
  • 详解Python的爬虫框架 Scrapy

    2021-10-23 10:43:31
  • Python爬虫实例扒取2345天气预报

    2021-09-27 22:38:12
  • MySQL Group By用法

    2012-01-05 19:05:14
  • VS2015安装之后加装Sql server2014详细步骤

    2024-01-18 04:39:56
  • python 删除指定时间间隔之前的文件实例

    2023-07-19 17:58:38
  • 人工智能(AI)首选Python的原因解析

    2021-03-23 16:04:12
  • Mysql的基础使用之MariaDB安装方法详解

    2024-01-14 15:03:46
  • 利用sys.sysprocesses检查SqlServer的阻塞和死锁

    2011-11-03 17:24:11
  • 加密处理使密码更安全[CFS编码加密]

    2008-03-19 13:30:00
  • asp之家 网络编程 m.aspxhome.com