/ionic4-angular6-capacitor

ionic4 angular6 capacitor 集成demo

Primary LanguageTypeScript

Capacitor

create [directory] [name] [id]  Creates a new Capacitor project
init [appName] [appId]          Initializes a new Capacitor project in the current directory
serve                           Serves a Capacitor Progressive Web App in the browser
sync [platform]                 updates + copy
update [platform]               updates the native plugins and dependencies based in package.json
copy [platform]                 copies the web app build into the native app
open [platform]                 opens the native project workspace (xcode for iOS)
add [platform]                  add a native platform project
doctor [platform]               checks the current setup for common errors
plugin:generate                 start a new Capacitor plugin

// 初始化
npx cap init ionic4-angular6-capacitor com.iszoe.ionic4

// 增加平台
npx cap add ios
npx cap add android

// copy webDir 目录
npx cap copy

// 更新插件
npm install your-cordova-plugin
npx cap update
npx cap sync


// 打开ide
npx cap open ios
npx cap open android

Capacitor : PWA — Progressive Web App

  • make sure in angular.json file, outputPath = "www"
  • make sure in capacitor.config.json file, webDir = "www"
  • make sure in capacitor.config.json file, bundledWebRuntime = “false”
$ npx cap add web
$ npx cap copy web
$ npx cap serve

Capacitor : iOS

$ npx cap add ios
$ npx cap copy ios // Once your web code is built, it needs to be copied to each native project
$ npx cap open ios

Capacitor : Android

$ npx cap add android
$ npx cap copy android // Once your web code is built, it needs to be copied to each native project
$ npx cap open android

Capacitor : Electron

$ npx cap add electron
$ npx cap copy electron // Once your web code is built, it needs to be copied to each native project
$ cd electron
$ npm run electron:start