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


Posted in Javascript onApril 07, 2017

一、界面的生命周期

/**
   * 监听页面加载,
   *  页面加载中
   */ 
   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中,此文件放的是全局函数!

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

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

Javascript 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 #Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
js时间查询插件使用详解
Apr 07 #Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 #Javascript
js简单实现网页换肤功能
Apr 07 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
php curl_init函数用法
2014/01/31 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python 解析XML文件
2009/04/15 Python
利用python获得时间的实例说明
2013/03/25 Python
python中threading超线程用法实例分析
2015/05/16 Python
简述Python中的进程、线程、协程
2016/03/18 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Python简单I/O操作示例
2019/03/18 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
J2EE系统只能是基于web
2015/09/08 面试题
个人总结与自我评价2015
2015/03/11 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
答辩状格式范本
2015/05/22 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis