Initial commit
This commit is contained in:
eskimo
7
example-app/.gitignore
vendored
Normal file
7
example-app/.gitignore
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
.idea/
|
||||
node_modules/
|
||||
.vscode/
|
||||
*.map
|
||||
.DS_Store
|
||||
.sourcemaps
|
||||
dist/
|
||||
12
example-app/README.md
Normal file
12
example-app/README.md
Normal file
@@ -0,0 +1,12 @@
|
||||
## Created with Capacitor Create App
|
||||
|
||||
This app was created using [`@capacitor/create-app`](https://github.com/ionic-team/create-capacitor-app),
|
||||
and comes with a very minimal shell for building an app.
|
||||
|
||||
### Running this example
|
||||
|
||||
To run the provided example, you can use `npm start` command.
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
10
example-app/capacitor.config.json
Normal file
10
example-app/capacitor.config.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"appId": "com.example.plugin",
|
||||
"appName": "example-app",
|
||||
"webDir": "dist",
|
||||
"plugins": {
|
||||
"SplashScreen": {
|
||||
"launchAutoHide": false
|
||||
}
|
||||
}
|
||||
}
|
||||
29
example-app/package.json
Normal file
29
example-app/package.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "capacitor-app",
|
||||
"version": "1.0.0",
|
||||
"description": "An Amazing Capacitor App",
|
||||
"type": "module",
|
||||
"keywords": [
|
||||
"capacitor",
|
||||
"mobile"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@capacitor/core": "latest",
|
||||
"@capacitor/camera": "latest",
|
||||
"@capacitor/splash-screen": "latest",
|
||||
"capacitor-promocode": "file:..",
|
||||
"@capacitor/ios": "^6.0.0",
|
||||
"@capacitor/android": "^6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/cli": "latest",
|
||||
"vite": "^5.4.2"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
BIN
example-app/src/assets/icon/favicon.ico
Normal file
BIN
example-app/src/assets/icon/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
example-app/src/assets/imgs/logo.png
Normal file
BIN
example-app/src/assets/imgs/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
5
example-app/src/css/style.css
Normal file
5
example-app/src/css/style.css
Normal file
@@ -0,0 +1,5 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
32
example-app/src/index.html
Normal file
32
example-app/src/index.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Awesome Capacitor App</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<meta name="format-detection" content="telephone=no" />
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
|
||||
<script
|
||||
type="module"
|
||||
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
|
||||
></script>
|
||||
<script
|
||||
nomodule
|
||||
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
|
||||
></script>
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="./assets/icon/favicon.ico" />
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
<meta name="theme-color" content="#31d53d" />
|
||||
</head>
|
||||
<body>
|
||||
<capacitor-welcome></capacitor-welcome>
|
||||
|
||||
<script src="./js/capacitor-welcome.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
142
example-app/src/js/capacitor-welcome.js
Normal file
142
example-app/src/js/capacitor-welcome.js
Normal file
@@ -0,0 +1,142 @@
|
||||
import { SplashScreen } from '@capacitor/splash-screen';
|
||||
import { Camera } from '@capacitor/camera';
|
||||
|
||||
window.customElements.define(
|
||||
'capacitor-welcome',
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
SplashScreen.hide();
|
||||
|
||||
const root = this.attachShadow({ mode: 'open' });
|
||||
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
h1, h2, h3, h4, h5 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
background-color: #73B5F6;
|
||||
color: #fff;
|
||||
font-size: 0.9em;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
main {
|
||||
padding: 15px;
|
||||
}
|
||||
main hr { height: 1px; background-color: #eee; border: 0; }
|
||||
main h1 {
|
||||
font-size: 1.4em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
main h2 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
main h3 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
main p {
|
||||
color: #333;
|
||||
}
|
||||
main pre {
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<capacitor-welcome-titlebar>
|
||||
<h1>Capacitor</h1>
|
||||
</capacitor-welcome-titlebar>
|
||||
<main>
|
||||
<p>
|
||||
Capacitor makes it easy to build powerful apps for the app stores, mobile web (Progressive Web Apps), and desktop, all
|
||||
with a single code base.
|
||||
</p>
|
||||
<h2>Getting Started</h2>
|
||||
<p>
|
||||
You'll probably need a UI framework to build a full-featured app. Might we recommend
|
||||
<a target="_blank" href="http://ionicframework.com/">Ionic</a>?
|
||||
</p>
|
||||
<p>
|
||||
Visit <a href="https://capacitorjs.com">capacitorjs.com</a> for information
|
||||
on using native features, building plugins, and more.
|
||||
</p>
|
||||
<a href="https://capacitorjs.com" target="_blank" class="button">Read more</a>
|
||||
<h2>Tiny Demo</h2>
|
||||
<p>
|
||||
This demo shows how to call Capacitor plugins. Say cheese!
|
||||
</p>
|
||||
<p>
|
||||
<button class="button" id="take-photo">Take Photo</button>
|
||||
</p>
|
||||
<p>
|
||||
<img id="image" style="max-width: 100%">
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const self = this;
|
||||
|
||||
self.shadowRoot.querySelector('#take-photo').addEventListener('click', async function (e) {
|
||||
try {
|
||||
const photo = await Camera.getPhoto({
|
||||
resultType: 'uri',
|
||||
});
|
||||
|
||||
const image = self.shadowRoot.querySelector('#image');
|
||||
if (!image) {
|
||||
return;
|
||||
}
|
||||
|
||||
image.src = photo.webPath;
|
||||
} catch (e) {
|
||||
console.warn('User cancelled', e);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
window.customElements.define(
|
||||
'capacitor-welcome-titlebar',
|
||||
class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const root = this.attachShadow({ mode: 'open' });
|
||||
root.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 15px 15px 15px 15px;
|
||||
text-align: center;
|
||||
background-color: #73B5F6;
|
||||
}
|
||||
::slotted(h1) {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
`;
|
||||
}
|
||||
},
|
||||
);
|
||||
13
example-app/src/manifest.json
Normal file
13
example-app/src/manifest.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "App",
|
||||
"short_name": "App",
|
||||
"start_url": "index.html",
|
||||
"display": "standalone",
|
||||
"icons": [{
|
||||
"src": "assets/imgs/logo.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}],
|
||||
"background_color": "#31d53d",
|
||||
"theme_color": "#31d53d"
|
||||
}
|
||||
10
example-app/vite.config.ts
Normal file
10
example-app/vite.config.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
root: './src',
|
||||
build: {
|
||||
outDir: '../dist',
|
||||
minify: false,
|
||||
emptyOutDir: true,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user