WeChat Mini Program Development Notes 2 Pictures and Sound

Design a small program. After the small program is running, a picture is displayed. Clicking on the picture will make a sound.
Realization effect:

source code of each page:

<!--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;
}

The image component
supports JPG, PNG, and SVG formats, and uses the src attribute to specify the path of the image.
Using audio
First, use the API function wx.createInnerAudioContext () to create an audio context, then set the src of the context, and use the play () function to play the audio.
Data binding
The dynamic data in the WXML file is bound to the data in the JS file through the {{}} symbol, so that the data in the JS can be passed to the WXML file. This transmission is unidirectional.
Event binding
Use “bind… = function name” in the WXML file component tag to bind component events and functions, and define
the event function in the JS file .