微信小程序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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
详解node中创建服务进程
May 09 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
vue.js单文件组件中非父子组件的传值实例
Sep 13 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
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
简单实现js进度条加载效果
2020/03/25 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python通过post提交数据的方法
2015/05/06 Python
python实现识别相似图片小结
2016/02/22 Python
python实现一组典型数据格式转换
2018/12/15 Python
python实现与redis交互操作详解
2020/04/21 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
师范教师毕业鉴定
2014/01/13 职场文书
公司2014年度工作总结
2014/12/10 职场文书
2015年仓库工作总结
2015/04/09 职场文书
聘用合同范本
2015/09/21 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
《西门豹》教学反思
2016/02/23 职场文书