使用Capacitor来构建你的app吧！
- Published on
- Authors
- Name
- Wxm
尝试使用Capacitor来丰富你的app吧！
capacitor作为一个跨平台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速度上明显还是有差距，还是要根据具体情况使用。