Znaczniki, styl, skrypt i aktualizowanie miniaplikacji

Thomas Steiner

Język znaczników

Jak już wspomnieliśmy, miniaplikacje można tworzyć w różnych dialektach języka HTML, a nie w zwykłym języku HTML. Jeśli z interpolacją i dyrektywami w formacie Vue.js, poczujesz się bezpośrednio w domu, ale podobne pojęcia istniały wcześniej w Transformacjach XML. (XSLT). Poniżej znajdziesz przykładowy kod z platformy WeChat WXML, ale koncepcja polega na tak samo na wszystkich miniplatformach aplikacji, AXML, Baidu Swan Element, ByteDance TTML (mimo że w Narzędziach deweloperskich jest to Bxml), HTML. Tak jak w przypadku Vue.js, podstawowy element czyli koncepcja programowania miniaplikacji. model-view-viewmodel (MVVM).

Powiązanie danych

Powiązanie danych odpowiada plikowi Vue.js interpolacja tekstu.

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

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

Renderowanie listy

Renderowanie list działa jak dyrektywa v-for dla 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 jak Vue.js dyrektywę v-if.

<!-- 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ć imperatywu, sklonowanie elementu content z szablonu HTML, Szablonów WXML można używać 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 zależy od dialektów CSS. Nazwa WeChat WXSS. Alipay to usługa ACSS, czyli ACSS. CSS, a byteDance – dialekt jest określany jako Usługi pomocy technicznej. Łączy je to, że rozszerzają CSS za pomocą elastycznych pikseli. Przy tworzeniu zwykłego arkusza CSS muszą przeliczać wszystkie jednostki pikseli, by przystosowywać się do różnych o różnych szerokościach i współczynnikach proporcji piksela. Funkcja TTSS obsługuje jako warstwę bazową jednostki rpx, co oznacza, że miniaplikacja przejmuje zadanie od programisty i przekształca jednostki w jego imieniu, na podstawie: określonej szerokości ekranu: 750rpx. Na przykład na telefonie Pixel 3a o szerokości ekranu 393px (i współczynnik pikseli urządzenia wynoszący 2.75) dla reklam elastycznych 200rpx zmienia się na 104px na rzeczywistym urządzeniu podczas sprawdzania za pomocą Narzędzi deweloperskich w Chrome (393 piksele / 750 rpx * 200 r. ≈ 104 pikseli). Na Androidzie ta sama koncepcja nazywa się piksel niezależny 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;
}

Komponenty (patrz więcej informacji) nie korzystają z modelu shadow DOM, dlatego style zadeklarowane na podstawie zasięgu strony do wszystkich komponentów. Często organizowaniem pliku arkusza stylów jest użycie jednego głównego arkusza style globalne i osobne arkusze stylów dla każdej strony miniaplikacji. Style mogą zostać zaimportowany za pomocą reguły @import, która działa jak @import reguła CSS. Podobnie jak w języku HTML, style mogą być również deklarowane w treści, w tym dynamiczna interpolacja tekstu (patrz before).

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

Tworzenie scenariusza

Miniaplikacje obsługują „bezpieczny podzbiór” JavaScript z obsługą modułów o różnych parametrach które przypominają ciągi CommonJS lub RequireJS. Kodu JavaScript nie można wykonywać za pomocą algorytmu eval(), a żadnych funkcji nie można tworzyć za pomocą new Function() kontekst wykonania skryptów to V8 lub JavaScriptCore na urządzeniach i V8 lub NW.js w symulatorze. Zwykle możliwe jest kodowanie przy użyciu składni ES6 lub nowszej, bo konkretne Narzędzia deweloperskie automatycznie transpilują kod na ES5, jeśli celem kompilacji jest systemu operacyjnego ze starszą implementacją WebView (zobacz więcej informacji). dokumentacja dostawców superaplikacji zawiera wyraźną informację, że ich języki skryptowe nie są które należy mylić i różnią się od JavaScriptu. To stwierdzenie dotyczy jednak głównie sposób działania modułów, czyli nie obsługują one Moduły ES.

Jak już wspomnieliśmy, koncepcja programowania miniaplikacji to model-view-viewmodel (MVVM). Warstwa logiczna i warstwa widoku działają w różnych wątkach, co oznacza, że interfejs użytkownika nie mogą być blokowane przez długotrwałe operacje. Mówiąc ogólnie o skryptach działających w Web Worker:

Język skryptów WeChat nazywa się WXS, Alipay's SJS, podobnie jak w ByteDance SJS Baidu wspomina o JS w odniesieniu do ich własne. Skrypty te należy dołączyć za pomocą specjalnego rodzaju tagu, np. <wxs> w WeChat Natomiast szybka aplikacja używa zwykłych tagów <script> i ES6. Składnia 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);

JavaScript Bridge API

Most JavaScript, który łączy miniaplikacje z systemem operacyjnym, umożliwia aby korzystać z funkcji systemu operacyjnego (zobacz Dostęp do zaawansowanych funkcji. it udostępnia też wiele wygodnych metod. Aby dowiedzieć się więcej, zapoznaj się z różnymi interfejsami API z WeChat, Alipay Baidu ByteDance, i Szybka aplikacja.

Wykrywanie funkcji jest proste, ponieważ wszystkie platformy udostępniają (w skrócie nazywanym canIUse(), której nazwa prawdopodobnie została zainspirowana witryną caniuse.com. Dla: np. ByteDance's tt.canIUse() umożliwia sprawdzanie pomocy technicznej 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 platformy miniaplikacji mają system backendu, który umożliwia deweloperom aplikacji przesyłanie nowych wersji ich miniaplikacje. Następnie superaplikacja używa tego systemu, aby sprawdzać dostępność i pobierać aktualizacje. Niektóre superaplikacje przeprowadzanie aktualizacji całkowicie w tle – sama miniaplikacja nie ma na nie wpływu. przepływu danych. Inne superaplikacje dają większą kontrolę nad samymi miniaplikacjami.

W tych akapitach opisujemy mechanizm aktualizacji miniaplikacji WeChat jako przykład zaawansowanego procesu. . WeChat sprawdza dostępność aktualizacji w tych 2 przypadkach:

1. WeChat będzie regularnie sprawdzać dostępność aktualizacji ostatnio używanych miniaplikacji, dopóki działa. Jeśli aktualizacja zostanie pobrana, a następnie zostanie zastosowana synchronicznie po następnym uruchomieniu przez użytkownika funkcji „na zimno” To miniaplikacja. Miniaplikacje uruchamiane na zimno mają miejsce, gdy miniaplikacja nie była aktualnie uruchomiona, gdy użytkownik został otwarty (WeChat wymusza zamknięcie miniaplikacji po 5 minutach działania w tle).
2. WeChat sprawdza też dostępność aktualizacji, gdy miniaplikacja jest uruchamiana „na zimno”. Miniaplikacje, których użytkownik nie otworzył przez długi czas, synchronicznie sprawdzana jest dostępność aktualizacji i jest pobierana. Podczas pobierania aktualizacji musi czekać. Po zakończeniu pobierania aktualizacja zostanie zastosowana i otworzy się miniaplikacja. Jeśli nie można pobrać, np. z powodu słabego połączenia sieciowego miniaplikacja otwiera się mimo to. W przypadku miniaplikacji, przez użytkownika, wszelkie potencjalne aktualizacje są pobierane asynchronicznie w tle i są zostanie zastosowana przy następnym uruchomieniu miniaplikacji przez użytkownika.

Miniaplikacje można włączyć we wcześniejszych aktualizacjach za pomocą interfejsu API UpdateManager. Udostępnia te funkcje:

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

WeChat obsługuje również dodatkowe opcje dostosowywania aktualizacji dla deweloperów miniaplikacji w systemie backendu: 1. Jedna z opcji pozwala programistom na rezygnację z aktualizacji synchronicznych w przypadku użytkowników, którzy mają już minimalnej wersji zainstalowanej miniaplikacji i zamiast tego wymusza stosowanie aktualizacji asynchronicznych. 2. Inna opcja pozwala deweloperom ustawić minimalną wymaganą wersję miniaplikacji. Dzięki temu aktualizacje asynchroniczne z wersji niższej niż minimalna wymagana wersja wymuszają ponowne wczytanie miniaplikacji po aktualizację. Blokuje też otwieranie starszej wersji miniaplikacji w przypadku pobrania aktualizacja kończy się niepowodzeniem.

Podziękowania

Ten artykuł zrecenzował(a) Joe Medley Kayce Basques Milica Mihajlija, Alan Kent, i Keith Gu.