轻量级移动端开发框架CapacitorJS

移动端应用开发框架众多如uniapp、uniapp-X、React Native、Flutter、CapacitorJS。今天根据开发的定制化app讲一讲CapacitorJS这个框架吧。

Ionic团队
Capacitor 是一个由Ionic团队精心打造的强大 开源 工具，旨在让开发者通过JavaScript、HTML和CSS构建既可以在iOS、Android平台上原生运行，也能部署于Web的跨平台Progressive Web Apps（PWA)

CapacitorJS

没有中文版，可以用在线翻译。地址是：Capacitor - Cross-platform Native Runtime for Web Apps | Capacitor Documentation

• 技术本质：基于 Web 技术（HTML/CSS/JavaScript），通过封装 WebView 将 Web 应用转换为跨平台原生应用。
• 核心优势：
  • 低学习成本：适合 Web 开发者快速上手，无需掌握原生开发语言（如 Swift/Kotlin）。
  • 渐进式增强：可直接集成现有 Web 项目，支持渐进式添加原生功能（如摄像头、地理位置）。
  • 轻量级：相比 Cordova 等传统方案，性能更优，且支持 Progressive Web Apps（PWA）无缝部署。
  • 内在：相比 uniapp、uniapp-X、React Native，Cordova 等传统方案，它非常干净，你不需要的也不会加载，Android的插件源码也可自行修改。
• 局限性：
  • 性能瓶颈：依赖 WebView 渲染，复杂动画或高频交互场景可能卡顿。
  • 原生功能覆盖有限：需通过插件实现原生 API 调用，部分高级功能（如 3D 渲染）支持不足。

性能与用户体验

• 渲染性能：依赖 WebView，复杂界面可能出现掉帧或延迟。
• 原生体验：通过插件调用原生功能（如推送通知），但交互细节（如动画过渡）可能不如原生流畅，
• 实际体验：开发使用的版本是capacitorjs-v3版本，web是使用vue2，功能是公司产品改造成app的，数据展示都是根据数据动态绘制的，功能复杂，不能过多讲，但是现场多个地方使用，跟其他公司开发的没有什么性能体验差的情况，很顺畅。

生态与社区支持

• 插件生态：提供核心原生功能插件（如 相机、通知、剪切板）等，基本够用了，但第三方插件数量较少。
  如非必要，不使用第三方插件，网上下载的第三方开源sdk，谁能确定是否有恶意程序呢？
• 社区活跃度：由 Ionic 团队维护，更新稳定但社区规模较小。

长期维护与扩展性

• 维护成本：基于 Web 技术，更新迭代依赖前端页面（如 React/Vue），剩下的改改样式和功能直接替换静态html,可惜现在没有提供跟Cordova 种js直接调用的方案。但原生插件需单独维护（自己写的某些特殊功能插件也不会发布出去吧！）。
• 扩展性：适合功能稳定的项目，复杂需求可能需自定义插件。

总结与建议

• 降低开发成本
• 团队以 Web 开发者为主，需快速验证想法或迁移现有 Web 项目。
• 项目对性能要求不高，且预算有限（如内部工具、小型应用）。

最赞的是后台写插件的写法，开发过java的一定不会陌生，注解方式自定义功能插件，@ActivityCallback是onActivityResult的回调Activity时的数据交换 ，这种自定义插件方式多么简单明了啊,还有两种被动通知传的方式

package android.plugin.test;

import com.getcapacitor.JSObject;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.getcapacitor.annotation.CapacitorPlugin;

@CapacitorPlugin(name = "Echo")
public class EchoPlugin extends Plugin {

    @PluginMethod()
    public void echo(PluginCall call) {
        String value = call.getString("value");
        this.getContext();
        this.getActivity();
        JSObject ret = new JSObject();
        ret.put("value", value);
        //继承BridgeActivity的主MainActivity定义全局变量就可以任意位置发送和调用了。
        this.getBridge().triggerWindowJSEvent("testMessage",ret.toString());
        //只有插件种发送，必须使用组件的addListener来监听
        notifyListeners("testMessage",ret);
        call.resolve(ret);
    }

  // Activity的onActivityResult 回调
    @ActivityCallback
    public void processPickedImage(PluginCall call, ActivityResult result) {
        Intent data = result.getData();
        if (data == null) {
       //继承BridgeActivity的主MainActivity定义全局变量就可以任意位置发送和调用了。
        this.getBridge().triggerWindowJSEvent("testMessage",ret.toString());
        //只有插件种发送，必须使用组件的addListener来监听
            call.reject("No image picked");
            return;
        }

    }
}

页面调用方式也很简单，不过它的inic UI库没有使用过但效果还是不错的。

import { registerPlugin } from '@capacitor/core';

const sdk = registerPlugin('Echo');

 sdk.echo({
  value:'test'
}).then(res=>{
    console.info(res.value)
})

sdk.addListener('testMessage', (event) => {
    
});

window.addEventListener('testMessage', (event) => {
        console.info('接收广播')
 });