WeChatミニプログラム開発ノート2写真とサウンド

小さなプログラムをデザインする小さなプログラムが実行されると、画像が表示され、画像をクリックすると音が鳴ります。
実現効果：

各ページのソースコード：

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

画像コンポーネント
はJPG、PNG、SVG形式をサポートし、src属性を使用して画像のパスを指定します。
オーディオの使用
まず、API関数wx.createInnerAudioContext（）を使用してオーディオコンテキストを作成してから、コンテキストのsrcを設定し、play（）関数を使用してオーディオを再生します。
データバインディング
WXMLファイル内の動的データは、{{}}記号を介してJSファイル内のデータにバインドされるため、JS内のデータをWXMLファイルに渡すことができます。この送信は単方向です。
イベントのバインド
WXMLファイルのコンポーネントタグで「bind…=関数名」を使用して、コンポーネントのイベントと関数をバインドし、JSファイルで
イベント関数を定義します。