微信小程序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 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
js 调整select 位置的函数
Feb 21 Javascript
js对象基础实例分析
Jan 13 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
利用JS实现数字增长
Jul 28 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
Angular 容器部署的方法
Apr 17 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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
做一个有下拉功能的留言版
2006/10/09 PHP
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php常见的魔术方法详解
2014/12/25 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
js不是基础的基础
2006/12/24 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
python调用shell的方法
2013/11/20 Python
Python 实现链表实例代码
2017/04/07 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
深入探究HTML5的History API
2015/07/09 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
四风问题对照检查材料整改措施
2014/09/27 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
职工年度考核评语
2014/12/31 职场文书
关于颐和园的导游词
2015/01/30 职场文书
父亲去世追悼词
2015/06/23 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python