微信开发者工具的使用入门级1.5

案例描述：设计一个小程序，小程序运行后显示一张猫图，点击猫图后会发出猫叫的声音。

案例名称：图片与声音

实现效果：首先屏幕上会显示一张猫图，点击猫图后猫就会发出叫声

1.需要把用到的文件拷贝到该项目的文件夹下面（这里我们用到的是猫叫的音频和猫的图片，大家可以自行选择其他图片和音频，总之达到我们最终的目的就行了），代码如下

 

 

let audio=wx.creatInnerAudioContext()创建音频上下文，直接调用小程序中的函数wx.creatInnerAudioContext()后面的分号加不加都是无所谓的。

audio.src='路径'对元进行赋值。

播放文件audio.play()直接调用play函数

2.要点

本案例主要涉及image图片组件的使用方法，音频的创建和使用方法，以及数据和事件的绑定和实现方法。

1️⃣：image组件

支持jpg，png，svg格式，用src属性指定图片的路径。

2️⃣：使用音频

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

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

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

重点！

1.image组件用来设置图片

2.image组件支持JPG，PNG，SVG格式，用src属性指定图片的路径

3.image组件的src属性值既可以在WXML文件中直接给出，也可以通过数据绑定的方式在JS文件中给出

4.API函数wx.createInnerAudioContext()用于创建音频上下文对象

5.使用音频时，首先要利用API函数wx.createInnerAudioContext()创建音频上下文，然后设置该上下文的源文件src，并利用play函数播放音频。

6. WXML文件中的动态数据通过｛｛｝｝符号与JS文件中的数据进行绑定，这样JS中的数据就可以传给WXML文件。

7.数据绑定的数据传递方向是单向的

8.在WXML中绑定的数据，需要通过JS文件中的页面注册函数Page（）的对象参数属性data进行初始化。

9.对象属性的赋值是通过：符号来实现的。

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

11.定义事件函数时，使用的关键词是function

12.事件绑定实现了信息由视图层到逻辑层的传递