微信小程序开发基础 图片与声音

设计一个小程序，小程序运行后显示一张图，点击图片会发出声音。
实现效果：

各页面源代码：

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

image组件
支持JPG、PNG、SVG格式，用src属性指定图片的路径。
使用音频
首先要利用API函数wx.createInnerAudioContext()创建音频上下文，然后设置该上下文的src，并利用play()函数播放音频。
数据绑定
WXML文件中的动态数据通过{{}}符号与JS文件中的数据进行绑定，这样JS中的数据就可以传给WXML文件。这种传递是单向的。
事件绑定
在WXML文件组件标签内利用“bind…=函数名”绑定组件事件与函数，并在JS文件中定义
该事件函数。