• Background: The home page of the project launched the elderly care mode, which not only enlarged the font, but also required the voice to announce the clicked module name when clicking.

  • Solution: wechat simultaneous interpretation, official website document address

  • Specifically used in mpVUE project:

  1. Introduce plug-ins in app.json
{... "plugins": { ... "WechatSI": {"version": "0.0.7", "provider": "wx069BA97219f66d99"}}Copy the code

2. Encapsulate the text-to-speech method in the utility class js utils/index.js

// const WechatSI = requirePlugin("WechatSI") function playTalk(url = ") {if (! Url) {return} console.log(' Voice file path: ', url) play(url) } function play(tempFilePath = '') { const innerAudioContext = wx.createInnerAudioContext() innerAudioContext.autoplay = true innerAudioContext.src = tempFilePath innerAudioContext.onPlay(() => { The console. The log (' played ')}) innerAudioContext. OnError ((res) = > {the console. The log (res) errMsg) console. The log (res) errCode)})} export  function getTalkUrl(content = '') { WechatSI.textToSpeech({ lang: 'zh_CN', content: content, success: (res) => {console.log(' simultaneous interpretation res', res) if (res.retcode == 0) {playTalk(res.filename)}}, fail: (err) => { console.log('fail', err) } }) }Copy the code

3. Import and invoke

  • import { getTalkUrl } from ‘.. /.. /utils/index’
  • Call from vue file:
. methods: { handleItem(content) { console.log('content', content) if (content) { getTalkUrl(content) } } } ...Copy the code

4. Log in to the wechat public platform and add the wechat simultaneous interpretation plug-in

5. Go to Development Management > Development Settings > Server Domain and add the request domain name:https://ae.qq.weixin.com