Ø  简介

本文主要记录微信小程序的开发笔记（下），主要包括以下内容：

1.  多媒体组件

2.  其他组件

3.  网络API

4.  多媒体API

5.  数据存取

6.  位置API

7.  设备API

8.  界面API

9.  WbUI

1.  多媒体组件

1)  image 组件

image 组件用于展示图片，可以展示本地图片，也可以展示网络图片。

1.  属性

1)  src: 用于设置本地图片或网络图片的路径。

2)  model: 用于设置图片裁剪的方式，参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

2.  事件

1)  bindload

图片加载完成后触发的事件。

2)  audio 组件

audio 组件用于播放音频，可以播放本地音频，也可以播放网络音频。

1.  属性

1)  src: 用于设置本地音频或网络音频的路径。

2)  controls: Boolean 类型，是否显示控制面板，默认为false。

3)  author: 设置音频的作者的名称。

4)  name: 设置音频名称。

5)  poster: 设置音频对应的封面图片地址。

2.  事件

1)  bindplay: 播放时触发的事件。

2)  bindpause: 暂停时触发的事件。

3.  控制音频

<audio id="myAudio" src="{{src}}" controls/>

onReady: function() {

    this.audioCtx = wx.createAudioContext("myAudio");

    this.audioCtx.setSrc(\'https://mini.mdingdang.com/SunshineGirl_moumoon.mp3\');

    this.audioCtx.play();

  },

  //播放

  audioPlay: function(e) {

    this.audioCtx.play();

  },

  //暂停

  audioPause: function(e) {

    this.audioCtx.pause();

  },

  //设置当前播放事件为100秒

  audio100: function(e) {

    this.audioCtx.seek(100);

  },

  //回到开头

  audioStart: function(e) {

    this.audioCtx.seek(0);

  }

3)  video 组件

video 组件用于播放视频，可以播放本地视频，也可以播放网络视频。可以使用内置API 选择本地的视频：wx.chooseVideo，参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html

1.  属性

1)  src: 用于设置本地视频或网络视频的路径。

2)  autoplay: Boolean 类型，是否自动播放，默认为false。

2.  事件

1)  binderror

加载视频文件错误时触发，比如路径不存在。

3.  打开和播放本地视频

打开本地视频使用 wx.chooseVideo() 方法，该方法主要参数如下：

1)  sourceType: 设置选择视频的目标类型，album: 从相册中选择；camera: 使用相机摄像后获取。

2)  camera: 设置摄像时使用是否使用前置摄像头或后置摄像头。

3)  maxDuration: 摄像最长的时间，单位为秒。

4)  success: 选择视频成功后调用的事件。

1.  应用示例

<button style="margin-top:30px;" bindtap="chooseVideo">选择视频</button>

<video style="margin-top:10px;width:300px;height:300px;" src="{{src}}"/>

chooseVideo: function(e) {

  var that = this;