• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 微信小程序page的生命周期和音频播放及监听实例详解

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了page生命周期,微信小程序page,小程序page,微信公众号 homepage,pageadmin 微信等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、界面的生命周期

 /**
   * 监听页面加载,
   *  页面加载中
   */ 
   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')
   }    
</div>

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

  wx.playBackgroundAudio()
</div>

  需要调用监听音乐的相关操作时,需要在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")
    }
   })
}
</div>

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

util.playAudio()方法是在文件util.js中,此文件放的是全局函数!

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11Bootstrap按钮组简单实现代码
  • 2017-05-11js监听input输入框值的实时变化实例
  • 2017-05-11Nodejs 发送Post请求功能(发短信验证码例子)
  • 2017-05-11JavaScript使用正则表达式获取全部分组内容的方法示例
  • 2017-05-11从零开始学习Node.js系列教程之设置HTTP头的方法示例
  • 2017-05-11js实现移动端微信页面禁止字体放大
  • 2017-05-11jquery实现input框获取焦点的简单实例
  • 2017-05-11javascript 的变量、作用域和内存问题
  • 2017-05-11vue指令以及dom操作详解
  • 2017-05-11Bootstrap进度条实现代码解析

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • nodejs获取微信小程序带参数二维码实现代码
    • jQuery和CSS仿京东仿淘宝列表导航菜单
    • 微信小程序 wx:for的使用实例详解
    • 详解bootstrap的modal-remote两种加载方式【强化】
    • js将字符串中的每一个单词的首字母变为大写其余均为小写
    • 正则表达式基本语法及表单验证操作详解【基于JS】
    • jQuery自定义元素右键点击事件(实现案例)
    • 详解Angularjs 如何自定义Img的ng-load 事件
    • Node.js发送HTTP客户端请求并显示响应结果的方法示例
    • Vue.js实战之使用Vuex + axios发送请求详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有