一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------onload()') /** * 监听音乐播放 */ wx.onBackgroundAudioPlay(function() { console.log('onBackgroundAudioPlay') }), /** * 监听音乐暂停 */ wx.onBackgroundAudioPause(func

今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该组件不再维护.就百度了一下,还好有另一种方式,使用 InnerAudioContext 来实现音频播放 2.界面预览    点击播放,播放按钮改变为暂停,播放后展示进度条,可 拖动/点击 进度条实现进度控制,可设置倍速 没有UI设计,所以界面很丑,界面后续完善,功能实现就行啦 3.界面代码 WXML

先来个效果图韵下味: 需求: 音频的播放,暂停,中间按钮状态的变化,播放时实时更新播放进度: 前进15s,后退15s: 进度条拖动. 一开始想着这3个功能应该挺简单的.不就是播放,暂停,前进,后退么~呵~写的时候发现自己还是太年轻.当然,这跟自己的技术功底有关系.现在把我遇到的难点及要注意的点说一下~ 需要设置一个名为seekPosition的全局变量,初始值为0.我们要在播放的时候实时记录播放的位置,存到该变量里,这是方便在前进15s 或 后退15s 时计算时间点. 前进15s时要判断剩余时间

不多说了,直接贴code // 1.2版本以后便不在维护 wx.getBackgroundAudioManager({ success:function(res){ var status =res.status; if(status!=1){ // 没有在播放 }else{ wx.pauseBackgroundAudio(); } } }); // 1.2版本以后推荐的 const backgroundAudioManager = wx.getBackgroundAudioManager() i

微信小程序如何跳转到另一个小程序,要注意:在app.json文件里也要配置 navigateToMiniProgramAppIdList,如下图: "navigateToMiniProgramAppIdList": [ "wxc7984fb04ae38871" ] 试过这样写是没有问题: 代码: <navigator class='public_fixed' target="miniProgram" app-id="wxc7984

由于微信小程序官方将音频的样式固定死了,往往再工作中和UI设计师设计出来的样式不符,故一般都采用背景音频播放来实现自定义的UI样式的音频播放,即使用官网API提供的BackgroundAudioManager进行操作 也可以去官网https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.play.html查看详情 第一步,在对应的wxml页面添加如下代码,e

最近在写一个艾美食艾音乐的微信小程序,其中有用到音乐播放的功能,基本播放切换功能已经实现,但是在反复切换歌曲.重新进入歌曲以及单曲循环.列表循环的测试过程中还是发生了bug,特此写一篇文章,捋一下思路.(功能写到后面小程序官方文档将音频这一块全都更新了...) 坑点:由于小程序主体部分没有app.wxml,这就导致小程序不能写一些公共的页面结构,如果有相同的部分,只能封装成组件再引入. 在我们点击歌曲列表中的某首歌的时候,会进入音乐播放界面,当我们退出音乐播放界面,歌曲仍然继续播放,但此时由于退

写在前面 1.入门几天小白的作品,希望为您有帮助,有好的意见或简易烦请赐教 2.微信小程序审核音乐类别已经下架,想要发布选题需慎重.附一个参考链接,感谢https://www.hishop.com.cn/xiaocx/show_53774.html 3.写的过程中参考了前辈们的方法,借过几位博客园.CSDN.简书前辈的路,这里表示感谢. 4.官方API很重要 写在第二 资深大牛在地铁上问我有没有玩过微信小程序,自觉惭愧.于是萌发了写个小程序长长见识的想法,毕竟,谁都想要做一位行业大牛嘛. 写这个

推荐网址: 腾讯云快速开发(nodejs前后端):https://developers.weixin.qq.com/miniprogram/dev/qcloud/qcloud.html#%E5%AF%BC%E5%85%A5-nodejs-demo-%E5%92%8C%E9%85%8D%E7%BD%AE 参考项目地址(nodejs前后端):https://github.com/CavinCao/ghost-wechat-blog SQL Query Builder for JS:https://k

开发微信小程序并不是很难,网上有很多小程序开发资料,尤其是微信官方的<小程序开发指南>最详细. 下面是我开发小程序的历程: 第一步,请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装. 第二步,打开微信开发者工具,选择新建小程序项目. 红框里面可以选择 测试号 .AppID可以自己去注册.小程序使用js开发的,所以有js开发经验的很快就可以入门并

首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微信官方文档 简化一下哈:就是这样的 先在js的data里面定义一个动画的值 data: {     animationData: {},   }, 我这边做的是一个箭头图片的旋转 所以wxml里面得元素是这样的 <image animation="{{animationData}}"

在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理, decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调用其转义字符即可实现该特殊字符的显示. decode可以解析的有   < > & &apos;      还有要注意的是要用<text></text>标签包裹,用<view></vie

小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext,我们也通过这个接口创建音频.音频的长度可以通过属性获取: 但是,给innerAudioContext赋值src后就能获取吗,请看下面的例子: onLoad: function () { bgM = wx.createInnerAudioContext(); bgM.src = 'https://upyun.lesson.bbwansha.com/dub/user/2.mp3'; con

为了方便讲解,我们将上篇博客创建的小程序除了project.config.json和sitemap.json两个文件保留,其他全部删除(这两个文件存的是小程序的创建信息,删掉会有报错提示). 接下来我们创建如下文件,先不写内容. 写入如下代码: // app.js App({}) // 注册小程序 // index.js Page({}) // 注册页面 // app.json  {    "pages": [        "qrcode/index/index"

wxml <image bindtap="click" src="{{isPlay?'/images/':'/images/'}}"/> JS Page({ data:{ isPlay:false }, onLoad(){ var self = this; //监听音乐播放 wx.onBackgroundAudioPlay((result)=>{ self.setData({ isPlay:true }) }); //监听音乐停止 wx.onBac

1.效果图如下: 2.代码如下: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用

比如我现在有个data数据如下: data: { playIndex: null, courseList: [{ videoId: '0', isPlaying: false, }, { videoId: '1', isPlaying: false, }] }, 我现在想要修改courseList里面的isPlaying的值该怎么做呢? var thisIdx = e.currentTarget.dataset.index; var playStatus = "courseList["

记录微信小程序音频及视频弹幕播放效果. 1.audio <!-- audio.wxml --> <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio> <button type="prim

文章目录 1.注册微信小程序账号 1.1 小程序的注册流程 1.2 登录小程序账号 2.下载微信小程序开发者平台 3.新建一个小程序 3.1 点击加号 3.2 填写项目目录和小程序ID 3.3 点击确定.初始化小程序 1.注册微信小程序账号 地址链接:https://mp.weixin.qq.com/ 1.1 小程序的注册流程 1.2 登录小程序账号 2.下载微信小程序开发者平台 下载地址链接:https://developers.weixin.qq.com/miniprogram/dev/de

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 shitoujiandaobu 小程序:石头剪刀布(附代码说明) audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star 微信小程序开发之五星评分 switchCity 微信小程序开发之城市选择器 城市切换 huadong_del  微信小程序滑动删除效果 jianh

微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo:文章列表demo 微商城(含微信小程序)完整源码+配置指南 微信小程序Demo:一个简单的工作系统 微信小程序Demo:用于聚会的小程序 微信小程序Demo:Growth 是一款专注于Web开发者成长的应用,… 微信小程序Demo: Music-Player 微信小程序Demo:团贷网(投资) 微信