Diseñe un programa pequeño. Después de que el programa pequeño se esté ejecutando, se mostrará una imagen. Al hacer clic en la imagen se emitirá un sonido.
Efecto de realización:
código fuente de cada página:
<!--index.wxml-->
<view class="box">
<view class="title">图片和声音</view>
<view>
<image src="{{imgScr}}" bindtap="tapturtle"></image>
</view>
</view>
//index.js
//获取应用实例
Page({
data: {
imgScr:"/早.gif"
},
//事件处理函数
tapturtle:function(){
let audio=wx.createInnerAudioContext();
audio.src='/你好.m4a';
audio.play();
}
})
/**app.wxss**/
.box{
border: 1px solid silver;
margin: 20rpx;
padding: 20rpx;
}
.title{
font-size: 25px;
text-align: center;
margin-bottom: 15px;
color:palevioletred;
}
El componente de imagen
admite los formatos JPG, PNG y SVG, y utiliza el atributo src para especificar la ruta de la imagen.
Uso de audio
Primero, use la función API wx.createInnerAudioContext () para crear un contexto de audio, luego configure el src del contexto y use la función play () para reproducir el audio. Enlace de datos Los datos dinámicos en el archivo WXML están
vinculados
a los datos en el archivo JS a través del símbolo {{}}, de modo que los datos en el archivo JS se pueden pasar al archivo WXML. Esta transmisión es unidireccional. Enlace de
eventos
Utilice "bind ... = nombre de función" en la etiqueta del componente del archivo WXML para enlazar eventos y funciones de los componentes, y defina
la función del evento en el archivo JS .
