小程序引用vant+播放单词

小程序引用vant+播放单词

本人专注使用云开发，实现一个前端可以做后端以及整个项目的部署与上线。
如果觉得我讲的好就可以给我点个赞。也可以加我微信了解详情。
微信：lookingcloud1314（触云可及）

一。小程序引用vant
1.初始化项目文件 添加 package.json 文件，须是在项目文件下打开cmd

npm init -y

2.安装依赖 执行下面两条指令

npm i @vant/weapp -S --production
npm i miniprogram-sm-crypto --production

3.修改 app.json ，将 app.json 中的 “style”: “v2” 去除。
4. 修改添加 project.config.json

"packNpmManually": flase,
"packNpmRelationList": [
{
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./miniprogram/"
}]

5. 构建 npm 我们点击左上角的工具栏
   

6. 然后点击右上角的详情—本地设置----使用npm模块
   

7. 使用组件
   在全局或者页面json文件里面注册一个按钮，然后使用它。

这里以按需引入为例
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

参考原文：https://blog.csdn.net/qq_44890362/article/details/122288546

二.播放单词，背景播放

click: function (event) {
    let InnerAudioContext = wx.createInnerAudioContext()
    InnerAudioContext.autoplay = true
    InnerAudioContext.src ='https://dict.youdao.com/dictvoice?audio='+this.data.show_word.word+'&type=2';
    InnerAudioContext.play();
}

这里我们使用有道词典的接口 ：https://dict.youdao.com/dictvoice?audio=word&type=2