微信小程序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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
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
js玩一玩WSH吧
2007/02/23 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python调用webservice接口的实现
2019/07/12 Python
python实现简单银行管理系统
2019/10/25 Python
wxPython实现列表增删改查功能
2019/11/19 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
药学专业个人的自我评价
2013/12/31 职场文书
工商管理本科生求职信
2014/07/13 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
微信搭讪开场白
2015/05/28 职场文书
永远是春天观后感
2015/06/12 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
部门主管竞聘书
2015/09/15 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
Python 内置函数速查表一览
2021/06/02 Python
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android