【微信小程序开发小白零基础入门】微信小程序媒体API【建议收藏】

简介: 微信小程序媒体API文章目录微信小程序媒体API一、图片管理1. 选择图片2. 预览图片3. 获取图片信息4. 保存图片二、录音管理1.start(options)方法的参数说明2.采样率和码率关系三、音频管理1. 背景音频管理2. 音频组件控制四、视频管理1. 选择视频2. 保存视频3. 视频组件控制五、相机管理1. cameraContext对象的方法2. takePhoto的OBJECT参数3. startRecord的OBJECT参数4. stopRecord的OBJECT参数六、推荐小程序(欢迎各位大佬指导)小程序使用wx.chooseImage(OBJECT)从本地相册选择图片或使

微信小程序媒体API


文章目录

微信小程序媒体API

一、图片管理

1. 选择图片

2. 预览图片

3. 获取图片信息

4. 保存图片

二、录音管理

1.start(options)方法的参数说明

2.采样率和码率关系

三、音频管理

1. 背景音频管理

2. 音频组件控制

四、视频管理

1. 选择视频

2. 保存视频

3. 视频组件控制

五、相机管理

1. cameraContext对象的方法

2. takePhoto的OBJECT参数

3. startRecord的OBJECT参数

4. stopRecord的OBJECT参数

六、推荐小程序(欢迎各位大佬指导)


一、图片管理

1. 选择图片

小程序使用wx.chooseImage(OBJECT)从本地相册选择图片或使用相机拍照获得图片,图片将被存放在设备的临时路径,在小程序本次启动期间可以正常使用。

b16e28d0639ada52c58222a726c7799.png

 //选择图片
  chooseImage:function(){
    var that = this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        that.setData({ src: tempFilePaths[0]})
      }
    })
  },

f02ab59cfeb34b2d969b685e6fd1302c.png

2. 预览图片

小程序使用wx.previewImage(OBJECT) 预览图片,OBJECT参数说明如表所示。

61755fbc517e75905273b9ba9aed1e7.png

  //预览图片
  previewImage:function(){
    var that = this
    wx.previewImage({
      urls: [this.data.src],
    })
  },

47df791a5b054094a15431e6be74710a.png

3. 获取图片信息

小程序使用wx.aetlmagelnfo(OBJECT)获取图片信息,OBJECT参数说明如表所示。

06da037433b47518f23ed33f4a39c68.png

success返回参数说明如表所示。


orientation参数说明说明如表所示。

 //获取图片信息
  getImageInfo: function () {
    var that = this
    wx.getImageInfo({
      src: this.data.src,
      success:function(res){
        wx.showToast({
          icon:'none',
          title: '宽:'+res.width+',高:'+res.height,
        })
      }
    })
  },
————————————————
版权声明:本文为CSDN博主「智慧云工具箱」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_44967475/article/details/120683351

2f7ead3b0026449591305196792d9bdc.png

4. 保存图片

小程序使用wx.saveImageToPhotosAlbum(OBJECT) 保存图片到系统相册,需要用户授权 scope.writePhotosAlbum。该接口从基础库 1.2.0 开始支持,低版本需做兼容处理。 OBJECT参数说明如表所示。

 //保存图片
  saveImage: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.src,
      success:function(){
        wx.showToast({
          title: '保存成功!',
        })
      }
    })
  },
————————————————
版权声明:本文为CSDN博主「智慧云工具箱」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_44967475/article/details/120683351

8ba8c6119fea4ee9b490ffbecfa1f40f.png

二、录音管理

小程序使用wx.getRecorderManager()获取全局唯一的录音管理器 recorderManager,该接口从基础库 1.6.0 开始支持,低版本需做兼容处理。


开始录音

  //开始录音
  start:function(){
    const options = {
      duration: 10000,
      sampleRate: 44100,
      numberOfChannels: 1,
      encodeBitRate: 192000,
      format: 'aac',
      frameSize: 50
    }
    this.rm.start(options)
  },

7196c86546414eb09ec6ab68ebf8b3fa.png

结束录音

  //停止录音
  stop:function(){
    this.rm.stop()
  },

1.start(options)方法的参数说明

start(options)方法的参数说明如表所示。

390579ee6c8ae4638e53f0f0866e337.png

2.采样率和码率关系

采样率和码率关系如表所示

be661aff4439d8cacf009bb3c7969bd.png

三、音频管理

音频根据其播放性质可以分为背景音频和前台音频。 背景音频在小程序最小化之后还可以继续在后台播放。

1. 背景音频管理

小程序使用wx.getBackgroundAudioManager()获取全局唯一的背景音频管理器 backgroundAudioManager。backgroundAudioManager对象的属性说明如表所示。

b9c4ffc2e61703f1186ab7907d5e701.png

backgroundAudioManager 对象的方法说明如表所示。

e50aec67fbc323d6555fc64271ad44d.png

errCode 说明解释如下: 10001:系统错误 10002:网络错误 10003:文件错误 10004:格式错误 -1:未知错误

  //初始化背景音频
  initialAudio:function(){
    let bgAudioManager = this.bgAudioManager
    bgAudioManager.title = '******'
    bgAudioManager.epname = '******'
    bgAudioManager.singer = '******'
    bgAudioManager.coverImgUrl = '******'
    bgAudioManager.src = '******' // 设置了 src 之后会自动播放
  },
  //开始播放
  play: function () {
    this.bgAudioManager.play()
  },
  //暂停播放
  pause: function () {
    this.bgAudioManager.pause()
  },

2. 音频组件控制

小程序使用wx.createInnerAudioContext()创建并返回内部 audio 上下文对象innerAudioContext,该接口从基础库 1.6.0 开始支持,低版本需做兼容处理。

72cf2a839e8be8eeae2404b1e367424.png

innerAudioContext对象的方法说明如表所示。

0f002c0360a0ae4489c399e56f2ec0b.png56f261cd9d23f013f38edd50853e43e.png

//初始化音频
  initialAudio:function(){
    let audioCtx = this.audioCtx
    audioCtx.autoplay = true //允许自动播放
    audioCtx.src = '******'
    audioCtx.onPlay(() => {
      console.log('开始播放')
    })
    audioCtx.onPause((res) => {
      console.log('暂停播放')
    })
    audioCtx.onStop((res) => {
      console.log('停止播放')
    })
  },
  //开始播放
  play:function(){
    this.audioCtx.play()
  },
  //暂停播放
  pause: function () {
    this.audioCtx.pause()
  },
  //停止播放
  stop:function(){
    this.audioCtx.stop()
  },

四、视频管理

1. 选择视频

小程序使用wx.chooseVideo(OBJECT) 拍摄视频或从手机相册中选视频,返回视频的临时文件路径。OBJECT参数说明如表所示。

a5f43d0ea500f16f3282bfebc1670f1.png

success返回参数说明如下: tempFilePath:选定视频的临时文件路径; duration:选定视频的时间长度; size:选定视频的数据量大小; height:返回选定视频的长; width:返回选定视频的宽。 需要注意是,wx.chooseVideo获得的视频仅能在小程序启动期间临时使用。 如需持久保存,需在主动调用 wx.saveFile进行保存,在小程序下次启动时才能访问得到。

  //选择视频
  chooseVideo: function () {
    var that = this
    wx.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      camera: 'back',
      success: function (res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  },

7c25aa4c7eb94404952113e5fc0d0465.png

2. 保存视频

小程序使用wx.saveVideoToPhotosAlbum(OBJECT) 保存视频到系统相册,需要用户授权 scope.writePhotosAlbum。该接口从基础库 1.2.0 开始支持,低版本需做兼容处理。 OBJECT参数说明如表所示。5848c3ffd4c5c27464bb2782238acb9.png

  //保存视频
  saveVideo: function () {
    var src = this.data.src
    wx.saveVideoToPhotosAlbum({
      filePath: src,
      success: function (res) {
        wx.showToast({
          title: '保存成功!',
        })
      }
    })
  },

b02c79e1631a46f78f07dba957fc4627.png

3. 视频组件控制

小程序使用wx.createVideoContext(videoId,this) 创建并返回视频上下文videoContext对象。videoContext 通过 videoId 跟一个 video 组件绑定,通过它可以操作一个 video 组件。 在自定义组件下,第二个参数传入组件实例this,以操作组件内组件。 videoContext 对象的方法说明如表所示。

a880ce9dcaa3ca326264f3c721d8382.png

  //开始播放
  play: function () {
    this.videoContext.play()
  },
  //暂停播放
  pause: function () {
    this.videoContext.pause()
  },
  inputValue: '',//弹幕文本内容
  //更新弹幕文本
  bindInputBlur: function (e) {
    this.inputValue = e.detail.value
  },
  //发送弹幕
  bindSendDanmu: function () {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor()
    })
  },

a888831da433472d9b7760f2de3dfe94.pnge9e114c623b14520865c169d0f5cd009.png

五、相机管理

 //开始录像
  startRecord: function () {
    var that = this
    that.setData({ isRecording: true, isHidden: true })
    this.ctx.startRecord({
      //超时自动结束
      timeoutCallback(res) {
        that.setData({
          isRecording: false,
          src: res.tempVideoPath, //更新视频路径地址
          isHidden: false //显示video组件
        })
      }
    })
  },
a25162846f204b7190aad3b63c1292d9.png e5fe8d5558094a87a18293406605d3e9.png
  //停止录像
  stopRecord: function () {
    var that = this
    this.ctx.stopRecord({
      success: function (res) {
        that.setData({
          isRecording: false,
          src: res.tempVideoPath, //更新视频路径地址
          isHidden: false //显示video组件
        })
      }
    })
  },

1360dcd20f7e4bf2827e0152d5560760.png

1. cameraContext对象的方法

cameraContext对象的方法列表如下表所示。3c1f93c52643495b8db48365150498f.png

2. takePhoto的OBJECT参数

takePhoto的OBJECT参数列表如下表所示。64a856217ccbd0187a05c999e13d2b5.png

3. startRecord的OBJECT参数

startRecord的OBJECT参数列表如下表所示。18e0cb674cf2550cf992d1e33a9bf1d.png

4. stopRecord的OBJECT参数

stopRecord的OBJECT参数列表如下表所示。aa62f560fe38400153e60423e4ebfb7.png

六、推荐小程序(欢迎各位大佬指导)

相关文章
|
7天前
|
API 开发工具 数据库
开发一份API接口,需要注意这些,看你做到了几项
本文介绍了设计API接口时需注意的关键点,包括数字签名、敏感数据加密与脱敏、限流、参数校验、统一返回与异常处理、请求日志记录、幂等设计、数据量限制、异步处理、参数定义、完整文档及开发者对接SDK等内容,旨在帮助开发者设计出安全、稳定、易维护的API接口。
47 6
开发一份API接口,需要注意这些,看你做到了几项
|
9天前
|
JSON 前端开发 API
后端开发中的API设计与文档编写指南####
本文探讨了后端开发中API设计的重要性,并详细阐述了如何编写高效、可维护的API接口。通过实际案例分析,文章强调了清晰的API设计对于前后端分离项目的关键作用,以及良好的文档习惯如何促进团队协作和提升开发效率。 ####
|
7天前
|
JSON API 数据格式
如何使用Python开发1688商品详情API接口?
本文介绍了如何使用Python开发1688商品详情API接口,获取商品的标题、价格、销量和评价等详细信息。主要内容包括注册1688开放平台账号、安装必要Python模块、了解API接口、生成签名、编写Python代码、解析返回数据以及错误处理和日志记录。通过这些步骤,开发者可以轻松地集成1688商品数据到自己的应用中。
23 1
|
9天前
|
缓存 前端开发 API
探索后端开发中的API设计原则
【10月更文挑战第37天】本文旨在引导读者理解API设计的核心理念,通过简明的语言和直观的示例,揭示如何构建高效、稳定且易于维护的后端接口。我们将深入浅出地探讨RESTful API的设计规范,并通过一个简易的代码样例,展示如何在实战中应用这些原则。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的参考和启示。
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
498 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
582 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
114 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
79 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
196 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
67 5

热门文章

最新文章