原文：https://nicen.cn/8524.html

之前通过Uniapp+Html5plus实现过实现通话录音上传的功能，一直有一个痛点：录音文件很多的时候通过htmlplus来获取录音文件会很卡。

刚好看到新出的UniappX可以直接把类似ts的uts代码编译成原生代码，而且整个开发流程都可以在Hbuilder内完成，于是乎来了兴趣，试上一试！

## 开发思路

既然可以通过uts来实现原生开发，但是又想保持Web来进行APP的前端开发，那就直接用老一套的混合开发的方式：通过JS调用写好的原生方法。

相关代码已开源，Github：<https://github.com/friend-nicen/unicall>

### 1.通过uts实现读取录音文件

```javascript
/* 将功能封装为类：在构造函数中设置 audioPath */
export default class Scanner {

    ....

/* 读取目录下最新的录音文件 */
getLatestAudio(option : QueryLatest) : LatestAudioResult {

    /*  定义录音文件路径 */
    if (option.audioPath != null) {
        option.audioPath = this.sdRoot + option.audioPath;
        const initDir = new File(option.audioPath as string);
        if (!initDir.exists() || !!initDir.isDirectory()) {
            option.audioPath = this.getDevicePath();
        }
    } else {
        option.audioPath = this.getDevicePath();
    }

    /* 目录对象 */
    const dir = new File(option.audioPath as string);

    if (!dir.exists() || !dir.isDirectory()) {
        throw new UniError('scanner', 0, '录音文件目录不存在');
    }

    const files = dir.listFiles();
    if (files == null || files.size == 0) {
        throw new UniError('scanner', 0, '本次通话没有产生录音文件');
    }

    let latest : File | null = null;
    const countInt : Int = files.size;
    const count : number = countInt;
    option.latestTime = option.latestTime * 1000;

    for (let i : Int = 0; i < countInt; i = i + 1) {
        const f = files[i];
        if (f != null && f.isFile()) {
            const lm = f.lastModified();
            if (lm >= option.latestTime) {
                latest = f;
                option.latestTime = lm;
            }
        }
    }

    if (latest != null) {
        return { file: latest.getAbsolutePath(), count: count };
    }

    throw new UniError('scanner', 0, '本次通话没有产生录音文件');
}

	....
}
```

以下省略了若干代码，仅展示核心代码，完整代码请查看上方开源项目

### 2.通过webview对象向js提供直接调用的方法

通过监听webview组件的message事件，来获取js发送过来的消息，然后进行对应的处理，最后通过webview对象的evalJs方法，将结果回调给前端。相关代码如下：

```javascript
/* 消息监听 */
const onPostMessage = (e) => {

  /* 数据 */
  const _list = e.detail.data;
  const _action = _list[0].action;
  const _data = _list[0].data;


  /* 初始化 */
  if (!_wv) {

    /* 获取webview对象 */
    const _wvs = plus.webview.getDisplayWebview().filter(wv => {
      return wv.getURL().indexOf(host) > -1;
    });

    /* 弹出异常 */
    if (!_wvs.length) {
      load.toast("服务异常");
      return;
    }

    /* webview对象 */
    _wv = _wvs[0];
    _wv.onCall = (action, success, payload) => {
      _wv.evalJS('window.__onCall(`' + JSON.stringify({
        action,
        success,
        payload
      }) + '`)');
    }
  }

  /* 判断对象是否有这个属性 */
  try {
    if (!!scanner[_action]) {
      _wv.onCall(_action, true, scanner[_action](_data));
    }
  } catch (e) {
    const match = e.message.match(/errMsg='([^']+)'/);
    _wv.onCall(_action, false, match && match[1] ? match[1] : '系统异常');
  }


}
```

### 3.前端JS封装和APP通信的方法

通过下方封装的模块，可以直接通过await同步调用APP对应的方法。

```javascript
/**
 * NativeBridge.es6.js
 * ES Module，action 级回调，默认 15 s 超时
 * import { invoke } from './NativeBridge.es6.js';
 * await invoke({ action:'getDeviceId', timeout:10_000 });
 */
const pool = Object.create(null);   // action -> {resolve, reject, timer}

/**
 * App 回传结果的唯一全局钩子
 * 调用方式（Android）：
 * webView.evaluateJavascript('window.__onCall('{"action":"getDeviceId","success":true,"payload":"fake-123"}')', null);
 * payload 可省略。
 */
window.__onCall = function (json) {
    try {
        const {action, success, payload} = JSON.parse(json);
        /* 格式非法，直接丢弃 */
        if (typeof action !== 'string') return;

        const item = pool[action];
        /* 已超时或重复回调 */
        if (!item) return;

        const {resolve, reject, timer} = item;
        clearTimeout(timer);
        delete pool[action];

        success ? resolve(payload) : reject(new Error(payload ?? 'native error'));
    } catch {
        /* 非合法 JSON，直接忽略 */
    }
};

/**
 * 调用 App 内部方法
 * @param {Object} opt
 * @param {string} opt.action   - 必填，方法名
 * @param {any}    [opt.params] - 选填，参数，默认空对象
 * @param {number} [opt.timeout=15000] - 选填，超时毫秒
 * @returns {Promise<any>}
 */
export default function invoke(opt = {}) {

    /* 默认配置 */
    const {action, data = {}, timeout = 15000} = opt;

    /* 参数校验 */
    if (typeof action !== 'string' || !action)
        return Promise.reject(new TypeError('action is required'));

    return new Promise((resolve, reject) => {

        /* 如果已存在同 action 的未完成调用，先清掉 */
        if (pool[action]) {
            clearTimeout(pool[action].timer);
            pool[action].reject(new Error('covered by new call'));
        }

        /* 超时器，防止调用超时 */
        const timer = setTimeout(() => {
            delete pool[action];
            reject(new Error(`invoke ${action} timeout`));
        }, timeout);

        /* 回调 */
        pool[action] = {resolve, reject, timer};

        /* 发送消息 */
        uni.postMessage({
            data: {
                action,
                data: data
            }
        });

    });
}
```

### 4.相关扩展

上方展示了一个通过UniappX简单实现的混合开发的框架，在此基础上可以实现更多的原生方法来扩展功能，同时兼顾性能和Web开发的便捷。

之前通过Uniapp+Html5plus实现过实现通话录音上传的功能，一直有一个痛点：录音文件很多的时候通过htmlplus来获取录音文件会很卡。

基于UniappX开发电销APP，实现通话录音上传、通时通次

编程语言

前端

UniappX实现通话录音上传功能优化方案，通过UTS原生代码编译提升性能，解决H5+读取录音文件卡顿问题。采用JS调用原生方法的混合开发模式，开源项目地址：https://github.com/friend-nicen/unicall，包含Webview通信、前端JS封装等核心代码实现。

Android

JSON

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

基于UniappX开发电销APP，实现通话录音上传、通时通次-腾讯云开发者社区-腾讯云

基于UniappX开发电销APP，实现通话录音上传、通时通次

基于UniappX开发电销APP，实现通话录音上传、通时通次

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐