使用 Capacitor 来构建你的 app 吧！
- Published on
- Authors
- Name
- Wxm
capacitor1 作为一个跨平台 ios 和安卓的框架，本身和 flutter、RN 并不是同一赛道，capacitor 在官网也清晰的写着，基于两个平台 webview 来展示你的 html 静态网站，我们可以先用各种框架如 vue、react 来写一个静态网站，然后使用 capacitor 来把它变成 app，或者仅仅把它当成一个 app 的扩展工具，用 js 库来实现一些原生不太好实现的功能。相比直接用 capacitor 来构建 app，把它作为一个 js 扩展应该是一个更好的选择。
简单尝试
随便新建一个项目
我这里新建了一个 nextjs 项目。
npx create-next-app@latest
记得在 next.config 中设定 output。
output: "export",
安装 Capacitor
# 安装cap命令
npm install @capacitor/cli @capacitor/core
# 新建cap项目
npx cap init
你可以看到目录中出现了 capacitor.config.json 下面有一个简单的设置。
{
"appId": "com.example.captest", //唯一id
"appName": "captest",
"webDir": "out", //这个是静态网站的位置，nextjs导出的静态页面在out文件夹
"server": {
"url": "http://127.0.0.1:3000", //这里设定是对应nextjs dev模式的端口，设定后可以热更新
"cleartext": true
}
}
安装 cap 对应 sdk
这里以 ios 项目为例，
这里特别说一下在 ios 开发中需要安装 cocoapods，如果正常安装出错可以使用 brew 安装，我有个专门的日志写了如何解决这个问题。
# 先把nextjs的预览打开
npm run dev
# 安装cap包
npm install @capacitor/ios @capacitor/android
# 添加ios支持
npx cap add ios
# 使用原生app xcode打开app,可以查看原生代码，然后编译在模拟器执行
npx cap open ios
# 或者不打开xocde 通过命令行直接编译
npx cap run ios
# 可以打开同步，这样就可以热更新了
npx cap sync
这样一个可预览的 nextjs 的 app 就出来啦～
是不是很简单～
不过对比 flutter 和 RN 速度上明显还是有差距，还是要根据具体情况使用。