2021-06-30 初稿

image.png

0 按

看 vue3 - 移动端文档 https://v3.cn.vuejs.org/guide/mobile.html 时候，提到了一个混合开发的解决方案：

  • Capacitor + Vue.js Guide

今天简单体验了一下，因为没有移动端开发经验，没有系统看到相关概念，最终还是跑了起来。毕竟移动端应用是一个专门的岗位和领域，这里做个浅尝辄止的体验。

1 核心概念

首先是几个关键词：

  • Capacitor ，感觉是移动端里的 uni-app （一套语法在不同执行环境里兼容运行），提供的是一套桥阶层，做桥阶层有很多产品，但这个看起来口碑还可以。当然也有很多类似的产品。
  • Ionic Framework ，一套UI框架，感觉是移动端里的 NutUI ，vant 。只不过更贴近手机风格，我以为它封装了很多跨端的东西，看下来也没啥，平常心看待。
  • vue3 ，也就是 vue3 的web项目。

Capacitor 这是一个基础工具包、壳、桥阶层。这个东西做了一层转换，就跟 uni-app 似的，封装不同平台（android/ios) 的基础代码（补充：还支持 electron）。

这次能同时兼容多种框架，从技术上来看是把普通的js页面作为 web component 来操作。理论上它支持svelte/prettie-vue 是完全可能的。

Ionnic 背后的团队做了 ionic 这个东西，也产出了 capacitor ，所以很多时候两者会同时出现，但不是强制绑定的。

2 流程

大致的操作流程：

  1. 利用 vue3 书写web代码，是否利用 ionnic 无所谓，是否真的调用原生功能比如摄像头拍照也无所谓
  2. 打包vue代码，生成 /dist 文件夹
  3. 安装 npm i @capacitor/core @capacitor/cli ，然后执行 npx cap init ，最后会生成 capacitor.config.ts 文件（和其他内容），里面有 webDir 里设定路径
  1. {
  2.   "appId": "cc.ijust.demo",
  3.   "appName": "vue3-app",
  4.   "bundledWebRuntime": false,
  5.   "webDir": "dist",
  6.   "plugins": {
  7.     "SplashScreen": {
  8.       "launchShowDuration": 0
  9.     }
  10.   }
  11. }

下一步就是选择平台 android还是 ios，我准备好了 android 平台的准备。如果你不熟悉 android 相关配置，可以看我的一篇文章。

  1. 引入功能 npm i @capacitor/android ，然后执行 npx cap add android ，最终项目根目录生成了 android/ 文件夹
  2. 执行 npx cap open android ，会自动打开 Android Studio 。会精力漫长的依赖安装？最终风扇不转了。
  3. 点击 run ，用模拟器打开可以运行。选择 打包 - apk ，产出 apk 文件
  4. 这个apk交给安卓手机，可以安装运行

https://capacitorjs.com/docs/android

3 如何调用原生功能

这才是真正要学习的东西，背api，有很多原生功能，比如gps、拍照等。

看 capacitor 官网提到了一个demo：https://capacitorjs.com/solution/vue

可以简单看如何调用原生功能：

  1. // 这是 vue 里的一段逻辑
  2. import { defineComponent, ref } from 'vue';
  3. // 下一行引入了封装好的跨平台api，获取地理信息
  4. import { Geolocation } from '@capacitor/geolocation';
  5. export default defineComponent({
  6.   setup() {
  7.     const loc = ref<{
  8.       lat: null | number;
  9.       long: null | number;
  10.     }>({
  11.       lat: null,
  12.       long: null,
  13.     });
  15.     // 用户点击按钮触发这个方法
  16.     const getCurrentPosition = async () => {
  17.       // 直接执行封装好的api得到结果
  18.       const pos = await Geolocation.getCurrentPosition();
  19.       loc.value = {
  20.         lat: pos.coords.latitude,
  21.         long: pos.coords.longitude,
  22.       };
  23.     };
  24.     return { getCurrentPosition, loc };
  25.   },
  26. });

核心流程：

  • 引入 capacitor 封装好的跨端方法
  • 调用方法得到结果

当然也可以调用 android/ios 开发好的原生代码

4 总结

可以看到 capacitor 是一个具体技术栈无关的技术，无所谓你用 react还是 vue2 vue3，也无所谓使用 ionic 或者其他 UI框架。他的作用是提供基础服务，这进一步印证了，可以把这个东西想象成 uni-app 或者 taro ，让开发只关注开发，其他的都做封装，调用api封装、打包封装等。

再看这个新闻稿

Ionic 团队发布了一项名叫 Capacitor 且继承了 Apache Cordova 和 Adobe PhoneGap 核心思想的开源项目。 Capacitor 允许你使用现代 web 技术来构建可在任意平台中运行的应用，从 web 浏览器到移动设备（Android 和 iOS），甚至是通过 Electron（Github 上比较流行的使用 Node.js 和前端 web 技术构建跨平台桌面应用的技术）构建的桌面应用平台。

因此最近也有新闻说 quasar 什么的也出新版支持跨端，本质也是 quasar (UI)+ capacitor (基建）

-1 相关链接

Ionic & Vue.js - Full Tutorial (Build a Complete App)