当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序page的生命周期和音频播放及监听实例详解

微信小程序page的生命周期和音频播放及监听实例详解

2018年06月06日  | 移动技术网IT编程  | 我要评论

一、界面的生命周期

 /**
   * 监听页面加载，
   *  页面加载中
   */ 
   onload:function(){
     var _this = this
      console.log('index---------onload()')
      /**
       * 监听音乐播放
       */
      wx.onbackgroundaudioplay(function() {
       console.log('onbackgroundaudioplay')
      }),
   
      /**
       * 监听音乐暂停
       */
      wx.onbackgroundaudiopause(function() {
       console.log('onbackgroundaudiopause')
      }),
   
      /**
       * 监听音乐停止
       */
      wx.onbackgroundaudiostop(function() {
       console.log('onbackgroundaudiostop')
       util.playaudio()    
    })
   },
    /**
    * 监听页面显示，
    *  当从当前页面调转到另一个页面
    *  另一个页面销毁时会再次执行
    */
   onshow: function() {
    console.log('index---------onshow()')
   },
   /**
    * 监听页面渲染完成
    *  完成之后不会在执行
    */
   onready: function() {
    console.log('index---------onreaday()');
   },
   /**
    * 监听页面隐藏
    *  当前页面调到另一个页面时会执行
    */
   onhide: function() {
    console.log('index---------onhide()')
   },
   /**
    * 当页面销毁时调用
    */
   onunload: function() {
    console.log('index---------onunload')
   }

二、eg：使用播放音乐的系统方法

　　wx.playbackgroundaudio（）

　　需要调用监听音乐的相关操作时，需要在onload中进行（在标题一中）

function playaudio(){
    wx.playbackgroundaudio({
    dataurl: 'http://m2.music.126.net/oo27f-6xz2_jmv1ga8wzla==/1319413953349380.mp3',
    title:'blue night',
    coverimgurl:'http://pic.58pic.com/58pic/15/15/32/43x58picge2_1024.jpg',
    success: function(res){
     // success
     console.log("ok")
    },
    fail: function(res) {
     // fail
     console.log("fail")
    },
    complete: function(res) {
     // complete
     console.log("ok")
    }
   })
}

三、号外：全局函数的声明使用

util.playaudio()方法是在文件util.js中，此文件放的是全局函数！

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网