微信小程序的API应用

橘子不知陈

已于 2024-04-15 11:41:31 修改

阅读量2.3k

点赞数 27

文章标签：微信小程序小程序

于 2024-04-08 11:01:19 首次发布

本文链接：https://blog.csdn.net/m0_74842053/article/details/137498323

版权

1.网络API

微信小程序处理的数据通常从后台服务器获取 , 再将处理过的结果保存到后台服务器 , 这就要求微信小程序要有与后台进行交互的能力。微信原生ＡＰＩ接口或第三方ＡＰＩ提供了各类接口实现前后端交互。

网络ＡＰＩ可以帮助开发者实现网络ＵＲＬ访问调用、文件的上传和下载、网络套接字的使用等功能处理。微信开发团队提供了１０个网络ＡＰＩ接口。

wx.request( Object ) 接口　用于发起HTTPS 请求。

wx.uploadFile(OBject) 接口　用于将本地资源上传到后台服务器

•ｗｘ.ｄｏｗｎｌｏａｄＦｉｌｅ(Ｏｂｊｅｃｔ) 接口　用于下载文件资源到本地

ｗｘ.ｃｏｎｎｅｃｔＳｏｃｋｅｔ(Ｏｂｊｅｃｔ) 接口　用于创建一个ＷｅｂＳｏｃｋｅｔ连接。

ｗｘ.ｓｅｎｄＳｏｃｋｅｔＭｅｓｓａｇｅ(Ｏｂｊｅｃｔ) 接口　用于实现通过ＷｅｂＳｏｃｋｅｔ连接发送数据。

ｗｘ.ｃｌｏｓｅＳｏｃｋｅｔ(Ｏｂｊｅｃｔ) 接口　用于关闭ＷｅｂＳｏｃｋｅｔ连接。

ｗｘ.ｏｎＳｏｃｋｅｔＯｐｅｎ(ＣａｌｌＢａｃｋ) 接口　用于监听ＷｅｂＳｏｃｋｅｔ连接打开事件。

ｗｘ.ｏｎＳｏｃｋｅｔＥｒｒｏｒ(ＣａｌｌＢａｃｋ) 接口　用于监听ＷｅｂＳｏｃｋｅｔ错误。

ｗｘ.ｏｎＳｏｃｋｅｔＭｅｓｓａｇｅ(ＣａｌｌＢａｃｋ) 接口　用于实现监听ＷｅｂＳｏｃｋｅｔ接收到服务器的消息事件。

ｗｘ.ｏｎＳｏｃｋｅｔＣｌｏｓｅ(ＣａｌｌＢａｃｋ) 接口　用于实现监听ＷｅｂＳｏｃｋｅｔ关闭

(1)　发起网络请求

ｗｘ . ｒｅｑｕｅｓｔ ( Ｏｂｊｅｃｔ ) 实现向服务器发送请求、获取数据等各种网络交互操作其相关参数如图

一个微信小程序同时只能有５个网络请求连接 , 并且是ＨＴＴＰＳ请求。

代码示例：

（1）

wxml:

<button type ="primary" bind:tap="getbaidutap">获取HTML数据</button>
<textarea value ='{{html}}' auto-heightmaxlength='0'></textarea>

js:

Page({
  data:{
    html:""
  },
  getbaidutap:function(){
    var that =this;
    wx.request({
      url:'http://www.baidu.com',
      data:{},
      header: {'Content-Type':'application/json'},
      success:function(res){
        console.log(res);
      that.setData({
        html:res.dat
      
      })
    
    }
  })
  
}
})

运行结果图：

（2）wxml：

<view>邮政编码：</view>
<input type="text" bindinput="input"placeholder='6位数邮政编码'/>
<button type="primary" bind:tap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>

js：

// .js代码
Page({
  data:{
    postcode:'',//查询邮政编码
    address:[],//邮政编码对应的地址
    errMsg:'',//错误信息
    error_code:-1//错误码
  },
  input:function(e){//输入事件
    this.setData({
      postcode:e.detail.value,
    })
    console.log(e.detail.value)
  },
  find:function(){//查询事件
    var postcode=this.data.postcode;
    if(postcode != null && postcode != " "){
  var self=this;
  //显示toast提示消息
  wx.showToast({
    title: '正在查询，请稍候。。。。',
    icon:'loading',
    duration:10000
  });
  wx:wx.request({
    url: 'https://v.juhe.cn/postcode/query',//第三方后台服务器
    data:{
      'postcode':postcode,
      'key':'0ff9bfccdf147476e067de994eb5496e'//第三方提供
    },
    header:{
      'content-type':'application/x-www-form-urlencoded'
    },
    method:'POST',//方法为POST
    success:function(res){
      wx.hideToast();//隐藏toast
      if(res.data.error_code==0){
        console.log(res);
        self.setData({
          errMsg:'',
          error_code:res.data.error_code,//错误代码
          address:res.data.result.list//获取到的数据
        })
      }
      else{
        self.setData({
          errMsg:res.data.reason || res.data.reason,//错误原因分析
          error_code:res.data.error_code
        })
      }
    }
  })
    }
  }
})

运行结果：

执行结果：

别的方法：

wxml：

<view>邮政编码:</view>
<input type="text" bindinput="input" placeholder='6位邮政编码'/>
<button type="primary" bind:tap="find">查询</button>
<block wx:for="{{address}}">
<block wx:for="{{item}}">
<text>{{item}}</text>
</block>
</block>

js;

Page({
  data:{
    postcode:'',//查询邮政编码
    address:[],//邮政编码对应的地址
    errMsg:'',//错误信息
    error_code:-1//错误码
  },
  input:function(e){//输入事件
    this.setData({
      postcode:e.detail.value,
    })
    console.log(e.detail.value)
  },
  find:function(){//查询事件
    var postcode=this.data.postcode;
    if(postcode != null && postcode != " "){
  var self=this;
  //显示toast提示消息
  wx.showToast({
    title: '正在查询，请稍候。。。。',
    icon:'loading',
    duration:10000
  });
  wx:wx.request({
    url: 'https://v.juhe.cn/postcode/query',//第三方后台服务器
    data:{
      'postcode':postcode,
      'key':'0ff9bfccdf147476e067de994eb5496e'//第三方提供
    },
    header:{
      'content-type':'application/x-www-form-urlencoded'
    },
    method:'POST',//方法为POST
    success:function(res){
      wx.hideToast();//隐藏toast
      if(res.data.error_code==0){
        console.log(res);
        self.setData({
          errMsg:'',
          error_code:res.data.error_code,//错误代码
          address:res.data.result.list//获取到的数据
        })
      }
      else{
        self.setData({
          errMsg:res.data.reason || res.data.reason,//错误原因分析
          error_code:res.data.error_code
        })
      }
    }
  })
    }
  }
})

运行结果图：

执行结果图：

（2）上传文件

ｗｘ . ｕｐｌｏａｄＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口用于将本地资源上传到开发者服务器 , 并在客户端发起一个ＨＴＴＰＳＰＯＳＴ请求, 其相关参数如图

通过ｗｘ . ｕｐｌｏａｄＦｉｌｅ ( Ｏｂｊｅｃｔ ), 可以将图片上传到服务器并显示。

示例代码：

wxml:

<button type="primary" bind:tap="uploadimage">上传图片</button>
<image src="{{image}}" mode="widthFix"/>

js:

Page({
  data:{
    img:null,
  },
  uploadimage:function(){
    var that=this;
    //选择图片
    wx.chooseImage(res)({
      success:function(res){
      var tempFilePaths=res.tempFilePaths
      upload(that,tempFilePaths);
    }
  })
  function upload(page,path){
    //显示toast提示消息
    wx.showToast({
      icon:'loading',
      title: '正在上传'
    }),
    wx.uploadFile({
      url:"http://localhost",
      filePath:path[0],
      name:'file',
      success:function(res){
        console.log(res);
        if(res.statusCode !=200){
          wx.showModal({
            title:'提示',
            content:'上传失败',
            showCancel:false
          })
          return;
        }
        var data =res.data
        page.setData({
          img:path[0]
        })
      },
      fail:function(e){
        console.log(e);
        wx.showModal({
          title: '提示',
          content: '上传失败',
        showCancel:false
        })
      },
      complete:function(){
        //隐藏Toast
        wx.hideToast();
      }
    })
  }
  }
})

运行结果图：

（3）　下载文件

ｗｘ . ｄｏｗｎｌｏａｄＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口用于实现从开发者服务器下载文件资源到本地 , 在客户端直接发起一个ＨＴＴＰＧＥＴ请求 , 返回文件的本地临时路径。其相关参数如图：

示例代码：

wxml：

<button type="primary" bind:tap="downloadimage">下载图像</button>
<image src="{{images}}" mode="widthFix" style="width: 90%;height: 500px;"></image>

js：

Page({
  data:{
    img:null
  },
  downloadimage:function(){
    var that=this;
    wx.downloadFile({
      url: 'http://localhost/1.jpg',//通过WAMP软件实现
      success:function(res){
        console.log(res)
        that.setData({
          img:res.tempFilePath
        })
      }
    })
  }
})

运行结果图：

2.多媒体API

多媒体ＡＰＩ主要包括图片ＡＰＩ、录音ＡＰＩ、音频播放控制ＡＰＩ、音乐播放控制ＡＰＩ等 , 其目的是丰富小程序的页面功能。

（1）　图片ＡＰＩ

图片ＡＰＩ实现对相机拍照图片或本地相册图片进行处理 , 主要包括以下４个ＡＰＩ接口 :

ｗｘ . ｃｈｏｏｓｅＩｍａｇｅ ( Ｏｂｊｅｃｔ ) 接口　用于从本地相册选择图片或使用相机拍照。

ｗｘ . ｐｒｅｖｉｅｗＩｍａｇｅ ( Ｏｂｊｅｃｔ ) 接口　用于预览图片。

ｗｘ . ｇｅｔＩｍａｇｅＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口　用于获取图片信息。

ｗｘ . ｓａｖｅＩｍａｇｅＴｏＰｈｏｔｏｓＡｌｂｕｍ ( Ｏｂｊｅｃｔ ) 接口　用于保存图片到系统相册。

１.选择图片或拍照

ｗｘ . ｃｈｏｏｓｅＩｍａｇｅ ( Ｏｂｊｅｃｔ ) 接口用于从本地相册选择图片或使用相机拍照。拍照时产生的临时路径在小程序本次启动期间可以正常使用 , 若要持久保存 , 则需要调用ｗｘ . ｓａｖｅＦｉｌｅ保存图片到本地。其相关参数如图：

示例代码:

wx.chooseImage({
  count:2,//默认值为9
  sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
  sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
  success:function(res){
    //返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性来显示图片
    var tempFilePaths=res.tempFilePaths
    var tempFiles=res.tempFiles
    console.log(tempFilePaths)
    console.log(tempFiles)
  }
})

若调用成功 , 则返回ｔｅｍｐＦｉｌｅＰａｔｈｓ和ｔｅｍｐＦｉｌｅｓ , ｔｅｍｐＦｉｌｅＰａｔｈｓ表示图片在本地临时文件路径列表。ｔｅｍｐＦｉｌｅｓ表示图片的本地文件列表 , 包括ｐａｔｈ和ｓｉｚｅ。

２.预览图片

ｗｘ . ｐｒｅｖｉｅｗＩｍａｇｅ ( Ｏｂｊｅｃｔ ) 接口主要用于预览图片 , 其相关参数如图：

示例代码：

wx.previewImage({
 //定义显示第二张
 current:"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
 urls:["http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/1.png",
"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/2.png",
"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/05/3.jpg"]
})

３.获取图片信息

ｗｘ . ｇｅｔＩｍａｇｅＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口用于获取图片信息 , 其相关参数如图：

示例代码：

wx.chooseImage({
  success:function(res){
    wx.getImageInfo({
      src: res.tempFilePaths[0],
      success:function(e){
        console.log(e.width)
        console.log(e.height)
      }
    })
  },
})

４.保存图片到系统相册

ｗｘ . ｓａｖｅＩｍａｇｅＴｏＰｈｏｔｏｓＡｌｂｕｍ ( Ｏｂｊｅｃｔ ) 接口用于保存图片到系统相册 , 需要得到用户授权ｓｃｏｐｅ . ｗｒｉｔｅＰｈｏｔｏｓＡｌｂｕｍ。其相关参数如图：

示例代码：

wx.chooseImage({
    success:function(res){
     wx.saveImageToPhotosAlbum({
    filePath:res.tempFilePaths[0],
     success:function(e){
console.log(e)
     }
 })
},
})

运行结果可以调出弹窗：

（2）　录音ＡＰＩ

录音ＡＰＩ提供了语音录制的功能 , 主要包括以下两个ＡＰＩ接口 :

ｗｘ . ｓｔａｒｔＲｅｃｏｒｄ ( Ｏｂｊｅｃｔ ) 接口　用于实现开始录音。

ｗｘ . ｓｔｏｐＲｅｃｏｒｄ ( Ｏｂｊｅｃｔ ) 接口　用于实现主动调用停止录音。

１.开始录音

ｗｘ . ｓｔａｒｔＲｅｃｏｒｄ ( Ｏｂｊｅｃｔ ) 接口用于实现开始录音。当主动调用ｗｘ . ｓｔｏｐＲｅｃｏｒｄ ( Ｏｂｊｅｃｔ ) 接口或者录音超过１分钟时 , 系统自动结束录音 , 并返回录音文件的临时文件路径。若要持久保存 , 则需要调用ｗｘ . ｓａｖｅＦｉｌｅ()接口。其相关参数如图：

２.停止录音

ｗｘ . ｓｔｏｐＲｅｃｏｒｄ ( Ｏｂｊｅｃｔ ) 接口用于实现主动调用停止录音。

示例代码：

wx.startRecord({
  success:function(res){
    var tempFilePath=tempFilePath
  },
  fail:function(res){
    //录音失败
  }
})
setTimeout(function(){
  //结束录音
  wx.stopRecord()},10000)

运行效果：

3音频播放控制ＡＰＩ

音频播放控制ＡＰＩ主要用于对语音媒体文件的控制 , 包括播放、暂停、停止及ａｕｄｉｏ组件的控制 , 主要包括以下３个ＡＰＩ :

ｗｘ . ｐｌａｙＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 接口　用于实现开始播放语音。

ｗｘ . ｐａｕｓｅＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 接口　用于实现暂停正在播放的语音。

ｗｘ . ｓｔｏｐＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 接口　用于结束播放语音。

１.播放语音

ｗｘ . ｐｌａｙＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 接口用于开始播放语音 , 同时只允许一个语音文件播放 , 如果前一个语音文件还未播放完 , 则中断前一个语音文件的播放。其相关参数如图：

示例代码:

wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        //录音完后立即播放
        filePath:tempFilePath,
        complete:function(){
          
        }
      })
    }
  })

２.暂停播放

ｗｘ . ｐａｕｓｅＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 用于暂停正在播放的语音。

示例代码：

 wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath: tempFilePath
      })
      setTimeout(function(){
        //暂停播放
        wx.pauseVoice()
      },5000)
    }
  })

再次调用ｗｘ . ｐｌａｙＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 播放同一个文件时 , 会从暂停处开始播放。如果想从头开始播放, 则需要先调用ｗｘ . ｓｔｏｐＶｏｉｃｅ(Ｏｂｊｅ cｔ)。

３.结束播放

ｗｘ . ｓｔｏｐＶｏｉｃｅ ( Ｏｂｊｅｃｔ ) 用于结束播放语音。

示例代码：

wx.startRecord({
    success:function(res){
      var tempFilePath=res.tempFilePath
      wx.playVoice({
        filePath:tempFilePath
      })
      setTimeout(function(){
        wx.stopVoice()
      },5000)
    }
  })

４音乐播放控制ＡＰＩ

音乐播放控制ＡＰＩ主要用于实现对背景音乐的控制 , 音乐文件只能是网络流媒体 , 不能是本地音乐文件。音乐播放控制ＡＰＩ主要包括以下８个ＡＰＩ:

ｗｘ . ｐｌａｙＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 接口　用于播放音乐。

ｗｘ . ｇｅｔＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙｅｒＳｔａｔｅ ( Ｏｂｊｅｃｔ ) 接口　用于获取音乐播放状态。

ｗｘ . ｓｅｅｋＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 接口　用于定位音乐播放进度。

ｗｘ . ｐａｕｓｅＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ () 接口　用于实现暂停播放音乐。

ｗｘ . ｓｔｏｐＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ () 接口　用于实现停止播放音乐。

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙ ( ＣａｌｌＢａｃｋ ) 接口　用于实现监听音乐播放。

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰａｕｓｅ ( ＣａｌｌＢａｃｋ ) 接口　用于实现监听音乐暂停。

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＳｔｏｐ ( ＣａｌｌＢａｃｋ ) 接口　用于实现监听音乐停止。

１ . 播放音乐

ｗｘ . ｐｌａｙＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 用于播放音乐 , 同一时间只能有一首音乐处于播放状态 , 其相关参数如图：

示例代码：

wx.playBackgroundAudio({
  dataUrl: 'http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3',
  title:'有一天',
  coverImgUrl:'http:///bmob-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg',
  success:function(res){
    console.log(res)//成功返回playBackgroundAudio：ok
  }
})

２ . 获取音乐播放状态

ｗｘ . ｇｅｔＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙｅｒＳｔａｔｅ ( Ｏｂｊｅｃｔ ) 接口用于获取音乐播放状态, 其相关参数如图：

接口调用成功后返回的参数如图：

示例代码：

wx.getBackgroundAudioPlayerState({
  success:function(res){
    var status=res.status
    var dataUrl=res.dataUrl
    var currentPosition=res.currentPosition
    var duration=res.duration
    var downloadPercent=res.downloadPercent
    console.log("播放状态："+status)
    console.log("音乐文件地址："+dataUrl)
    console.log("音乐文件当前播放位置："+currentPosition)
    console.log("音乐文件的长度："+duration)
    console.log("音乐文件的下载进度："+downloadPercent)
  }
})

３ . 控制音乐播放进度

ｗｘ . ｓｅｅｋＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 接口用于控制音乐播放进度 , 其相关参数如图：

示例代码：

wx.seekBackgroundAudio({
  position: 30,
})

４ . 暂停播放音乐

ｗｘ . ｐａｕｓｅＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ () 接口用于暂停播放音乐。

示例代码：

wx.playBackgroundAudio({
  dataUrl: '/music/a.mp3',
  title:'我的音乐',
  coverImgUrl:'images/poster.jpg',
  success:function(){
    console.log('开始播放音乐了');
  }
});
setTimeout(function(){
  console.log('暂停播放');
  wx.pauseBackgroundAudio();
},5000);//5秒后自动暂停

５ . 停止播放音乐

ｗｘ . ｓｔｏｐＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ () 接口用于停止播放音乐。

示例代码：

wx.playBackgroundAudio({
  dataUrl: '/music/a.mp3',
  title:'我的音乐',
  coverImgUrl:'images/poster.jpg',
  success:function(){
    console.log('开始播放音乐了');
  }
});
setTimeout(function(){
  console.log('暂停播放');
  wx.stopBackgroundAudio();
},5000);//5秒后自动停止

６ . 监听音乐播放

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰｌａｙ ( ＣａｌｌＢａｃｋ ) 接口用于实现监听音乐播放 , 通常被ｗｘ . ｐｌａｙＢａｃｋ￣ｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 方法触发 , 在ＣａｌｌＢａｃｋ中可改变播放图标。

示例代码：

wx.playBackgroundAudio({
  dataUrl: this.data.musicData.dataUrl,
  title:this.data.musicData.title,
  coverImgUrl:this.data.musicData.coverImgUrl,
  success:function(){
    wx.onBackgroundAudioStop(function(){
      that.setData({
        isplayingMusic:false
      })
    })
  }
})

７ . 监听音乐暂停

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＰａｕｓｅ ( ＣａｌｌＢａｃｋ ) 接口用于实现监听音乐暂停 , 通常被ｗｘ . ｐａｕｓｅ￣ＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ () 方法触发。在ＣａｌｌＢａｃｋ中可以改变播放图标。

８ . 监听音乐停止

ｗｘ . ｏｎＢａｃｋｇｒｏｕｎｄＡｕｄｉｏＳｔｏｐ ( ＣａｌｌＢａｃｋ ) 接口用于实现监听音乐停止 , 通常被音乐自然播放停止或ｗｘ . ｓｅｅｋＢａｃｋｇｒｏｕｎｄＡｕｄｉｏ ( Ｏｂｊｅｃｔ ) 方法导致播放位置等于音乐总时长时触发。在ＣａｌｌＢａｃｋ中可以改变播放图标 。

以上的综合案例：

wxml:

<view class="container">
<image class="bgaudio" src="{{changedImg? music.coverImg:'/images/ico_home.png'}}"/>
<view class="control-view">
<!-- 使用data-how定义一个0表示快退10秒 -->
<image src="/images/ico_days_selected.png"bindtap="onPositionTap"data-how="0"/>
<image src="/images/{{isPlaying? 'pause':'we'}}.jpg"bindtap="onAudioTap"/>
<image src="/images/ico_home.png"bindtap="onStopTap"/>
<!-- 使用data-how定义一个1表示快进10秒 -->
<image src="/images/ico_meditation_selected.png"bindtap="onPositionTap"data-how="1"/>
</view>
</view>

wxss:

.bgaudio{
    height: 350rpx;
    width: 350rdpx;
    margin-bottom: 100rpx;

  }
  .control-view image{
    height: 64rpx;
    width: 64rpx;
    margin: 30rpx;
  }

js:

Page({
  data:{
    //记录播放状态
    isPlaying:false,
    //记录covering，仅当音乐初始时和播放停止时，使用默认的图片。播放中和暂停时，都使用当前音乐的图片
     coverImg:"",
    changedImg:false,
    //音乐内容
    music:{
      "url":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/117e4a1b405195b18061299e2de89597.mp3",
      "title":"盛晓玫-有一天",
      "coverImg":"http://bmob-cdn-16488.b0.upaiyun.com/2018/02/09/f604297140c9681880cc3d3e581f7724.jpg"
    },
  },
  onLoad:function(){
    //页面加载时，注册监听事件
    this.onAudioState();
  },
  //点击播放或者暂停按钮时触发
  onAudioTap:function(event){
    if(this.data.isPlaying){
      //如果在正常播放状态，就暂停，并修改播放的状态
      wx.pauseBackgroundAudio();
    }else{
      //如果在暂停状态，就开始播放，并修改播放的状态
      let music=this.data.music;
      wx.playBackgroundAudio({
        dataUrl: music.url,
        title:music.title,
        coverImgUrl:music.coverImg
      })
    }
  },
  //点击即可停止播放音乐
  onStopTap:function(){
    let that=this;
    wx.playBackgroundAudio({
      success:function(){
        //改变coverImg和播放状态
        that.setData({isPlaying:false,changedImg:false});
      }
    })
  },
  //点击“快进10秒”或者“快退10秒”时，触发
  onPositionTap:function(event){
    let how =event.target.dataset.how;
    //获取音乐的播放状态
    wx.getBackgroundAudioPlayerState({
      success:function(res){
        //仅在音乐播放中，快进和快退才生效
        //音乐的播放状态，1表示播放中
        let status=res.status;
        if(status===1){
          //音乐的总时长
          let duration =res.duration;
          if(how==="0"){
            //注意:快退时，当前播放位置快退10秒小于0时，直接设置position为1，否则，直接减去10秒
            //快退达到的位置
            let position=currentPosition-10;
            if(position<0){
              position=1;
            }
            //执行快退
            wx.seekBackgroundAudio({
              position:position
            });
            //给出一个友情提示，在实际应用中，请删除！！！
            wx.showToast({title:"快退10s",duration:500 });
          }
          if(how==="1"){
            //注意：快进时，当前播放位置快进10秒后大于总时长时，直接设置position为总时长减1
            //快进达到的位置
            let position=currentPosition+10;
            if(position>duration){
              position=duration-1;
            }
            //执行快进
            wx.seekBackgroundAudio({
              position: position
            });
            //给出一个友情提示，在实际应用中，请删除！！！
            wx.showToast({ title: "快进10s",duration:500 });
          }
        }else{
          //给出一个友情提示，在实际应用中，请删除！！！
          wx.showToast({title: "音乐未播放",duration:800});
        }
      }
    })
  },
  //音乐播放状态
  onAudioState:function(){
    let that=this;
    wx.onBackgroundAudioPlay(function(){
      //当wxwx.playBackgroundAudio()执行时触发
      //改变coverImg和播放状态
      that.setData({isPlaying:true,changedImg:true});
      console.log("on play");
    });
    wx.onBackgroundAudioPause(function(){
      //当wxwx.pauseBackgroundAudio()执行时触发
      //仅改变播放状态
      that.setData({isPlaying:false});
      console.log("on pause");
    });
    wx.onBackgroundAudioStop(function() {
      //当音乐自行播放结束时触发
      //改变coverImg和播放状态
      that.setData({isPlaying:false,changedImg:false});
      console.log("on stop");
    });
  }
})

3.文件API

从网络上下载或录音的文件都是临时保存的 , 若要持久保存 , 需要用到文件ＡＰＩ。文件ＡＰＩ提供了打开、保存、删除等操作本地文件的能力 , 主要包括以下５个ＡＰＩ接口 :

ｗｘ . ｓａｖｅＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口　用于保存文件到本地 。

ｗｘ . ｇｅｔＳａｖｅｄＦｉｌｅＬｉｓｔ ( Ｏｂｊｅｃｔ ) 接口　用于获取本地已保存的文件列表。

ｗｘ . ｇｅｔＳａｖｅＦｉｌｅＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口　用于获取本地文件的文件信息。

ｗｘ . ｒｅｍｏｖｅＳａｖｅＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口　用于删除本地存储的文件。

ｗｘ . ｏｐｅｎＤｏｃｕｍｅｎｔ ( Ｏｂｊｅｃｔ ) 接口　用于新开页面打开文档 , 支持格式 : ｄｏｃ、ｘｌｓ、ｐｐｔ、ｐｄｆ、ｄｏｃｘ、ｘｌｓｘ、ｐｐｔｓ 。

１.保存文件

ｗｘ . ｓａｖｅＦｉｌｅ ( Ｏｂｊｅｃｔ ) 用于保存文件到本地, 其相关参数如图：

示例代码：

saveImg:function(){
  wx.chooseImage({
    count:1,
    sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有
    sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有
    success:function(res){
      var tempFilePaths=res.tempFilePaths[0]
      wx.saveFile({
        tempFilePath:tempFilePaths,
        success:function(res){
          var saveFilePath=res.saveFilePath;
          console.log(saveFilePath)
        }
      })
      
    }
  })
}

２.获取本地文件列表

ｗｘ . ｇｅｔＳａｖｅｄＦｉｌｅＬｉｓｔ ( Ｏｂｊｅｃｔ ) 接口用于获取本地已保存的文件列表 , 如果调用成功 , 则返回文件的本地路径、文件大小和文件保存时的时间戳 ( 从１９７０ / ０１ / ０１０８ : ００ : ００到当前时间的秒数) 文件列表。其相关参数如图：

示例代码：

wx.getSavedFileList({
      success:function(res){
         that.setData({
            fileList:res.fileList
     })
       }
        })

３.获取本地文件的文件信息

ｗｘ . ｇｅｔＳａｖｅＦｉｌｅＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口用于获取本地文件的文件信息 , 此接口只能用于获取已保存到本地的文件 , 若需要获取临时文件信息 , 则使用ｗｘ . ｇｅｔＦｉｌｅＩｎｆｏ ( Ｏｂｊｅｃｔ)接口。其相关参数如图：


wx.chooseImage({
  count:1,
  sizeType:['original','compressed'],
  sourceType:['album','camera'],
  success:function(res){
    var tempFilePaths = res.tempFilePaths[0]
    wx.saveFile({
      tempFilePath:tempFilePaths,
      success:function(res){
        var saveFilePath = res.saveFilePath;
        wx.getSavedFileInfo({
          filePath:saveFilePath,
          success:function(res){
            console.log(res.size)
          }
        })
      }
    })
  }
})

４.删除本地文件

ｗｘ . ｒｅｍｏｖｅＳａｖｅＦｉｌｅ ( Ｏｂｊｅｃｔ ) 接口用于删除本地存储的文件 , 其相关参数如图;

示例代码：


wx.getSavedFileList({
  success:function(res){
    if(res.fileList.Length > 0 ){
      wx.removeSavedFile({
        filePath:res.fileList[0].filePath,
        complete:function(res){
          console.log(res)
        }
      })
    }
  }
})

５.打开文档

ｗｘ . ｏｐｅｎＤｏｃｕｍｅｎｔ ( Ｏｂｊｅｃｔ ) 接口用于新开页面打开文档 , 支持格式有ｄｏｃ、ｘｌｓ、ｐｐｔ、ｐｄｆ、ｄｏｃｘ、ｘｌｓｘ、ｐｐｔｘ, 其相关参数如图：

示例代码：


wx.downloadFile({
  url: "http://localhost/fm2.pdf",
  success:function(res){
    var tempFilePath = res.tempFilePath;
    wx.openDocument({
      filePath: tempFilePath,
      success:function(res){
        console.log("打开成功")
      }
    })
  }
})

4.本地数据及缓存API

小程序提供了以键值对的形式进行本地数据缓存功能 , 并且是永久存储的 , 但最大不超过１０ＭＢ , 其目的是提高加载速度。数据缓存的接口主要有４个 :

ｗｘ . ｓｅｔＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ ) 或ｗｘ . ｓｅｔＳｔｏｒａｇｅＳｙｎｃ ( ｋｅｙ , ｄａｔａ ) 接口　用于设置缓存数据。

ｗｘ . ｇｅｔＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ ) 或ｗｘ . ｇｅｔＳｔｏｒａｇｅＳｙｎｃ ( ｋｅｙ ) 接口　用于获取缓存数据。

ｗｘ . ｒｅｍｏｖｅＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ ) 或ｗｘ . ｒｅｍｏｖｅＳｔｏｒａｇｅＳｙｎｃ ( ｋｅｙ ) 接口　用于删除指定缓存数据 。

ｗｘ . ｃｌｅａｒＳｔｏｒａｇｅ () 或ｗｘ . ｃｌｅａｒＳｔｏｒａｇｅＳｙｎｃ () 接口　用于清除缓存数据。

其中 , 带Ｓｙｎｃ后缀的为同步接口 , 不带Ｓｙｎｃ后缀的为异步接口。

１　保存数据

１.ｗｘ.ｓｅｔＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)

ｗｘ . ｓｅｔＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ ) 接口将数据存储到本地缓存接口指定的ｋｅｙ中 , 接口执行后会覆盖原来ｋｅｙ对应的内容。其参数如表：

示例代码：

//js
wx.setStorage({
  kry:'name',
  data:'sdy',
  success:function(res){
    console.log(res)
  }
})

２.ｗｘ.ｓｅｔＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ,ｄａｔａ)

wx.setStorageSync('age','25')

• ｗｘ . ｓｅｔＳｔｏｒａｇｅＳｙｎｃ ( ｋｅｙ , ｄａｔａ ) 是同步接口 , 其参数只有ｋｅｙ和ｄａｔａ。

２　获取数据

１.ｗｘ.ｇｅｔＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)

ｗｘ . ｇｅｔＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ ) 接口是从本地缓存中异步获取指定ｋｅｙ对应的内容。其相关参数如图：

wx.setStorage({
  kry:'name',
  success:function(res){
    console.log(res.data)
  },
})

２.ｗｘ.ｇｅｔＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ)

ｗｘ.ｇｅｔＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ)从本地缓存中同步获取指定ｋｅｙ对应的内容。其参数只有ｋｅｙ。

//js
try{
  var value = wx.getStorageSync('age')
  if(value){
    console.log("获取成功" + value)
  }
}catch(e){
  console.log("获取失败")
}

３　删除数据

１.ｗｘ.ｒｅｍｏｖｅＳｔｏｒａｇｅ(Ｏｂｊｅｃｔ)

ｗｘ . ｒｅｍｏｖｅＳｔｏｒａｇｅ ( Ｏｂｊｅｃｔ) 接口用于从本地缓存中异步移除指定ｋｅｙ。其相关参数如图：

示例代码：

wx.removeStorage({
  key: 'name',
  success:function(res){
    console.log("删除成功")
  },
  fail:function(){
    console.log("删除失败")
  }
})

２.ｗｘ.ｒｅｍｏｖｅＳｔｏｒａｇｅＳｙｎｃ(ｋｅｙ)

ｗｘ . ｒｅｍｏｖｅＳｔｏｒａｇｅＳｙｎｃ ( ｋｅｙ ) 接口用于从本地缓存中同步删除指定ｋｅｙ对应的内容。其参数只有ｋｅｙ。

示例代码:

try{
  wx.removeStorageSync('name')
}catch(e){
  //Do something when catch error
}

5 位置信息API

ｗｘ . ｃｈｏｏｓｅＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 接口　用于选择位置信息。

ｗｘ . ｏｐｅｎＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 接口　用于通过地图显示位置。

１　获取位置信息

ｗｘ . ｇｅｔＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 接口用于获取当前用户的地理位置、速度 , 需要用户开启定位功能 , 当用户离开小程序后 , 无法获取当前的地理位置及速度 , 当用户点击“显示在聊天顶部” 时 , 可以获取到定位信息, 其相关参数如图：

ｗｘ . ｇｅｔＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 调用成功后, 返回的参数如图：

//js
wx.getLocation({
  type:'wgs84',
  success:function(res){
    console.log("经度" + res.longitude);
    console.log("纬度" + res.latitude);
    console.log("速度" + res.longitude);
    console.log("位置的精确度" + res.accuracy);
    console.log("水平精确度" + res.horizontalAccuracy);
    console.log("垂直精确度" + res.verticalAccuracy);
  },
})

运行结果图：

２　选择位置信息

ｗｘ . ｃｈｏｏｓｅＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 接口用于在打开的地图中选择位置, 用户选择位置后可返回当前位置的名称、地址、经纬度信息。其相关参数如图：

ｗｘ . ｃｈｏｏｓｅＬｏｃａｔｉｏｎ ( Ｏｂｊｅｃｔ ) 调用成功后, 返回的参数如图：

//js
wx.chooseLocation({
  success:function(res){
    console.log("位置的名称" + res.name);
    console.log("位置的地址" + res.address);
    console.log("位置的经度" + res.longitude);
    console.log("位置的纬度" + res.latitude);
  },
})

运行效果图：

３　显示位置信息

ｗｘ.ｏｐｅｎＬｏｃａｔｉｏｎ(Ｏｂｊｅｃｔ)接口用于在微信内置地图中显示位置信息, 其参数如图：

//js
wx.getLocation({
  type:'gcj02',
  success:function(res){
    var latitude = res.latitude
    var longitude = res.longitude
    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale:10,
      name:'智慧国际酒店',
      address:'西安市长安区西长安区300号'
    })
  }
})

运行效果图：

6 设备相关API

ｗｘ . ｍａｋｅＰｈｏｎｅＣａｌｌ ( Ｏｂｊｅｃｔ ) 接口　用于拨打电话。

ｗｘ . ｓｃａｎＣｏｄｅ ( Ｏｂｊｅｃｔ ) 接口　用于扫描二维码。

１　获取系统信息

ｗｘ . ｇｅｔＳｙｓｔｅｍＩｎｆｏ ( Ｏｂｊｅｃｔ ) 接口、ｗｘ . ｇｅｔＳｙｓｔｅｍＩｎｆｏＳｙｎｃ()接口分别用于异步和同步获取系统信息。其相关参数如图：

ｗｘ . ｇｅｔＳｙｓｔｅｍＩｎｆｏ () 接口或ｗｘ . ｇｅｔＳｙｓｔｅｍＩｎｆｏＳｙｎｃ () 接口调用成功后, 返回系统相关如下图所示:

//js
wx.getSystemInfo({
  success:function(res){
    console.log("手机型号" + res.model);
    console.log("设备像素比" + res.pixelRatio);
    console.log("窗口的宽度" + res.windowWidth);
    console.log("窗口的高度" + res.windowHeight);
    console.log("微信的版本号" + res.version);
    console.log("操作系统版本" + res.system);
    console.log("客户端平台" + res.platform);
  },
})

运行结果：

２　网络状态

１.获取网络状态

ｗｘ . ｇｅｔＮｅｔｗｏｒｋＴｙｐｅ ( Ｏｂｊｅｃｔ ) 用于获取网络类型, 其相关参数如图:

//js
wx.getNetworkType({
  success:function(res){
    console.log(res.networkType)
  },
})

如果ｗｘ . ｇｅｔＮｅｔｗｏｒｋＴｙｐｅ ( ) 接口被成功调用 , 则返回网络类型包 , 有ｗｉｆｉ、２Ｇ、３Ｇ、４Ｇ、ｕｎｋｎｏｗｎ ( Ａｎｄｒｏｉｄ下不常见的网络类型 ) 、ｎｏｎｅ ( 无网络 ) 。

２.监听网络状态变化

ｗｘ.ｏｎＮｅｔｗｏｒｋＳｔａｔｕｓＣｈａｎｇｅ(ＣａｌｌＢａｃｋ)接口用于监听网络状态变化, 当网络状态变化时,返回当前网络状态类型及是否有网络连接。.

//js
wx.onNetworkStatusChange(function(res){
  console.log("网络是否连接" + res.isConnected)
  console.log("变化后的网络类型" + res.networkType)
})

３　拨打电话

ｗｘ . ｍａｋｅＰｈｏｎｅＣａｌｌ ( Ｏｂｊｅｃｔ ) 接口用于实现调用手机拨打电话 , 其相关参数如图：

//js
wx.makePhoneCall({
  phoneNumber: '15350265164',
})

４　扫描二维码

ｘ . ｓｃａｎＣｏｄｅ (Ｏｂｊｅｃｔ)接口用于调起客户端扫码界面, 扫码成功返回相应的内容, 其相关参数如图：

扫码成功后 , 返回的数据如图：

//js
wx.scanCode({
  success:(res) => {
    console.log(res.result)
    console.log(res.scanType)
    console.log(res.charSet)
    console.log(res.path)
  }
})
wx.scanCode({
  onlyFromCamera:true,
  success:(res) => {
    console.log(res)
  }
})