微信小程序開發基礎 圖片與聲音

設計一個小程序，小程序運行後顯示一張圖，點擊圖片會發出聲音。
實現效果：

各頁面源代碼：

<!--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文件中定義
該事件函數。