解决vant-ui的van-uploader组件在APP下无法唤起相册的问题

2024-02-04 14:52:21

揭秘为何 App 中 Van-uploader 无法唤起相册

问题溯源

Van-ui 是一个颇受前端开发者青睐的 Vue.js 组件库，但当将其应用于 App 中时，却遇到了一个棘手的难题——无法唤起相册。究其原因，在于 App 与 Vue.js 生态之间的技术差异。

技术隔阂

App 通常采用原生开发模式，而 Van-ui 基于 Vue.js 框架。两者的通信方式不同，使得 Van-uploader 组件无法与 App 建立联系，进而无法触发相册操作。

解决方案：JSAPI 的桥梁

为了解决这一问题，我们需要在 Van-uploader 组件中引入一个名为 nativeHandle 的属性，它将 App 提供的 JSAPI 作为参数传递给组件。通过这个桥梁，App 能够与 Van-uploader 组件进行交互，从而实现唤起相册的功能。

实践步骤

1. 修改 Van-ui 源码

从 Gitee 克隆 Van-ui 源码的 2.x 分支，并在 src/uploader/index.js 文件中修改 VanUploader 组件，增加 nativeHandle 属性。

2. 重新编译发布

修改完成后，重新编译 Van-ui 并将其发布到 CDN。

3. App 中引入修改版 Van-ui

在 App 中引入修改后的 Van-ui，并在初始化 VanUploader 组件时，将 App 提供的 JSAPI 传递给 nativeHandle 属性。

代码示例

// 在 VanUploader 组件中增加 nativeHandle 属性
export default {
  name: 'VanUploader',
  props: {
    nativeHandle: {
      type: Function,
      default: null
    },
    ...
  },
  ...
};

// 在 App 中使用修改后的 Van-ui
const uploader = new VanUploader({
  nativeHandle: function () {
    // 打开相册
    plus.gallery.pick(function (path) {
      // 处理选中的图片
    });
  }
});