Использование Кордовы (vue)

Обзор

• Cordova

  Cordova может упаковать ваш HTML/JS-код в собственный контейнер для запуска и может вызывать различные программные и аппаратные интерфейсы (JavaScript API) системы. Мы называем эту архитектуруhybrid app, Благодаря этой архитектуре мы можем запускать интерфейсный код на разных платформах и получать системные функции, близкие к нативным приложениям. В конечном итоге он был выпущен для основных рынков приложений, включая Apple App Store.

• Плагин Кордовы

  Cordova предоставляет разработчикам широкий спектр поддержки аппаратного и программного интерфейса через экосистему плагинов, таких как чтение и запись файлов, push-уведомления, распаковка, адресная книга и многое другое. Этот метод гарантирует внедрение соответствующих функциональных плагинов по мере необходимости в процессе разработки, а также ускоряет обновление и обслуживание плагинов и уменьшает избыточность кода. Плагины Cordova используют CLI для управления зависимостями и установки их через NPM, что очень удобно.

• Cross-walk Project

  Cross-walk — это проект с открытым исходным кодом, разработанный Intel, который предоставляет среду выполнения для HTML-приложений.Он основан на последних разработках ядра Chromium и может обеспечить новейшие веб-функции и постоянную совместимость. С введением поддержки встроенных веб-представлений в Cordova Android 4.0.0+ теперь вы можете удобно использовать веб-представления Crosswalk в своих приложениях Cordova. Используя подключаемый модуль веб-просмотра Crosswalk, разработчики могут пользоваться возможностями удаленной отладки, передовыми функциями HTML5, такими как WebGL, WebAudio и WebRTC, и значительно улучшенной производительностью на устройствах Android, включая Android 4.0 Ice Cream Sandwich (ICS).

• Vue.js

  Vue.js — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других тяжеловесных фреймворков, Vue использует инкрементальную разработку снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, и ее очень легко изучить и интегрировать с другими библиотеками или существующими проектами. С другой стороны, Vue полностью способен управлять сложными одностраничными приложениями, разработанными с использованием однофайловых компонентов и библиотек, поддерживаемых экосистемой Vue. На основе платформы Vue разработка одностраничных гибридных приложений станет очень эффективной.

• CodePush

  CodePush — это облачная служба, предоставляемая Microsoft, которая обеспечивает поддержку программного обеспечения и сеть распространения CDN для разработчиков, чтобы отправлять Hot-Code-Update непосредственно пользователям. CodePush предоставляет плагины для разработчиков Cordova, которые мы можем быстро встроить в приложения. Предоставляемые им функции включают в себя: управление версиями, обновления в оттенках серого, экстренный откат, добавочные обновления (Diff) и многое другое. Его CDN предоставляется Akamai, крупнейшим в мире поставщиком услуг CDN, и можно себе представить его стабильность и скорость.

  возможные будущие обвинения

Инициализировать среду разработки

1. Обновление версии Node.jsиспользоватьnode -v && npm -vПроверьте версию, если ниже v6.0.0 и v3.0.0, используйтеnОбновление инструмента:sudo npm install n -g && n stable
2. Управление исходным кодом для пакетов NPMНа практике исходный сервер npm находится в Соединенных Штатах, и скорость низкая, поэтому мы используем исходное зеркало npm от Alibaba для замены источника по умолчанию:sudo npm install nrm -g && nrm use taobao, который установит исходный адрес:registry.npm.taobao.org/, сервер находится в облаке Alibaba, и скорость очень высокая.
3. Установите Xcode (необязательно для OS X)Перейдите в Mac App Store, чтобы загрузить последнюю версию Xcode и установить Инструменты командной строки для простой отладки в симуляторе iOS.
4. Установите Android Studio (обязательно)Перейти в Android-студиюОфициальный сайтЗагрузите Android Studio и установите SDK 24+, следуйте инструкциям для завершения установки. Без этого шага проект не сможет успешно собраться и запуститься.
5. Создайте новый проект CordovaПросто следуйте официальной документации, чтобы создать новый проект:Ссылка на документацию

6. небольшая проблемакогда вы выполняетеcordova platform add androidНа этом этапе вы можете столкнуться с зависанием> Configuring > 0/2 projectsв течение нескольких часов. Здесь необходимоcordova platform add androidЧтобы объяснить принцип этой команды, она делает следующие вещи:

   • Создание скелета проекта Android и файловой структуры
   • Загрузите gradle в первый раз (инструмент, специально используемый для управления пакетом maven проектов Android)
   • Настройте скрипт сборки build.gradle
   • Загрузите пакет maven, необходимый для проекта
   • Очистите лишние Cordova Libs
   • Построить проект

   К сожалению, у gradle есть некоторые ошибки при загрузке протокола https, из-за чего пакет maven не загружается успешно. В это время необходимы некоторые хитрости и хитрости:

   • Найдите свой каталог Gradle, обычно в~/.gradle/wrapper/dists/gradle-2.14.1-all/53l0mv9mggp9q5m2ip574m21oh/gradle-2.14.1/Вниз.
   • Исправлятьsrc/core/org/gradle/api/artifacts/ArtifactRepositoryContainer.java файл, поставитьMAVEN_CENTRAL_URLИзмените переменную наrepo1.maven.org/maven2
   • Исправлятьsrc/core/org/gradle/api/internal/artifacts/dsl/DefaultRepositoryHandler.java файл, поставитьBINTRAY_JCENTER_URL Измените переменную наjcenter.bintray.com/
   • перестроить проект Android,cordova platform remove android && cordova platform add android, все готово.

7. Запустите пример проектаДавайте попробуем выполнить отладку в эмуляторе и на реальной машине Android:

   • iOS:cordova run iosОжидание завершения компиляции автоматически откроет симулятор iOS.
   • Андроид:cordova run androidилиcordova build androidпозжеyourApp/platforms/android/build/outputs/apk Найдите упакованный apk в каталоге для установки и отладки на реальной машине.
   • Реальная отладка устройства iOS требует наличия учетной записи разработчика и регистрации устройства разработки, которое здесь подробно описываться не будет.

Внедрите веб-просмотр Cross-walk с помощью плагина Cordova.

На предыдущем шаге мы успешно запустили образец html-файла в среде Cordova. Но в реальной разработке мы столкнемся с проблемой отсталой версии системы Android, низкой производительности собственного веб-просмотра и плохой совместимости, поэтому нам нужно заменить родной веб-просмотр Android на Cross-walk, чтобы запустить наш проект. Сообщество разработчиков Cross-walk подготовило для нас плагин Cordova, просто запустите: cordova plugin add cordova-plugin-crosswalk-webview@latest —save Здесь следует отметить, что необходимо добавить@latestсуффикс, установите версию 2.2.0+, иначе вы столкнетесь#XWALK-7422 Эта проблема. После успешной установки сноваcordova build android , вы обнаружите, что выводятся два файла apk, один для платформы arm и один для платформы x86.Объем увеличен примерно на 20 МБ по сравнению с исходным файлом, а дополнительный объем - это время выполнения crosswalk-webview. Вы также можетеconfig.xmlСредние настройки:

<plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
    <variable name="XWALK_VERSION" value="22+" />
    <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
    <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
    <variable name="XWALK_MODE" value="embedded" />
    <variable name="XWALK_MULTIPLEAPK" value="true" />
</plugin>

ПучокXWALK_MULTIPLEAPKЕсли установлено значение false, пакет apk, объединяющий две платформы, может быть упакован, естественно, объем увеличится до 40 Мб+.

Отладка проектов в веб-просмотре Crosswalk с помощью Chrome

Поскольку Crosswalk основан на Chromium, в нем есть функция удаленной отладки Chrome. Подключите компьютер к телефону Android и включите режим отладки USB.Открыв проект Cordova, введите адресную строку браузера Chrome.chrome://inspect, выберите свое устройство, вы можете открыть удаленную консоль, отладка реальной машины становится очень удобной. Vue Devtool также доступен здесь.

Небольшая оптимизация под iOS Заменить UIWebView на WKWebView

WKWebView — это новый компонент, представленный Apple в iOS 8. Его цель — предоставить новое высокопроизводительное решение для веб-просмотра, избавиться от старого и громоздкого UIWebView в прошлом, особенно от огромного объема памяти (откройте пример проекта, WKWebView занимает 23M, а UIWebView — 85M). Здесь мы будем использовать WKWebView для замены стандартного UIWebView Cordova:cordova plugin add cordova-plugin-wkwebview-engine@latest --saveи в config.xml<platform name="ios"> Добавить:

<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

Используйте API JavaScript плагина Cordova для вызова собственных системных интерфейсов.

Доступны наСтраница поиска плагиновПоиск нужного плагина к Камерессылка на плагинВозьмем для примера плагин, в командной строке заходим в папку где находится проект и вводимcordova plugin add cordova-plugin-camera --saveЗатем в js-части страницы сначала добавьте:

document.addEventListener("deviceready", func, false);

Все плагины должны выполняться после функции func. Все методы Camera определены в объекте navigator. Объект Navigator содержит информацию о браузере. Его поддерживают все браузеры. Вы можете вызвать метод navigator.xxx в любой части файла js. Но не все методы подключаемых модулей определены в объекте навигатора, в зависимости от документации конкретного подключаемого модуля. Например, плагин, продвигаемый Jiguangссылка на плагинМетоды определены в объекте окна. Для использования различных методов плагина после этого вы можете обратиться к документации соответствующего плагина.

Cordova-Plugin-Whitelist и стратегия безопасности CSP

По соображениям безопасности в средах Cordova 4.0 и выше необходимо установитьcordova-plugin-whitelistплагин и правильноconfig.xmlсередина<access origin="your-policy" />этикетки иindex.htmlсерединаMETAУстановите определенные настройки для меток, чтобы предотвратить проблемы безопасности, такие как межсайтовые атаки в режиме общего веб-просмотра. бегать:

cordova plugin add cordova-plugin-whitelist --save

и редактироватьconfig.xml:

    <!--以下是开发环境配置，不对来源做任何限制，生产打包时需要设置-->
    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />

существуетindex.htmlДобавить:

<!--同样，生产打包时需要严格设置-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; font-src * data:; img-src *; script-src *;">

Подробные настройки CSP (Content-Security-Policy):

• инструкция:
• Значение команды:

Режим упаковки фрагментов Vue.js

В большом приложении нам может понадобиться разбить приложение на несколько небольших модулей, которые загружаются с сервера по запросу. Vue.js позволяет определять компоненты как фабричную функцию, которая динамически разрешает определение компонента. Фабричная функция получает обратный вызов разрешения, который вызывается при получении определения компонента, загруженного с сервера. При определении маршрутизатора вы можете присвоить свойству компонента фабричную функцию,require.ensureЭто обычный метод асинхронной загрузки. Скобки могут быть пустыми. Запись здесь эквивалентна первой загрузке, но не выполняется. Выполняется следующее требование.require.ensureСинтаксис говорит webpack автоматически разбивать скомпилированный код на разные части. Упаковка в командной строкеnpm run buildПосле этого в папке dist/static/js появится дополнительный файл js и файл карты.

routes:[{
    path:'/example',component:resolve => require.ensure(['../components/example.vue'], () => {
        resolve(require('../views/example.vue'))
    })
}】

если тыrequire.ensureФункция ссылается на более чем два модуля, например, все компоненты маршрута упакованы в один и тот же асинхронный модуль.require.ensureВ качестве имени используется третий параметр, и webpack упакует их вместе, например:

require.ensure([], function(require){
    var list = require('./list');
    list.show();
    var edit = require('./edit');
    edit.display();
}, 'all');

list.js и edit.js будут упакованы в один файл с именем all.js. Если вы не хотите упаковывать их вместе, вы можете написать только два файла require.ensure для ссылки на эти два файла соответственно.УведомлениеЕсли вы хотите, чтобы сгенерированный файл был фрагментом, который мы предоставили, вам нужно изменить конфигурацию веб-пакета и изменить 19-ю строку build/webpack.prod.conf.js следующим образом:

chunkFilename: utils.assetsPath('js/[name].js')

Добавить функцию горячего обновления CodePush

Чтобы реализовать функцию выпуска одного компонента и горячего обновления в этой архитектуре приложения, был представлен инструмент CodePush, разработанный Microsoft.

• бегать:

cordova plugin add cordova-plugin-code-push@latest --save

• Установите командную строку code-push и зарегистрируйте учетную запись (только для разработки и пробной версии, для официального развертывания будет специальная учетная запись):

sudo npm install -g code-push-cli
code-push register //你可以通过 Github 或者 微软帐号登录
code-push login //登录后会在本地生成 session 文件用来验证你的发布权限

• Создайте приложение:

code-push app add <appName>

На этом шаге будет сгенерирован ключ и скопирован ключ при подготовке к следующему шагу.

• в приложенииconfig.xmlНастройте ключ развертывания в:

<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
</platform>
<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>

• В твоемindex.htmlВ политике безопасности Allow добавьтеcodepush.azurewebsites.netдоменное имя:

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net ... />

• Добавьте логику обновления кода:

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        const downloadProgress = (progress) => { console.log(`Downloaded ${progress.receivedBytes} of ${progress.totalBytes}`); }
        codePush.sync( null, {updateDialog: true, installMode:InstallMode.IMMEDIATE, mandatoryInstallMode: InstallMode.IMMEDIATE}, downloadProgress );
    }
};
app.initialize();

На этом этапе переупакуйте приложение и запустите его.

• Проверить функциональность кода выпуска

После изменения любого вашего кода запустите:

code-push release-cordova <appName> <platform>

code-push release-cordova MyApp-ios ios
code-push release-cordova MyApp-Android android

• Закройте приложение, снова откройте его и проверьте, было ли обновление успешным.

пользовательский плагин

В реальных проектах вам может понадобиться разработать некоторые специальные плагины самостоятельно. Это требует некоторых знаний о нативной разработке. Вот пример разработки плагина для iOS.

• Сначала создайте каталог подключаемого модуля в любом каталоге, например, создайте новую папку rayeye-TestPlugin на рабочем столе, а затем создайте два новых каталога, src и www, в каталоге com.anasit.callnative. -in код соответствующей платформы. www хранит js-код подключаемого модуля, а затем создает файл plugin.xml, в который записывается соответствующая информация о конфигурации подключаемого модуля. В этом примере разрабатывается только платформа iOS. , поэтому создайте новый каталог ios в разделе src.

• Создайте testPlugin.js в папке www:

  var argscheck = require('cordova/argscheck'),
  exec = require('cordova/exec');
  var testPlugin = function(successCallback, errorCallback, options) {
  argscheck.checkArgs('fFO', 'navigator.testPlugin', arguments);
  options = options || {};
  var getValue = argscheck.getValue;
  var a = getValue(options.a, 'aaa');
  var b = getValue(options.b, 'bbb');
  var args = [a, b];
  exec(successCallback, errorCallback,"testPlugin","test",args);
  };
  module.exports = testPlugin;
  
  

• В нативной части iOS создайте файлы IosPlugin.h и IosPlugin.m в папке src/ios:

  //  IosPlugin.h
  #import <Cordova/CDV.h>
  @interface IosPlugin : CDVPlugin
  - (void)test:(CDVInvokedUrlCommand*)command;
  @end
  
  

• //  IosPlugin.m
  #import "IosPlugin.h"
  #import <Cordova/CDV.h>
  @implementation IosPlugin
  - (void)test:(CDVInvokedUrlCommand *)command{
  NSString *s1 = [NSString stringWithFormat:@"%@", [command.arguments objectAtIndex:0]];
  NSString *s2 = [NSString stringWithFormat:@"%@", [command.arguments objectAtIndex:1]];
  UIAlertView *alertview = [[UIAlertView alloc] initWithTitle:s1 message:s2 delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
  [alertview show];
  }
  @end
  
  

• Отредактируйте файл plugin.xml:

  <?xml version="1.0" encoding="UTF-8"?>
  <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
      id="rayeye-TestPlugin"
      version="0.0.1">
      <name>rayeye-TestPlugin</name>
      <description>Call Native Plugin</description>
      <license>Apache 2.0</license>
      <keywords>call native</keywords>
      <js-module name="testPlugin" src="www/testPlugin.js">
          <clobbers target="window.testPlugin"/>
      </js-module>
      <platform name="ios">
          <config-file target="config.xml" parent="/*">
              <feature name="testPlugin">
                  <param name="ios-package" value="IosPlugin" />
              </feature>
          </config-file>
  
          <header-file src="src/ios/IosPlugin.h" />
          <source-file src="src/ios/IosPlugin.m" />
      </platform>
  </plugin>
  
  

• Откройте командную строку в корневой директории проекта, введите Cordova plugin add rayeye-TestPlugin (примечание: пишите по заданному вами пути), нажмите Enter, плагин будет автоматически установлен в директорию plugins внутри корневой директории проекта.

• Наконец вызовите файл подкачкиwindow.testPlugin(successcallback, errorcallback, {a: "111",b: "222"});Появится родное всплывающее окно.

Производственная упаковка Android

• Откройте /platforms/android под своим проектом Cordova из Android Studio «Файл» -> «Открыть».
• Выберите «Сборка» -> «Создать подписанный APK» и нажмите «Далее».
• Выберите здесь существующую подпись или создайте новую. Нажмите кнопку "Далее".
• Выберите здесь рабочую версию выпуска и нажмите «Готово» для завершения.

Производственная упаковка iOS

• Предпосылка заключается в том, что в Apple Developer Networkdeveloper.apple.com/account/Станция генерирует необходимые файлы appid, сертификата и профиля, которые не являются исчерпывающими.
• Измените имя приложения в отображаемом имени.
• Откройте проект с помощью Xcode, обратите внимание на проект .xcworkspace (белый цвет), а не на проект .xcodeproj (синий цвет).
• Измените загрузочный образ и значок приложения в Resources/Images.xcassets, AppIcon — это значок соответствующей платформы, а LaunchImage — загрузочный образ.
• Выберите «Продукт» -> «Редактировать схему...», выберите «Выпуск» в «Конфигурации сборки» и нажмите «Закрыть».
• Выберите «Продукт» -> «Архив» в строке меню, выберите проект только что, выберите «Экспорт ...», выберите первый (Сохранить для развертывания в магазине приложений iOS) и нажмите «Экспорт». Затем будет создана папка, которая является пакетом ipa.
• Откройте загрузчик приложений, выберите «Доставить приложение», выберите созданный ранее пакет ipa, а затем следующий шаг.
• идтиitunesconnect.apple.com/WebObjects/…Заполните информацию, связанную с приложением

Использование Авроры Толчок

• Адрес плагинаgithub.com/jpush/jpush…
• Установить:cordova plugin add jpush-phonegap-plugin --variable API_KEY=your_jpush_appkey