Библиотека знаний - mobile
Заметки IT программиста
http://178.140.10.58:8080/
2026-04-17T11:53:29+00:00
Библиотека знаний
http://178.140.10.58:8080/
http://178.140.10.58:8080/lib/exe/fetch.php?media=wiki:dokuwiki.svg
-
text/html
2023-07-17T01:08:09+00:00
Anonymous (anonymous@undisclosed.example.com)
Ionic, Cordova + Ionic, Capacitor
http://178.140.10.58:8080/doku.php?id=mobile:ionic
<div class="tags"><span>
<a href="http://178.140.10.58:8080/doku.php?id=tag:mobile&do=showtag&tag=mobile" class="wikilink1" title="tag:mobile" rel="tag">mobile</a>,
<a href="http://178.140.10.58:8080/doku.php?id=tag:ionic&do=showtag&tag=ionic" class="wikilink1" title="tag:ionic" rel="tag">ionic</a>,
<a href="http://178.140.10.58:8080/doku.php?id=tag:capacitor&do=showtag&tag=capacitor" class="wikilink1" title="tag:capacitor" rel="tag">capacitor</a>
</span></div>
<p>
.
</p>
<h1 class="sectionedit1" id="ionic_cordova_ionic_capacitor">Ionic, Cordova + Ionic, Capacitor</h1>
<div class="level1">
<p>
Сам по себе Ionic - это набор веб-компонентов заточенных под использоватние на мобильных устройствах. Его можно спокойно использовать на любых веб-страницах.
</p>
<p>
Cordova + Ionic - Это Cordova-приложение. И тут архитектуру диктует именно Cordova. С этим связано то, что прложение получается тяжелым и медленным. А также то что вносить измменения в нативную часть очень тяжело. Я в своё время модифицировал плагин пуш уведомлений, а плагин Apllepay добавил в магазин плагинов.
(Сразу оговорюсь, не я автор плагина Apple Pay. Я только его нашел, доработал, и добавил в магазин.)
</p>
<p>
<a href="https://capacitorjs.com/docs/updating/3-0#switch-to-automatic-android-plugin-loading" class="urlextern" title="https://capacitorjs.com/docs/updating/3-0#switch-to-automatic-android-plugin-loading" rel="ugc nofollow">Capacitor</a> - Это новая реинкарнация этого фреймворка. Тут уже берется любое SPA и запускается в нативном WebView. Тем самым получая лучшее из связки натива и веба.
Дальше, при желании, приложение можно модифицировать как со стороны веба, так и со стороны натива. Типичный пример - добавление функционала получения Push-уведомлений на IOS. Там не просто плагин добавляется, там нужно ручками внести изменения в нативную часть
</p>
<ul>
<li class="level1"><div class="li">
<a href="http://178.140.10.58:8080/doku.php?id=mobile:prepaire" class="wikilink1" title="mobile:prepaire" data-wiki-id="mobile:prepaire">Подготовка</a>
</div></li>
<li class="level1"><div class="li">
<a href="http://178.140.10.58:8080/doku.php?id=mobile:create-application:ionic" class="wikilink1" title="mobile:create-application:ionic" data-wiki-id="mobile:create-application:ionic">Создание и сборка приложения Ionic</a>
</div></li>
<li class="level1"><div class="li">
<a href="http://178.140.10.58:8080/doku.php?id=mobile:create-application:cordova" class="wikilink1" title="mobile:create-application:cordova" data-wiki-id="mobile:create-application:cordova">Cordova</a>
</div></li>
</ul>
</div>
<!-- EDIT{"target":"section","name":"Ionic, Cordova + Ionic, Capacitor","hid":"ionic_cordova_ionic_capacitor","codeblockOffset":0,"secid":1,"range":"50-2026"} -->
<h1 class="sectionedit2" id="create_application">Create application</h1>
<div class="level1">
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="re5">-g</span> <span class="sy0">@</span>ionic<span class="sy0">/</span>cli native-run cordova-res
$ ionic start photo-gallery tabs <span class="re5">--type</span>=angular <span class="re5">--capacitor</span>
$ <span class="kw3">cd</span> .<span class="sy0">/</span>photo-gallery
$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>camera <span class="sy0">@</span>capacitor<span class="sy0">/</span>preferences <span class="sy0">@</span>capacitor<span class="sy0">/</span>filesystem</pre>
</div>
<!-- EDIT{"target":"section","name":"Create application","hid":"create_application","codeblockOffset":0,"secid":2,"range":"2027-2290"} -->
<h1 class="sectionedit3" id="install_modules">Install modules</h1>
<div class="level1">
<ol>
<li class="level1"><div class="li">
<a href="https://capacitorjs.com/docs/plugins" class="urlextern" title="https://capacitorjs.com/docs/plugins" rel="ugc nofollow">https://capacitorjs.com/docs/plugins</a>
</div></li>
<li class="level1"><div class="li">
<a href="https://capacitorjs.com/docs/apis" class="urlextern" title="https://capacitorjs.com/docs/apis" rel="ugc nofollow">https://capacitorjs.com/docs/apis</a>
</div></li>
<li class="level1"><div class="li">
<a href="https://capacitorjs.com/docs/plugins/community" class="urlextern" title="https://capacitorjs.com/docs/plugins/community" rel="ugc nofollow">https://capacitorjs.com/docs/plugins/community</a>
</div></li>
<li class="level1"><div class="li">
<a href="https://github.com/orgs/capacitor-community/repositories" class="urlextern" title="https://github.com/orgs/capacitor-community/repositories" rel="ugc nofollow">https://github.com/orgs/capacitor-community/repositories</a>
</div></li>
</ol>
</div>
<!-- EDIT{"target":"section","name":"Install modules","hid":"install_modules","codeblockOffset":1,"secid":3,"range":"2291-2513"} -->
<h1 class="sectionedit4" id="capacitor_camera">@capacitor/camera</h1>
<div class="level1">
<p>
<a href="https://capacitorjs.com/docs/apis/camera" class="urlextern" title="https://capacitorjs.com/docs/apis/camera" rel="ugc nofollow">https://capacitorjs.com/docs/apis/camera</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>camera
$ npx cap <span class="kw2">sync</span></pre>
</div>
<!-- EDIT{"target":"section","name":"@capacitor\/camera","hid":"capacitor_camera","codeblockOffset":1,"secid":4,"range":"2514-2655"} -->
<h1 class="sectionedit5" id="capacitor_filesystem">@capacitor/filesystem</h1>
<div class="level1">
<p>
<a href="https://capacitorjs.com/docs/apis/filesystem" class="urlextern" title="https://capacitorjs.com/docs/apis/filesystem" rel="ugc nofollow">https://capacitorjs.com/docs/apis/filesystem</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>filesystem
$ npx cap <span class="kw2">sync</span></pre>
</div>
<!-- EDIT{"target":"section","name":"@capacitor\/filesystem","hid":"capacitor_filesystem","codeblockOffset":2,"secid":5,"range":"2656-2809"} -->
<h1 class="sectionedit6" id="capacitor_preferences">@capacitor/preferences</h1>
<div class="level1">
<p>
<a href="https://capacitorjs.com/docs/apis/preferences" class="urlextern" title="https://capacitorjs.com/docs/apis/preferences" rel="ugc nofollow">https://capacitorjs.com/docs/apis/preferences</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>preferences
$ npx cap <span class="kw2">sync</span></pre>
</div>
<!-- EDIT{"target":"section","name":"@capacitor\/preferences","hid":"capacitor_preferences","codeblockOffset":3,"secid":6,"range":"2810-2966"} -->
<h1 class="sectionedit7" id="capacitor_motion">@capacitor/motion</h1>
<div class="level1">
<p>
<a href="https://capacitorjs.com/docs/apis/motion" class="urlextern" title="https://capacitorjs.com/docs/apis/motion" rel="ugc nofollow">https://capacitorjs.com/docs/apis/motion</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>motion
$ npx cap <span class="kw2">sync</span></pre>
<p>
<a href="https://capacitorjs.com/docs/apis/haptics" class="urlextern" title="https://capacitorjs.com/docs/apis/haptics" rel="ugc nofollow">https://capacitorjs.com/docs/apis/haptics</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>haptics
$ npx cap <span class="kw2">sync</span></pre>
<p>
<a href="https://capacitorjs.com/docs/apis/device" class="urlextern" title="https://capacitorjs.com/docs/apis/device" rel="ugc nofollow">https://capacitorjs.com/docs/apis/device</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>device
$ npx cap <span class="kw2">sync</span></pre>
</div>
<!-- EDIT{"target":"section","name":"@capacitor\/motion","hid":"capacitor_motion","codeblockOffset":4,"secid":7,"range":"2967-3328"} -->
<h1 class="sectionedit8" id="capacitor_assets">@capacitor/assets</h1>
<div class="level1">
<p>
<a href="https://capacitorjs.com/docs/guides/splash-screens-and-icons" class="urlextern" title="https://capacitorjs.com/docs/guides/splash-screens-and-icons" rel="ugc nofollow">https://capacitorjs.com/docs/guides/splash-screens-and-icons</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="sy0">@</span>capacitor<span class="sy0">/</span>assets <span class="re5">--save-dev</span>
$ npx capacitor-assets generate</pre>
</div>
<!-- EDIT{"target":"section","name":"@capacitor\/assets","hid":"capacitor_assets","codeblockOffset":7,"secid":8,"range":"3329-3519"} -->
<h1 class="sectionedit9" id="ionic-native-sms-retriever-plugin-master">ionic-native-sms-retriever-plugin-master</h1>
<div class="level1">
<p>
<a href="https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master" class="urlextern" title="https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master" rel="ugc nofollow">https://github.com/hanatharesh2712/ionic-native-sms-retriever-plugin-master</a>
</p>
<p>
old:
</p>
<pre class="code bash">$ ionic cordova plugin add cordova-plugin-sms-retriever-manager
$ ionic cordova plugin add https:<span class="sy0">//</span>github.com<span class="sy0">/</span>hanatharesh2712<span class="sy0">/</span>ionic-native-sms-retriever-plugin-master.git</pre>
<p>
current:
</p>
<pre class="code bash">$ npm i cordova-plugin-sms-retriever-manager
$ npm i https:<span class="sy0">//</span>github.com<span class="sy0">/</span>hanatharesh2712<span class="sy0">/</span>ionic-native-sms-retriever-plugin-master.git</pre>
</div>
<!-- EDIT{"target":"section","name":"ionic-native-sms-retriever-plugin-master","hid":"ionic-native-sms-retriever-plugin-master","codeblockOffset":8,"secid":9,"range":"3520-4011"} -->
<h1 class="sectionedit10" id="byteowls_capacitor-sms">@byteowls/capacitor-sms</h1>
<div class="level1">
<p>
<a href="https://github.com/moberwasserlechner/capacitor-sms" class="urlextern" title="https://github.com/moberwasserlechner/capacitor-sms" rel="ugc nofollow">https://github.com/moberwasserlechner/capacitor-sms</a>
</p>
<pre class="code bash">$ npm i <span class="sy0">@</span>byteowls<span class="sy0">/</span>capacitor-sms
$ npx cap <span class="kw2">sync</span></pre>
</div>
<!-- EDIT{"target":"section","name":"@byteowls\/capacitor-sms","hid":"byteowls_capacitor-sms","codeblockOffset":10,"secid":10,"range":"4012-4170"} -->
<h1 class="sectionedit11" id="cordova-plugin-whitelist_deprecatedallowlist">cordova-plugin-whitelist [DEPRECATED: AllowList]</h1>
<div class="level1">
<p>
<a href="https://github.com/apache/cordova-plugin-whitelist" class="urlextern" title="https://github.com/apache/cordova-plugin-whitelist" rel="ugc nofollow">https://github.com/apache/cordova-plugin-whitelist</a>
</p>
<pre class="code bash">$ npm <span class="kw2">install</span> cordova-plugin-whitelist
$ npx cap <span class="kw2">sync</span></pre>
<pre class="code bash">$ ionic cordova plugin add cordova-sms-plugin
$ npm <span class="kw2">install</span> <span class="re5">--save</span> <span class="sy0">@</span>ionic-native<span class="sy0">/</span>sms</pre>
</div>
<!-- EDIT{"target":"section","name":"cordova-plugin-whitelist [DEPRECATED: AllowList]","hid":"cordova-plugin-whitelist_deprecatedallowlist","codeblockOffset":11,"secid":11,"range":"4171-4466"} -->
<h1 class="sectionedit12" id="commands">Commands</h1>
<div class="level1">
</div>
<!-- EDIT{"target":"section","name":"Commands","hid":"commands","codeblockOffset":13,"secid":12,"range":"4467-4490"} -->
<h1 class="sectionedit13" id="ionic">Ionic</h1>
<div class="level1">
<p>
Очень простые команды для работы с Ionic в Visual Studio Code:
</p>
<ol>
<li class="level1"><div class="li">
ionic start - создать темплейт ионик апп с нуля
</div></li>
<li class="level1"><div class="li">
ionic serve - запускать мобапп с иоником в браузере
</div></li>
<li class="level1"><div class="li">
ionic generate - создать новые фичи к мобаппу - directive class page component service module guard
</div></li>
</ol>
<p>
Для деплоя на мобайл:
</p>
<ol>
<li class="level1"><div class="li">
ionic build / ionic build –prod - сбилдить апп (если билдишь для прода то он включает strict режим и ругается если есть вызов несуществующих методов, используешь any и надо это пофиксить)
</div></li>
<li class="level1"><div class="li">
ionic cap add android - создать апп для андроида (1 раз так сделать)
</div></li>
<li class="level1"><div class="li">
ionic cap copy - скопировать сбилженную папку веба в папку для андроида
</div></li>
<li class="level1"><div class="li">
ionic cap sync - это чтобы синкнуть из андроид папки изменения (добавление нового плагина) назад в веб код
</div></li>
<li class="level1"><div class="li">
ionic cap open android - открыть в Андроид студио проект андроида сгенеренный или самому открыть
</div></li>
<li class="level1"><div class="li">
ng add @angular/pwa - сделать свой апп PWA (добавляется service worker, app manifest + иконки)
</div></li>
</ol>
</div>
<!-- EDIT{"target":"section","name":"Ionic","hid":"ionic","codeblockOffset":13,"secid":13,"range":"4491-5960"} -->
<h1 class="sectionedit14" id="capacitor">Capacitor</h1>
<div class="level1">
<pre class="code bash"><span class="co4">$ </span>ionic capacitor build android</pre>
</div>
<!-- EDIT{"target":"section","name":"Capacitor","hid":"capacitor","codeblockOffset":13,"secid":14,"range":"5961-6038"} -->
<h1 class="sectionedit15" id="cordova">Cordova</h1>
<div class="level1">
<pre class="code bash">$</pre>
</div>
<!-- EDIT{"target":"section","name":"Cordova","hid":"cordova","codeblockOffset":14,"secid":15,"range":"6039-"} -->
-
text/html
2023-07-16T21:29:16+00:00
Anonymous (anonymous@undisclosed.example.com)
Подготовка
http://178.140.10.58:8080/doku.php?id=mobile:prepaire
<div class="tags"><span>
<a href="http://178.140.10.58:8080/doku.php?id=tag:ionic&do=showtag&tag=ionic" class="wikilink1 tag label label-default mx-1" title="tag:ionic" rel="tag"><span class="iconify" data-icon="mdi:tag-text-outline"></span> ionic</a>,
<a href="http://178.140.10.58:8080/doku.php?id=tag:cordova&do=showtag&tag=cordova" class="wikilink1 tag label label-default mx-1" title="tag:cordova" rel="tag"><span class="iconify" data-icon="mdi:tag-text-outline"></span> cordova</a>
</span></div>
<p>
.
</p>
<h1 class="sectionedit1" id="подготовка">Подготовка</h1>
<div class="level1">
</div>
<!-- EDIT{"target":"section","name":"\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430","hid":"\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430","codeblockOffset":0,"secid":1,"range":"42-77"} -->
<h1 class="sectionedit2" id="java">Java</h1>
<div class="level1">
<pre class="code bash">$ <span class="kw2">sudo</span> apt search jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> default-jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> openjdk-<span class="nu0">8</span>-jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> openjdk-<span class="nu0">11</span>-jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> openjdk-<span class="nu0">17</span>-jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> openjdk-<span class="nu0">18</span>-jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> openjdk-<span class="nu0">19</span>-jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> openjdk-<span class="nu0">20</span>-jdk-headless
$ <span class="kw2">sudo</span> apt <span class="kw2">install</span> openjdk-<span class="nu0">21</span>-jdk-headless
$ update-java-alternatives <span class="re5">--list</span>
$ <span class="kw2">sudo</span> update-java-alternatives <span class="re5">--set</span> <span class="sy0">/</span>path<span class="sy0">/</span>to<span class="sy0">/</span>java<span class="sy0">/</span>version</pre>
</div>
<!-- EDIT{"target":"section","name":"Java","hid":"java","codeblockOffset":0,"secid":2,"range":"78-583"} -->
<h1 class="sectionedit3" id="sdkman">SDKMAN</h1>
<div class="level1">
<p>
Это инструмент для управления параллельными версиями нескольких комплектов разработки программного обеспечения в большинстве систем на базе Unix. Он предоставляет удобный интерфейс командной строки (CLI) и <abbr title="Application Programming Interface">API</abbr> для установки, переключения, удаления и перечисления кандидатов. Ранее известный как GVM Groovy enVironment Manager.
</p>
<p>
<a href="https://sdkman.io" class="urlextern" title="https://sdkman.io" rel="ugc nofollow">https://sdkman.io</a>
</p>
<pre class="code bash">$ curl <span class="re5">-s</span> <span class="st0">"https://get.sdkman.io"</span> <span class="sy0">|</span> <span class="kw2">bash</span>
$ sdk <span class="kw2">install</span> gradle 8.2.1</pre>
</div>
<!-- EDIT{"target":"section","name":"SDKMAN","hid":"sdkman","codeblockOffset":1,"secid":3,"range":"584-1284"} -->
<h1 class="sectionedit4" id="ionic_capacitor_cordova">Ionic, Capacitor, Cordova</h1>
<div class="level1">
<pre class="code bash">$ npm <span class="kw2">install</span> <span class="re5">-g</span> <span class="sy0">@</span>ionic<span class="sy0">/</span>cli native-run cordova cordova-res cordova jshint
$ npm init <span class="sy0">@</span>capacitor<span class="sy0">/</span>app</pre>
</div>
<!-- EDIT{"target":"section","name":"Ionic, Capacitor, Cordova","hid":"ionic_capacitor_cordova","codeblockOffset":2,"secid":4,"range":"1285-"} -->
-
text/html
2023-07-17T00:09:43+00:00
Anonymous (anonymous@undisclosed.example.com)
Reactnative
http://178.140.10.58:8080/doku.php?id=mobile:reactnative
<div class="tags"><span>
<a href="http://178.140.10.58:8080/doku.php?id=tag:reactnative&do=showtag&tag=reactnative" class="wikilink1" title="tag:reactnative" rel="tag">reactnative</a>,
<a href="http://178.140.10.58:8080/doku.php?id=tag:javascript&do=showtag&tag=javascript" class="wikilink1" title="tag:javascript" rel="tag">javascript</a>,
<a href="http://178.140.10.58:8080/doku.php?id=tag:cordova&do=showtag&tag=cordova" class="wikilink1" title="tag:cordova" rel="tag">cordova</a>
</span></div>
<p>
.
</p>
<h1 class="sectionedit1" id="reactnative">Reactnative</h1>
<div class="level1">
</div>
<!-- EDIT{"target":"section","name":"Reactnative","hid":"reactnative","codeblockOffset":0,"secid":1,"range":"58-"} -->