Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use vue3 to realize a person's meow to communicate with Mini Program", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use vue3 to communicate with one person on Mini Program".

Preface

It is believed that many cat owners want to communicate with their cats. When cats meow with different sounds, they usually ask them what's wrong, whether they are hungry or not. I have also searched for pet translation software, and now I will implement one by myself [manual dog head].

WeChat Mini Programs does not support direct use of vue for development, but there are already many solutions in the industry to support the development of cross-end applications with various development frameworks.

Taro version 3.0 began to support using Vue3 for development, so use Taro to implement our WeChat Mini Programs.

Initialize the project

For the detailed use of Taro, please refer to the official documentation. Install @ tarojs/cli globally first.

Npm install-g @ tarojs/cli

After successful installation, use the taro command to create the template project:

Taro init catApp

Vue3-nutUI framework is chosen here, which is not as functional as taro-ui, but taro-ui only supports react, so we have no choice but to use it.

Design

After all, there is no visual picture, everything can only rely on their own.

It is mainly composed of two functions:

Enter what you want to say to the cat and turn it into Meow to play it.

Record, record the meow, convert it to text, or play the recording

Code implementation

Demand loading

The vue3-nutUI framework is introduced on demand, which was already introduced on demand when initializing the project. In app.js, you can introduce the components needed by the project on demand.

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 (Avatar) .use (Input) export default App play audio

When you enter what you want to say to the cat owner and convert it to Meow, if you want to play it, you have to use the playback audio interface provided by Taro. Audio playback now uses the official more recommended Taro.createInnerAudioContext interface, and the original Taro.stopVoice and Taro.playVoice are no longer maintained.

Const innerAudioContext = Taro.createInnerAudioContext (); Taro.setInnerAudioOption ({obeyMuteSwitch: false,}); innerAudioContext.src = 'xxx.mp3';innerAudioContext.play (); innerAudioContext.onPlay (() = > {console.log (' start playback')}) innerAudioContext.onEnded (() = > {console.log ('playback end')})

ObeyMuteSwitch configuration is (effective only in iOS) whether to follow the mute switch, set to false, even in mute mode, can also play sound, the default is true, did not pay attention here, confused for a long time, I thought there was something wrong with my own audio playback, but it was muted.

Recording

To record a cat owner, you need to use the Taro.getRecorderManager recording interface.

Const recorderManager = Taro.getRecorderManager (); recorderManager.onStart () = > {console.log ("recorder start");}); recorderManager.onStop ((res) = > {console.log ("recorder stop", res); const {tempFilePath, duration} = res / / tempFilePath is the temporary path to the recording file / / duration is the recording duration / / when the recording file address is set here, you can play the recording innerAudioContext.src = tempFilePath; innerAudioContext.play ();}); long press the event

The recording may be used to start the recording on time for a long time and finish the recording when you let go. There is no long press event for buttons in the vue3-nutUI framework, so you need to use the longpress event natively provided by Mini Program, which is triggered when the 350ms is exceeded after the finger is touched, and the tap event is not triggered. If you want to let go of the recording, you need to combine the touchend event to complete the need to press the recording for a long time and let go.

Recording operation and debugging

The implementation of the npm run dev:weapp project, will always listen to file changes and real-time compilation into Mini Program, and then open Wechat developer tools, import the project, select to open the catApp root directory, you can preview.

At this point, I believe you have a better understanding of "how to use vue3 to communicate with one person on Mini Program". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.