【愚公系列】2022年02月 微信小程序-app.json配置属性之requiredBackgroundModes

简介: 【愚公系列】2022年02月 微信小程序-app.json配置属性之requiredBackgroundModes

一、app.json配置属性之requiredBackgroundModes

申明需要后台运行的能力,类型为数组。目前支持以下项目:


audio: 后台音乐播放

location: 后台定位

如:


{
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio", "location"]
}

注:在此处申明了后台运行的接口,开发版和体验版上可以直接生效,正式版还需通过审核。


二、audio

1.启用后台播放配置

app.json 配置requiredBackgroundModes音频后台播放,在小程序被手机切换为后台应用的时候,小程序中的音频还可以正常播放。

{
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio"]
}

2.添加调用代码

注意:getBackgroundAudioManager() 目前只能够播放网络音频链接!不可以播放本地文件、还有工程内的音频文件。测试音频链接,可以去网友的网站,获取音乐平台的音频直链:https://music.liuzhijin.cn/


clkme:function(){
  const backgroundAudioManager = wx.getBackgroundAudioManager()
  backgroundAudioManager.title = '折子戏';
  backgroundAudioManager.epname = '折子戏';
  backgroundAudioManager.singer = '许巍';
  backgroundAudioManager.coverImgUrl = '';
  // 设置了 src 之后会自动播放
  backgroundAudioManager.src = 'http://music.163.com/song/media/outer/url?id=97325.mp3';
  backgroundAudioManager.play();//不要加这个!!!设置了SRC即可播放,不要再行play()
  //播放开始触发onEnded方法
  backgroundAudioManager.onPlay(() => {
        console.log("音乐播放开始");
  })
  //播放结束触发onEnded方法
  backgroundAudioManager.onEnded(() => {
        console.log("音乐播放结束");
  })
  backgroundAudioManager.onError(() => {
      console.log("音乐播放错误");
  })
},

3.注意点

getBackgroundAudioManager 一旦设置了src就开始播放了,不要再次调用play()

三、location

1.启用后台定位功能

在app.json中新增:

"requiredBackgroundModes":["location"],
"permission": {
  "scope.userLocationBackground": {
  "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
},

小程序后台定位的使用相关文档:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.onLocationChange.html


下面列举详细功能:

1.wx.onLocationChange//监听位置实时变化


2.wx.stopLocationUpdate//关闭监听实时位置变化,前后台都停止消息接收


3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息


4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息


首先我们需要开启小程序进入前后台时均接收位置消息


const _locationChangeFn = function(res) {
  console.log('location change', res)
 }
 wx.onLocationChange(_locationChangeFn)
 wx.offLocationChange(_locationChangeFn)

注意这个API无法在开发者工具上调试,只能用真机来进行

相关文章
|
1月前
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
|
1月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
1月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
18天前
|
小程序
微信小程序——属性配置大全
微信小程序——属性配置大全
12 0
|
28天前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
26 2
|
1月前
|
小程序 安全 JavaScript
【微信小程序】-- uni-app 项目创建 & 目录结构讲解(四十九)
【微信小程序】-- uni-app 项目创建 & 目录结构讲解(四十九)
|
7天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
7天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
7天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。

热门文章

最新文章