AwesomeFramework7App
This is a Sample Template App build using Capacitor3.0 and Vue(v3.0.11) with Framework7(v6.0.17) in Typescript,I hope this project can help people who are new to Framework7 and plan to use it to develop hybrid apps.
This sample APP integrates most of the official components, It also integrates some commonly used native functions, such as Camera、Qrscanner、Statusbar and so on.
It will continue to be updated later
Preview
Home
|
Tools
|
Native
|
Setting
|
Download APP
IOS APP
|
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Sync plugin to native Project
when add a native plugin, must run
npx cap sync
Sync changes to native Project
npx cap copy
How to edit App Name and boundle Id
you need to edit the "capacitor.config.ts" file in root directory.
after edit this file , must run the bash width "npx cap copy" to make the changes take effect
eg:
import { CapacitorConfig } from "@capacitor/cli";
const config: CapacitorConfig = {
appId: "com.framework7.app", // this is app boundle Id
appName: "awesomeFramework7", // this is app name
webDir: "dist",
bundledWebRuntime: false,
backgroundColor: "#FFFFFF",
plugins: {
Keyboard: {
resize: "body",
},
SplashScreen: {
launchShowDuration: 3000,
autoHide: false,
splashFullScreen: true,
androidScaleType: "CENTER_CROP",
},
},
loggingBehavior: "debug",
};
export default config;
More Capacitor Config Please See https://capacitorjs.com/docs/config
How to Build APP
1.Build IOS width Xcode
before build ios app , you must install Xcode app on you mac os, then run bash npx cap open ios
to open IOS project in Xcode, then run bash with npm run build
, Next you can build IOS App as usual.
2.Build Android width AndroidStudio
before build Android app , you must install AndroidStudio app on you windows,then run bash npx cap open android
to open Android project in AndroidStudio, then run bash with npm run build
, Next you can build Android App as usual
Lints and fixes files
npm run lint
Customize configuration
See Framework7 Doc
See Capacitor.js Doc
See Vue.js3.0