【微信小程序开发小白零基础入门】微信小程序媒体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

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

相关文章
|
9天前
|
数据采集 搜索推荐 API
小红书笔记详情 API 接口的开发、应用与收益
小红书(RED)作为国内领先的生活方式分享平台,汇聚了大量用户生成内容(UGC),尤其是“种草”笔记。小红书笔记详情API接口为开发者提供了获取笔记详细信息的强大工具,包括标题、内容、图片、点赞数等。通过注册开放平台账号、申请API权限并调用接口,开发者可以构建内容分析工具、笔记推荐系统、数据爬虫等应用,提升用户体验和运营效率,创造新的商业模式。本文详细介绍API的开发流程、应用场景及潜在收益,并附上Python代码示例。
147 61
|
4天前
|
人工智能 Rust 安全
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
DeepClaude 是一个开源的 AI 应用开发平台,结合了 DeepSeek R1 和 Claude 模型的优势,提供即时响应、端到端加密和高度可配置的功能。
158 4
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
10天前
|
供应链 搜索推荐 数据挖掘
阿里巴巴热卖商品推荐 API 接口的开发、应用与收益
阿里巴巴热卖商品推荐API为开发者提供了获取平台热卖商品信息的强大工具,涵盖商品标题、价格、销量等数据。通过注册开放平台账号、申请API权限并调用接口,开发者可构建热卖商品推荐系统、数据分析工具及供应链管理系统等应用,提升用户体验与运营效率,创造新的商业模式。该API采用RESTful风格,支持多种应用场景,助力电商从业者实现创新与增值。
60 7
|
7天前
|
API PHP 开发者
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。
|
13天前
|
JSON API 数据格式
微店商品列表接口(微店 API 系列)
微店商品列表接口是微店API系列的一部分,帮助开发者获取店铺中的商品信息。首先需注册微店开发者账号并完成实名认证,选择合适的开发工具如PyCharm或VS Code,并确保熟悉HTTP协议和JSON格式。该接口支持GET/POST请求,主要参数包括店铺ID、页码、每页数量和商品状态等。响应数据为JSON格式,包含商品详细信息及状态码。Python示例代码展示了如何调用此接口。应用场景包括商品管理系统集成、数据分析、多平台数据同步及商品展示推广。
|
4天前
|
监控 供应链 搜索推荐
亚马逊商品详情接口(亚马逊 API 系列)
亚马逊作为全球最大的电商平台之一,提供了丰富的商品资源。开发者和电商从业者可通过亚马逊商品详情接口获取商品的描述、价格、评论、排名等数据,对市场分析、竞品研究、价格监控及业务优化具有重要价值。接口基于MWS服务,支持HTTP/HTTPS协议,需注册并获得API权限。Python示例展示了如何使用mws库调用接口获取商品详情。应用场景包括价格监控、市场调研、智能选品、用户推荐和库存管理等,助力电商运营和决策。
51 23
|
5天前
|
JSON 数据挖掘 API
lazada商品详情接口 (lazada API系列)
Lazada 是东南亚知名电商平台,提供海量商品资源。通过其商品详情接口,开发者和商家可获取商品标题、价格、库存、描述、图片、用户评价等详细信息,助力市场竞争分析、商品优化及库存管理。接口采用 HTTP GET 请求,返回 JSON 格式的响应数据,支持 Python 等语言调用。应用场景包括竞品分析、价格趋势研究、用户评价分析及电商应用开发,为企业决策和用户体验提升提供有力支持。
52 21
|
2天前
|
JSON API 数据格式
eBay商品详情接口(ebay API系列)
eBay 商品详情接口是电商从业者、开发者和数据分析师获取商品详细信息的重要工具,涵盖标题、价格、库存、卖家信息等。使用前需在 eBay 开发者平台注册并获取 API 凭证,通过 HTTP GET 请求调用接口,返回 JSON 格式数据。Python 示例代码展示了如何发送请求并解析响应,确保合法合规使用数据。
32 12
|
1天前
|
JSON API 数据格式
阿里巴巴商品详情接口(阿里巴巴 API 系列)
在电商开发中,获取阿里巴巴商品详情信息对数据分析、竞品研究等至关重要。通过调用其商品详情接口,开发者可获取标题、价格、图片、描述等数据,满足多种业务需求。接口采用HTTPS协议,支持GET/POST请求,返回JSON格式数据。示例代码展示了如何使用Python的requests库进行接口请求,需传递商品ID和访问令牌。实际应用时,请依据官方文档调整参数并确保安全性。
27 10

热门文章

最新文章