Znaczniki, styl, skrypt i aktualizowanie miniaplikacji

Język znaczników

Jak już wspomnieliśmy, miniaplikacje są napisane w różnych dialektach HTML, a nie w zwykłym języku HTML. Jeśli zdarzyło Ci się napotkać interpolację i dyrektywy tekstowe Vue.js, poczujesz się od razu jak u siebie, jednak podobne pojęcia istniały wcześniej w przekształceniach XML (XSLT). Poniżej znajdziesz przykłady kodu z WXML w WeChat, ale w przypadku wszystkich platform miniaplikacji Alipay jest ten sam mechanizm: AXML, Swan Element Baidu, TTML z Bxml (Mimo że Narzędzia deweloperskie nazywają go Bxml) i HTML aplikacji Quick App. Podobnie jak w przypadku Vue.js podstawową koncepcją programowania miniaplikacji jest model-view-viewmodel (MVVM).

Powiązanie danych

Powiązanie danych odpowiada interpolacji tekstu Vue.js.

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

Renderowanie listy

Renderowanie listy działa tak jak dyrektywa v-for Vue.js.

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

Renderowanie warunkowe

Renderowanie warunkowe działa tak jak dyrektywa v-if z Vue.js.

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

Szablony

Zamiast wymagać imperatywnego klonowania pliku content szablonu HTML, można używać szablonów WXML deklaratywnie za pomocą atrybutu is, który prowadzi do definicji szablonu.

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

Styl

Styl zmienia się w przypadku dialektów CSS. Nazwa WeChat ma nazwę WXSS. W przypadku Alipay nazwa to ACSS, po prostu CSS w Baidu, a dialekt w Baidu to TTSS. Wspólną cechą jest to, że rozszerzają CSS o elastyczne piksele. Podczas pisania zwykłego kodu CSS deweloperzy muszą przekonwertować wszystkie jednostki pikseli, aby dostosować je do różnych ekranów urządzeń mobilnych o różnych szerokościach i proporcjach pikseli. TTSS obsługuje jednostkę rpx jako warstwę bazową, co oznacza, że miniaplikacja przejmuje zadanie od dewelopera i konwertuje jednostki w jego imieniu na podstawie określonej szerokości ekranu 750rpx. Na przykład w przypadku telefonu Pixel 3a o szerokości ekranu 393px (i współczynniku pikseli urządzenia równym 2.75) responsywny 200rpx ma wartość 104px na rzeczywistym urządzeniu po sprawdzeniu w Narzędziach deweloperskich w Chrome (393 x 750 piks. × 200 piks. ≈ 104 piks.). Na Androidzie ta sama koncepcja jest nazywana pikselem niezależnym od gęstości.

/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

Ponieważ komponenty (zobacz później) nie używają modelu shadow DOM, style zadeklarowane w przypadku zasięgu strony są stosowane do wszystkich komponentów. Typowe uporządkowanie plików arkuszy stylów to jeden główny arkusz stylów dla stylów globalnych i pojedyncze arkusze stylów na poszczególnych stronach specyficzne dla każdej strony miniaplikacji. Style można importować za pomocą reguły @import, która działa tak jak w regule CSS @import. Podobnie jak w kodzie HTML, style można również zadeklarować w tekście, w tym stosować dynamiczną interpolację tekstu (patrz przed).

<view style="color:{{color}};" />

Tworzenie scenariusza

Miniaplikacje obsługują „bezpieczny podzbiór” kodu JavaScript, który obejmuje obsługę modułów o różnej składni przypominających CommonJS lub RequireJS. Kodu JavaScript nie można wykonać za pomocą eval() ani tworzyć funkcji za pomocą new Function(). Kontekst wykonywania skryptów to V8 lub JavaScriptCore na urządzeniach oraz V8 lub NW.js w symulatorze. Zwykle możliwe jest kodowanie za pomocą składni ES6 lub nowszej, ponieważ narzędzia deweloperskie automatycznie transpilują kod do wersji ES5, jeśli celem kompilacji jest system operacyjny ze starszą implementacją WebView (patrz później). W dokumentacji dostawców superaplikacji wyraźnie stwierdza się, że ich języków skryptów nie należy mylić z językiem JavaScript i odróżniamy je od JavaScriptu. To stwierdzenie odnosi się jednak głównie do sposobu działania modułów, czyli do tego, że nie obsługują one jeszcze standardowych modułów ES.

Jak już wspomnieliśmy wcześniej, koncepcja programowania miniaplikacji to model-view-viewmodel (MVVM). Warstwa logiczna i warstwa widoku działają w różnych wątkach, co oznacza, że interfejs nie jest blokowany przez długotrwałe operacje. czyli na przykład w skryptach internetowych,

Język skryptów WeChat nazywa się WXS, SJS Alipay i SJS – ByteDance. Baidu wspomina o JS, odwołując się do nich. Te skrypty należy uwzględnić za pomocą specjalnego rodzaju tagu, np. <wxs> w WeChat. Z kolei szybka aplikacja używa standardowych tagów <script> i składni ES6 JS.

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

Moduły można też ładować za pomocą atrybutu src lub importować za pomocą require().

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

Interfejs API mostu JavaScript

Most JavaScript, który łączy miniaplikacje z systemem operacyjnym, umożliwia korzystanie z jego możliwości (patrz Dostęp do zaawansowanych funkcji. Zapewnia też wiele wygodnych metod. Ogólne informacje znajdziesz w różnych interfejsach API WeChat, Alipay, Baidu, ByteDance i Quick App.

Wykrywanie funkcji jest proste, ponieważ wszystkie platformy udostępniają (dosłownie tak nazywaną) metodę canIUse(), której nazwa wydaje się być inspirowana witryną caniuse.com. Na przykład funkcja tt.canIUse() w ByteDance umożliwia sprawdzanie interfejsów API, metod, parametrów, opcji, komponentów i atrybutów.

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");

Aktualizacje

Miniaplikacje nie mają ustandaryzowanego mechanizmu aktualizacji (dyskusja na temat potencjalnej standaryzacji). Wszystkie miniplatformy aplikacji mają system backendu, który umożliwia deweloperom miniaplikacji przesyłanie ich nowych wersji. Superaplikacja używa następnie tego systemu backendu, aby sprawdzać i pobierać aktualizacje. Niektóre superaplikacje wykonują aktualizacje w całości w tle i nie mają żadnego wpływu na przepływ aktualizacji. Inne superaplikacje dają większą kontrolę nad samymi miniaplikacjami.

W tych akapitach poniżej szczegółowo opisujemy mechanizm aktualizowania miniaplikacji WeChat. WeChat sprawdza dostępne aktualizacje w tych 2 przypadkach:

1. Gdy WeChat jest uruchomiony, WeChat regularnie sprawdza dostępność aktualizacji ostatnio używanych miniaplikacji. W przypadku wykrycia aktualizacji aktualizacja jest pobierana i synchronicznie stosowana przy następnym uruchomieniu miniaplikacji „na zimno” przez użytkownika. Miniaplikacja uruchamiana „na zimno” ma miejsce wtedy, gdy miniaplikacja nie była uruchomiona, gdy użytkownik ją uruchomił (WeChat wymusza zamknięcie miniaplikacji po 5 minutach działania w tle).
2. WeChat sprawdza też dostępność aktualizacji podczas uruchamiania miniaplikacji „na zimno”. W przypadku miniaplikacji, których użytkownik nie otwierał od dłuższego czasu, ich aktualizacja jest sprawdzana i pobierana synchronicznie. Podczas pobierania aktualizacji użytkownik musi czekać. Po zakończeniu pobierania aktualizacja zostanie zastosowana i wyświetli się miniaplikacja. Jeśli pobieranie się nie powiedzie, np. z powodu słabego połączenia sieciowego, miniaplikacja się otworzy. W przypadku miniaplikacji, które użytkownik ostatnio otwierał, potencjalna aktualizacja jest pobierana asynchronicznie w tle i stosowana przy następnym uruchomieniu miniaplikacji „na zimno”.

W miniaplikacjach można włączyć wcześniejsze aktualizacje za pomocą interfejsu API UpdateManager. Udostępnia te funkcje:

• Powiadamia miniaplikację o sprawdzaniu dostępności aktualizacji. (onCheckForUpdate)
• Powiadamia miniaplikację o pobraniu i udostępnieniu aktualizacji. (onUpdateReady)
• Powiadamia miniaplikację, gdy nie można pobrać aktualizacji. (onUpdateFailed)
• Pozwala miniaplikacji na wymuszanie instalacji dostępnej aktualizacji, co spowoduje ponowne uruchomienie aplikacji. (applyUpdate)

WeChat udostępnia też dodatkowe opcje dostosowywania aktualizacji dla deweloperów miniaplikacji w swoim systemie backendu: 1. Jedna z opcji umożliwia deweloperom zrezygnowanie z aktualizacji synchronicznych w przypadku użytkowników, którzy mają już zainstalowaną określoną minimalną wersję miniaplikacji. Zamiast tego wymuszają one asynchroniczne aktualizacje. 2. Inna opcja pozwala deweloperom ustawić minimalną wymaganą wersję miniaplikacji. Spowoduje to, że asynchroniczne aktualizacje z wersji starszej niż minimalna wymagana wersja wymuszą ponowne wczytanie miniaplikacji po jej zastosowaniu. Uniemożliwia też otwieranie starszej wersji miniaplikacji w przypadku niepowodzenia pobierania aktualizacji.

Podziękowania

Ten artykuł został zweryfikowany przez Joe Medley, Kayce'a Basquesa, Milica Mihajlija, Alan Kenta i Keitha Gu.