LamboJsBridge 示例

介绍

LamboJsBridge 是一个js 适配sdk 用于处理H5应用和运行时环境的能力调用。支持微信、钉钉等环境。目前已适配微信（WechatAdapter）和企业微信（WeComAdapter）

Vue 全局引入

/**
 * Vue main.js 中加入如下代码
 */
console.log("------ 初始化 LamboJsBridge -------")
import LamboJsBridge from "@lambo-design-mobile/lambo-js-bridge";
Vue.use(LamboJsBridge);

调用

// 直接调用扫码功能
// Vue方法中
this.$lamboJsBridge.scanCode()

//其他Js界面
Vue.prototype.$lamboJsBridge.scanCode();
/**
 * 也可以自己封装一层工具类 
 * 扫描二维码并返回结果。(需要在APP环境下测试)
 * 此函数通过调用 Flutter scanCode.startScan 方法来启动二维码扫描。
 * 扫描成功后返回扫描结果，若扫描失败则返回错误信息。
 *
 * @returns {Promise<String>} - 返回一个 Promise，当扫描成功时 resolve，返回扫描的结果字符串；如果失败，reject 返回错误信息。
 * @example
 * flutterUtil.scanCode()
 *   .then(result => {
 *     console.log('扫描结果:', result.msg);
 *   })
 *   .catch(error => {
 *     console.error('扫描失败:', error.msg);
 *   });
 */
flutterUtil.scanCode = function() {
    return Vue.prototype.$lamboJsBridge.scanCode();
};

引入

import Vue from 'vue';
import LamboJsBridge from '@lambo-design-mobile/lambo-js-bridge';

代码演示

初始化

  async created() {
    const options = {
      // 初始化参数，根据需要填写
      wechatId:this.wechatId,
      weComId:this.weComId,
      dingTalkId:this.dingTalkId,
      pluginConfig:["localAuthPlugin","amapPlugin","tabBarPlugin","scanCodePlugin","filePreviewPlugin"],

    };
    this.$lamboJsBridge = new LamboJsBridge(options);
    await this.getPlatform();
  },
  
   methods: {
    async getPlatform() {
      try {
        const info = await this.$lamboJsBridge.getPlatform(); // 获取初始化信息
        this.initInfo = JSON.stringify(info, null, 2); // 美化输出
        console.log('Init Info:', info);
      } catch (error) {
        console.error('Error getting init info:', error);
      }
    },
    }

参数说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |------------|--------|--------|------|----------|------------| | wechatId | string | | 是 | 微信 | 微信公众号appId | | weComId | string | | 是 | 企业微信 | 企业微信corpId | | dingTalkId | string | | 是 | 钉钉 | 钉钉id |

返回说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |----------|--------|--------|------|----------|---------| | appId | string | | 是 | 微信、企业微信、钉钉 | 对应平台的id | | platform | string | | 是 | 微信、企业微信、钉钉 | 当前浏览器平台 |

高德地图初始化key（initKey）

获取用户当前的地理位置信息。

    async initKey() {
      try {
        const options ={
          androidKey:"41c4c1f35d8d14f5bf1907c173924147",
          iosKey:"465abf5da8c8d62e3caa63952a0957a5"
        }; 
        const reslut = await this.$lamboJsBridge.initKey(options);
        this.initKeyMessage = `initKey result: ${result}`;
      } catch (error) {
        console.error('Error initKey:', error);
      }
    },

参数说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |------------------|----------|--------|------|-------|-----------------------------------------------------------------------------------------------| | androidKey | string | | 否 | yuntu | 前往高德开放平台创建key https://console.amap.com/dev/key/app | | iosKey | string | | 否 | yuntu | 前往高德开放平台创建key https://console.amap.com/dev/key/app |

返回说明

``

获取地理位置接口（getLocation）

获取用户当前的地理位置信息。

    async getLocation() {
      try {
        const options ={
          // 初始化参数，根据需要填写
        };
        const location = await this.$lamboJsBridge.getLocation(options);
        console.log("location",location)
        this.location += `${JSON.stringify(location)}\n`; // 追加新数据
        this.latitude = location.latitude; // 存储纬度
        this.longitude = location.longitude; // 存储经度
        console.log('Location:', location);
      } catch (error) {
        console.error('Error getting location:', error);
      }
    },

参数说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |------------------|----------|--------|------|-------|-----------------------------------------------------------------------------------------------| | type | string | gcj02 | 否 | 微信、企业微信、钉钉 | 默认为gcj02的gps坐标，如果要使用标准坐标则传入wgs84 | | targetAccuracy | string | | 否 | 钉钉 | 期望定位精度半径(单位米)，定位结果尽量满足该参数要求，但是不一定能保证小于该误差，开发者需要读取返回结果的 accuracy 字段校验坐标精度。建议按照业务需求设置定位精度，推荐采用200m，可获得较好的精度和较短的响应时长。 | | cacheTimeout | number | 30 | 否 | 钉钉 | 缓存过期时间，单位为秒。未过期的缓存数据会直接返回（速度快），缓存过期会重新定位（速度慢）。 | | useCache | boolean | true | 否 | 钉钉 | 是否缓存地理位置信息。若为true，客户端会对定位的地理位置信息缓存，在缓存期内 (2分钟) 再次定位会返回旧的定位。 | | withReGeocode | boolean | true | 否 | 钉钉 | 是否需要带有逆地理编码信息。该功能需要网络请求，请根据自己的业务场景使用。 | | formattedAdress | number | 1 | 否 | 钉钉 | 获取经纬度和详细到区县级别的逆地理编码数据 |

返回说明

Promise<Object>

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |------------|--------|--------|------|----------|------------------------| | latitude | number | | 是 | 微信、企业微信、钉钉 | 纬度，浮点数，范围为 90 ~ -90 | | longitude | number | | 是 | 微信、企业微信、钉钉 | 经度，浮点数，范围为 180 ~ -180 | | accuracy | number | | 是 | 微信、企业微信、钉钉 | 位置精度 | | address | string | | 否 | 钉钉 | 格式化地址，type>0生效。 | | province | string | | 否 | 钉钉 | 省份，type>0生效。 | | city | string | | 否 | 钉钉 | 城市，type>0生效。 |

调起扫一扫接口（scanCode）

调用扫一扫功能。

    async scanCode() {
      try {
        const options ={
          // 初始化参数，根据需要填写
        };
        const result = await this.$lamboJsBridge.scanCode(options);
        this.scanResult += `${JSON.stringify(result)}\n`; // 追加新数据
        console.log('Scan result:', result);
      } catch (error) {
        console.error('Error scanning code:', error);
      }
    },

参数说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|----------|--------|------|----------|----------------------------------------------------------------------------------------------| | scanType | string[] | qr | 否 | 微信、企业微信、钉钉 | 扫码样式。qr：二维码扫码框，bar：条形码扫码框 | | needResult| boolean | true | 否 | 微信、企业微信 | 扫描结果是否由微信或企业微信处理。为 false 时直接返回扫描结果 |

返回说明

Promise<Object>

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |------------|--------|--------|------|----------|-------------| | resultStr | string | | 否 | 微信、企业微信、钉钉 | 扫码结果 |

拍照或从手机相册中选图接口（takePhoto）

拍照或从本地相册选择图片。

    async takePhoto() {
      try {
        const options = {
          //初始化参数，根据需要填写、修改
          outputType: ['oss','info','data'], // 根据需要包含 'info', 'data', 'oss'
          ossServerContext: this.ossServerContext,
          ossImgPutUrl: this.ossImgPutUrl,
          ossImgGetUrl: this.ossImgGetUrl
        };
        const photo = await this.$lamboJsBridge.takePhoto(options);
        this.photoResult += `${JSON.stringify(photo)}\n`; // 追加新数据
        console.log('Photo result:', photo);
      } catch (error) {
        console.error('Error taking photo:', error);
      }
    },

参数说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-------------------|---------|-------------------------|-----|----------|------------------------------------------------------------------| | count | number | 1 | 否 | 微信、企业微信、钉钉 | 选择图片数量 | | sizeType | string[] | ['camera', 'album'] | 否 | 微信、企业微信、钉钉 | 相册选取或者拍照。album：相册，camera：相机 | | outputType | string[] | ['info', 'data', 'oss'] | 否 | 微信、企业微信、钉钉 | 图像输出格式。info 选定图像的本地信息，data 选定图像的base64数据，oss为上传oss-server | | method | string | 'file'或'blob' | 否 | 微信、企业微信、钉钉 | 上传oss方法，默认为blob | | defaultCameraMode | string | | 否 | 企业微信 | 进入拍照界面的默认模式。normal 单拍，batch 连拍，front 前置摄像头单拍，batch_front 前置摄像头连拍 | | isSaveToAlbum | boolean | true | 否 | 企业微信 | 拍照时是否保存到系统相册 | | position | string | back | 否 | 钉钉 | 相机拍照使用的摄像头：front：前置摄像头，back：后置摄像头 | | ossServerContext | string | | 是 | 微信、企业微信、钉钉 | 上传oss-server服务器地址 | | ossImgPutUrl | string | | 是 | 微信、企业微信、钉钉 | 上传oss-server图片接口地址 | | ossImgGetUrl | string | | 是 | 微信、企业微信、钉钉 | 下载oss-server图片接口地址 |

返回说明

Promise<Array>

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|----------|--------|------|----------|---------------| | imageInfo | string[] | | 否 | 微信、企业微信、钉钉 | 选定图像的本地信息 | | imageData | string[] | | 否 | 微信、企业微信、钉钉 | 选定图像的base64数据 | | imageOss | JSON | | 否 | 微信、企业微信、钉钉 | 选定图像的oss返回数据 |

使用内置地图查看位置（openLocation）

使用内置地图查看位置。

async openLocation() {
      try {
        if (this.latitude !== null && this.longitude !== null) {
          const options = {
          //初始化参数，根据需要修改
            latitude: this.latitude,
            longitude: this.longitude,
            name: this.name,
            address: this.address,
            scale: this.scale,
            type:"amap"
          };
          await this.$lamboJsBridge.openLocation(options);
          this.openLocationResult = '位置已成功打开'; // 成功打开位置时存储信息
          console.log('Location opened successfully');
        } else {
          this.openLocationResult = '没有可用的位置信息，请先获取定位。'; // 没有位置信息时存储错误信息
          console.error('No location data available. Please get the location first.');
        }
      } catch (error) {
        this.openLocationResult = `打开位置时出错: ${error.message}`; // 存储错误信息
        console.error('Error opening location:', error);
      }
    }

参数说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|--|-----|-----|----------|------------------------------------------------------------------| | latitude | number | | 是 | 微信、企业微信、钉钉、Yuntu | 纬度，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系 | | longitude | number | | 是 | 微信、企业微信、钉钉、Yuntu | 经度，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系 | | name | string | | 钉钉 | 微信、企业微信、钉钉 | 位置名称 | | address | string | | 钉钉 | 微信、企业微信、钉钉 | 详细位置 | | scale | number | | 否 | 微信、企业微信 | 缩放比例，范围5~18 | | type | string | amap | 否 | Yuntu | 'baidu':百度地图,'amap'：高德地图,'URLSchema'：自定义协议 |

返回说明

无

录音（仅在Flutter环境下可用）

此接口提供音频录制功能，可以开始录音、停止录音以及自动录音。自动录音指检测不到声音后自动停止。

data() {
    return {
      audioUrl: null, // 用于存储录音文件的 URL
      recordingStatus: "not started", // 用于记录当前录音状态
    };
  },
method:{
// 开始手动录音
    async startRecording() {
      // 清空之前的录音数据
      this.audioUrl = null;
      this.recordingStatus = 'recording';
      try {
        // 传入 { auto: false } 表示手动录音
        const result = await this.$lamboJsBridge.startRecording({ auto: false });
        console.log("录音开始成功：", result);
      } catch (error) {
        console.error("录音开始失败：", error);
        this.recordingStatus = 'failed';
      }
    },

    // 开始自动录音
    async startAutoRecording() {
      // 清空之前的录音数据
      this.audioUrl = null;
      this.recordingStatus = 'recording';
      try {
        // 传入 { auto: true } 表示启用自动录音
        const result = await this.$lamboJsBridge.startRecording({ auto: true , silenceDelay: 1, silenceStopSeconds: 2, volumeThreshold: 60});
        console.log("自动录音开始成功：", result);
      } catch (error) {
        console.error("自动录音开始失败：", error);
        this.recordingStatus = 'failed';
      }
    },

    // 停止录音
    async stopRecording() {
      try {
        const result = await this.$lamboJsBridge.stopRecording();
        console.log("录音停止成功：", result);
        this.recordingStatus = 'stopped';
        // 更新录音文件信息
        this.audioUrl = result.fileUrl || result.msg;
        // 如果你非要用全局函数更新，也可以调用它
        this.updateAudioDisplay(result);
      } catch (error) {
        console.error("录音停止失败：", error);
        this.recordingStatus = 'failed';
      }
    },

    // 如果你希望借助类似全局函数的形式更新页面，可以这样定义：
    updateAudioDisplay(data) {
      // 更新组件中的数据，页面会自动响应
      this.recordingStatus = 'stopped';
      this.audioUrl = data.fileUrl;
      this.audioPath = data.filePath;
      this.audioData = data.fileData;
    },
},
mounted() {
  window.updateAudioDisplay = this.updateAudioDisplay;
},

参数说明

recordingOptions: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|---------|-------|-----|----------|---------------------------| | isAuto | boolean | false | 否 | Yuntu | 是否开启自动录音。若为 true，则自动开始录音。 | | silenceDelay | int | 3 | 否 | Yuntu | 延迟 n 秒后开始静音检测 | | silenceStopSeconds | int | 4 | 否 | Yuntu | 连续 n 秒静音停止录音 | | volumeThreshold | double | 40 | 否 | Yuntu | 音量阈值，单位为分贝 |

返回说明

Promise<Object>

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|--|----------|-----|----------|---------------| | fileUrl | string | | 是 | Yuntu | 录音文件的URL | | filePath | string | | 是 | Yuntu | 录音文件的路径 | | fileData | string | | 是 | Yuntu | 录音文件的base64文件 |

录音状态 recording：录音进行中。 not started：录音未开始。 stopped：录音已停止。 failed：录音失败。

下载文件（downloadFile）

调用文件下载功能，通过指定文件 URL 下载文件，并自动触发下载行为。

async downloadFile() {
  try {
    const fileUrl = 'http://10.110.34.27/yc_scrm.apk'; // 需要下载的文件 URL
    const fileName = '下载文件'; // 文件保存名称
    await this.$lamboJsBridge.downloadFile({ fileUrl, fileName });
    console.log('Download initiated');
  } catch (error) {
    console.error('Download failed:', error);
  }
}

参数说明

params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|--|----------|-----|----------|-------------------------------------------------------------| | fileUrl | string | 无 | 是 | Yuntu | 要下载文件的 URL 地址 | | fileName | string | 'downloadedFile' | 否 | Yuntu | 下载后保存的文件名称，建议不包含文件扩展名（可由调用者自行添加扩展名） |

返回说明

Promise<Object>

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|--|----------|-----|----------|---------| | filePath | string | | 是 | Yuntu | 录音文件的路径 |

生物认证

提供本地生物特征认证能力，支持指纹/面容识别验证，支持查询设备可用生物特征类型。

    async localAuth() {
      try {
        const options = {
          localizedReason: 'A1',
          biometricHint: 'A2',
          cancelButton: 'A3',
          signInTitle: 'A4'
        }
        const result = await this.$lamboJsBridge.localAuthPlugin(options)
        this.localAuthResult = JSON.stringify(result, null, 2)
        console.log('localAuthResult:', result);
        this.availableBiometrics = '' // 清空另一个结果
      } catch (error) {
        // 结构化错误处理
        const errorMessage = error.msg || error.message || '未知错误';
        const authId = error.authId || '未知设备';

        this.localAuthResult = `认证失败：${errorMessage}，authId：${authId}`;
        console.error('完整错误信息:', error);
      }
    },
    async getAvailableBiometrics() {
      try {
        const result = await this.$lamboJsBridge.getAvailableBiometrics()
        this.availableBiometrics = JSON.stringify(result, null, 2)
        this.localAuthResult = '' // 清空另一个结果
      } catch (error) {
        this.availableBiometrics = `获取失败: ${error.message}`
      }
    },

参数说明

localAuthPlugin params: Object

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |-----------|--------|-------|-----|----------|---------------------| | localizedReason | string | 认证 | 否 | Yuntu | 自定义生物识别验证弹窗居中正文文字 | | biometricHint | string | 扫描指纹进行身份验证 | 否 | Yuntu | 自定义生物识别验证弹窗副标题文字 | | cancelButton | string | 取消 | 否 | Yuntu | 自定义生物识别验证弹窗取消位置按钮文字 | | signInTitle | string | 指纹验证 | 否 | Yuntu | 自定义生物识别验证弹窗标题 |

getAvailableBiometrics: 无需参数

返回说明

localAuthPlugin: Promise<Object>

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |--------|--|----------|-----|----------|------| | msg | string | | 是 | Yuntu | 返回信息 | | authId | string | | 是 | Yuntu | 设备ID |

getAvailableBiometrics: Promise<Object>

| 属性 | 类型 | 默认值 | 必填 | 支持平台 | 说明 | |---------------------|--------|----------|-----|----------|---------| | msg | string | | 是 | Yuntu | 返回信息 | | availableBiometrics | array | | 是 | Yuntu | 支持的生物识别 | | authId | string | | 是 | Yuntu | 设备ID |