微信小程序-相册选择/拍摄图片或视频封装函数

一、前言

本文实现的功能是:在小程序中通过拍照或者相册选择照片的函数封装,基于最新的API:wx.chooseMedia()

在这里插入图片描述

之前的博客封装过基于wx.chooseImage()的图片选择函数,但是该函数目前已经停止维护,所以重新封装了一个。

在这里插入图片描述

函数使用效果如下

在这里插入图片描述

悬停时会有参数提示,参数做了简化,方便使用时调用
在这里插入图片描述

二、封装的函数代码

函数的注释非常详细,有定制需求的同学可以自行修改代码。调用时悬停或输入参数时会有相应的提示。同时也做了基础库的判断。


  /**
   * 选择图片或视频
   * @param {*} count 文件数量 1-20 基础库2.25.0+ 上限为20 否则为 9
   * @param {*} mediaType 可选择的文件类型 1仅图片 2仅视频 3图片和视频
   * @param {*} sourceType 文件的来源 1仅相册 2仅拍摄 3相册或拍摄
   * @param {*} sizeType 文件是否压缩 1原文件 2压缩 3由用户可选择
   * @param {*} maxDuration 拍摄时视频的时长 3-60s(相册选择不限制)
   * @param {*} cameraType 拍摄时使用前/后相机 1后摄 2前摄
   */
  async chooseMedia(
    count = 1,
    mediaType = 1,
    sourceType = 3,
    sizeType = 3,
    maxDuration = 10,
    cameraType = 1
  ) {
    if (count <= 0) count = 1;
    // 版本比较 2.25.0+ 上限为20
    if (count > 9) {
      const { SDKVersion } = wx.getSystemInfoSync();
      const vRes = compareVersion(SDKVersion, "2.25.0");
      if (vRes < 0 && count >= 20) count = 9;
      else if (vRes >= 0 && count > 20) count = 20;
    }

    // 可选择的文件类型
    let _mediaType = [];
    if (mediaType === 1) _mediaType = ["image"]; // 仅图片
    if (mediaType === 2) _mediaType = ["video"]; // 仅视频
    if (mediaType === 3) _mediaType = ["mix"]; // 图片或视频

    // 文件的来源
    let _sourceType = [];
    if (sourceType === 1) sourceType = ["album"]; // 仅相册
    if (sourceType === 2) sourceType = ["camera"]; // 仅相机拍摄
    if (sourceType === 3) sourceType = ["album", "camera"]; // 相册或相机拍摄

    // 上传压缩或原图
    let _sizeType = [];
    if (sizeType === 1) _sizeType = ["original"];
    if (sizeType === 2) _sizeType = ["compressed"];
    if (sizeType === 3) _sizeType = ["original", "compressed"];

    let _cameraType = "back";
    if (cameraType === 1) _cameraType = "back";
    if (cameraType === 2) _cameraType = "front";

    if (maxDuration < 3) maxDuration = 3;
    if (maxDuration > 60) maxDuration = 60;

    return await wx.chooseMedia({
        count,
        mediaType: _mediaType,
        sourceType: _sourceType,
        maxDuration,
        sizeType: _sizeType,
        camera: _cameraType,
      })
      .then((res) => {
        return res;
      })
      .catch((err) => {
        return err;
      });

    /**
     * 版本比较
     * v1 >= v2 返回 0或1 否则 -1
     * @param {String} v1
     * @param {String} v2
     */
    function compareVersion(v1, v2) {
      v1 = v1.split(".");
      v2 = v2.split(".");
      const len = Math.max(v1.length, v2.length);

      while (v1.length < len) {
        v1.push("0");
      }
      while (v2.length < len) {
        v2.push("0");
      }

      for (let i = 0; i < len; i++) {
        const num1 = parseInt(v1[i]);
        const num2 = parseInt(v2[i]);
        if (num1 > num2) {
          return 1;
        } else if (num1 < num2) {
          return -1;
        }
      }
      return 0;
    }
  },

三、结语

最后来一下常规结语:
实际开发中的其他逻辑就不写了。需要同学们自己去考虑异常情况处理等问题啦。

有任何疑问可以在评论区留下。我每天都会进行回复,私聊不回。(为了刷积分)

以上均是本人开发过程中的一些经验总结与领悟,如果有什么不正确的地方,希望大佬们评论区斧正。

💥最后!!!不管这篇文章对你有没有用,既然都看到最后了。
👍赞一个!!!
🤩当然,顺带收藏就最好了。
😎欢迎转载,原创不易,转载请注明出处✍️。

😊如果你对小程序开发有兴趣或者正在学习小程序开发,可以关注我。每一篇都是原创,每一篇都是干货噢~。

————————————————
版权声明:本文为CSDN博主「super–Yang」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44702572/article/details/135141353

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
微信小程序是一种基于微信平台的应用的开发模式,可以快速的开发出符合用户需求的小程序。在小程序的开发,组件是一个非常重要的概念,通过组件可以实现复用性和模块化编程思想。 组件应用是小程序开发的基础。通过组件可以将某一模块化并封装起来,使得组件可以在不同的页面间得到复用,大大提升了开发效率并减少了代码冗余。微信小程序提供了丰富的自带组件,包括文本、图片、按钮、输入框等等,开发者也可以自己开发组件来满足自己的需求。实际开发,通过组件可以快速搭建页面框架和业务逻辑。 Demo是一个演示小程序的示例程序。在小程序的实际开发过程,一个好的Demo非常重要。通过Demo,开发人员可以更深入的了解小程序的开发流程、组件的应用和实际的业务开发等等。在Demo,通常会包括小程序的一些基础操作,如页面跳转、数据绑定、组件的使用等。而在实际开发,Demo还会包括一些复杂的业务场景,如支付、登录、数据列表展示等等。Demo不仅为开发者提供了学习和实践的机会,也方便了使用者了解该小程序的功能和特点。 总之,微信小程序组件的应用和Demo的开发都是小程序开发过程非常重要的两个部分。良好的组件应用和精心设计的Demo,可以在极短的时间内实现小程序开发。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

super--Yang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值