小程序制作（超详解！！！）第四节 图片与声音

1.插入文件和声音

将图片和音频的文件夹复制到项目的根目录里。

这样打开项目就可以看到这两个文件夹了。

2.index.wxml

<view class="box">
  <view class="title">图片和声音</view>
  <view>
    <image src="{{imgSrc}}" bindtap="shengyin"></image>//src属性用于设置图片来源（路径）
           //imgSrc为数据绑定     bindtap为事件绑定（点击）
  </view>
</view>

3.index.js

将js原有的内容删除。

Page({
  data:{
    imgSrc:'/图片/logo.png'          //数据绑定中的图片链接
  },                                 //若有多个变量要有‘，’
  shengyin:function(){               //事件绑定
    let audio=wx.createInnerAudioContext();   //创建音频上下文（环境）
    audio.src='/音频/于泓 - 像你这样的大师.mp3'     //为源赋值，《十二生肖总动员》我的童年回忆
    audio.play();                    //播放音频
  }
})

点击图片就会有音乐响起。

4.总结

1.image组件

支持JPG、PNG、SVG格式，用src属性指定图片路径。

2.使用音频

首先要利用API函数wx.createlnnerAudioContext（）创建音频上下文，然后设置该上下文的src，并利用play（）函数播放音频。

3.数据绑定

WXML文件中的动态数据通过{{}}符号与JS文件中的数据进行绑定，这样JS中的数据就可以传给WXML文件。这种传递是单向的。

4.事件绑定

在WXML文件组件标签内利用“bind...=函数名”绑定组件事件与函数，并在JS文件中定义该事件函数。