Halaman ini diterjemahkan oleh Cloud Translation API.

Markup, penataan gaya, skrip, dan update aplikasi mini

Thomas Steiner

Markup languages

Seperti yang diuraikan sebelumnya, aplikasi mini ditulis dengan dialek HTML, bukan dengan HTML biasa. Jika Anda menangani interpolasi dan perintah teks Vue.js, Anda akan merasa langsung di rumah, tetapi konsep serupa ada jauh sebelumnya dalam Transformasi XML (XSLT). Di bawah ini, Anda dapat melihat contoh kode dari WXML, tetapi konsepnya adalah hal yang sama untuk semua platform aplikasi mini, yaitu aplikasi AXML, milik Baidu Swan Element, ByteDance TTML (meskipun DevTools menyebutnya Bxml), dan fitur Quick App HTML. Sama seperti Vue.js, komponen dasar konsep pemrograman aplikasi mini model-view-viewmodel (MVVM).

Data binding

Data binding sesuai dengan Vue.js' jenis interpolasi teks.

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

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

Rendering daftar

Rendering daftar berfungsi seperti perintah v-for Vue.js.

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

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

Rendering bersyarat

Rendering bersyarat berfungsi seperti Vue.js Perintah 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",
  },
});

Template

Alih-alih memerlukan cloning content template HTML, Template WXML dapat digunakan secara deklaratif melalui atribut is yang ditautkan ke definisi template.

<!-- 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" },
  },
});

Penataan gaya

Penataan gaya terjadi pada dialek CSS. WeChat bernama WXSS. Untuk Alipay, milik mereka disebut ACSS, CSS, dan untuk ByteDance, disebut sebagai TTSS. Kesamaannya adalah CSS memperluas CSS dengan piksel responsif. Saat menulis CSS biasa, pengembang perlu mengonversi semua unit {i>pixel<i} untuk beradaptasi dengan berbagai layar perangkat seluler dengan lebar dan rasio piksel yang berbeda. TTSS mendukung unit rpx sebagai lapisan dasarnya, yang berarti aplikasi mini mengambil alih pekerjaan dari developer dan mengonversi unit atas nama mereka, berdasarkan lebar layar yang ditentukan sebesar 750rpx. Misalnya, pada ponsel Pixel 3a dengan lebar layar 393px (dan rasio piksel perangkat 2.75), 200rpx responsif akan menjadi 104px di perangkat sebenarnya saat diperiksa dengan Chrome DevTools (393px / 750rpx * 200rpx ≈ 104px). Di Android, konsep yang sama disebut piksel kepadatan mandiri.

Memeriksa tampilan dengan Chrome DevTools yang padding piksel responsifnya ditetapkan dengan `200rpx` menunjukkan bahwa itu sebenarnya `104px` di perangkat Pixel 3a. — Memeriksa padding sebenarnya di perangkat Pixel 3a dengan Chrome DevTools.

/* 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;
}

Karena komponen (lihat nanti) tidak menggunakan shadow DOM, gaya yang dideklarasikan pada jangkauan halaman ke dalam semua komponen. Penyusunan file stylesheet umum adalah memiliki satu lembar gaya root untuk gaya global, dan stylesheet per halaman individual yang khusus untuk setiap laman aplikasi mini. Gaya dapat diimpor dengan aturan @import yang berperilaku seperti @import CSS sesuai aturan. Seperti dalam HTML, gaya juga dapat dideklarasikan secara inline, termasuk interpolasi teks dinamis (lihat sebelum).

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

Pembuatan Naskah

Aplikasi mini mendukung "subset aman" JavaScript yang menyertakan dukungan untuk modul yang menggunakan berbagai sintaksis yang mengingatkan tentang CommonJS atau RequireJS. Kode JavaScript tidak dapat dijalankan melalui eval() dan tidak ada fungsi yang dapat dibuat dengan new Function(). Konteks eksekusi skrip adalah V8 atau JavaScriptCore di perangkat, dan V8 atau NW.js di simulator. Pengkodean dengan ES6 atau {i>syntax<i} yang lebih baru biasanya dimungkinkan, karena DevTools tertentu secara otomatis mentranspilasi kode ke ES5 jika target build adalah sistem operasi dengan implementasi WebView yang lebih lama (lihat nanti). Tujuan dokumentasi penyedia aplikasi super secara eksplisit menyebutkan bahwa bahasa skrip mereka tertukar dan berbeda dari JavaScript. Namun, pernyataan ini sebagian besar hanya mengacu pada cara kerja modul, yaitu tidak mendukung standar Modul ES.

Seperti yang disebutkan sebelumnya, konsep pemrograman aplikasi mini adalah model-view-viewmodel (MVVM). Lapisan logika dan lapisan tampilan berjalan di thread berbeda, yang berarti antarmuka pengguna tidak diblokir oleh operasi yang berjalan lama. Dalam istilah web, Anda dapat membayangkan skrip yang berjalan di Pekerja Web.

Bahasa skrip WeChat disebut WXS, milik Alipay SJS, ByteDance juga SJS. Baidu menyebutkan JS saat mereferensikan milik mereka. Skrip ini harus disertakan menggunakan jenis tag khusus, misalnya, <wxs> di WeChat. Sebaliknya, Aplikasi Cepat menggunakan tag <script> reguler dan ES6 Sintaksis JS.

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

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

Modul juga dapat dimuat melalui atribut src, atau diimpor melalui 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

Jembatan JavaScript yang menghubungkan aplikasi mini dengan sistem operasi memungkinkan untuk menggunakan kemampuan OS (lihat Akses ke fitur canggih. Ini juga menawarkan sejumlah metode praktis. Sebagai ringkasan, Anda dapat melihat berbagai API WeChat, Alipay, Baidu ByteDance, dan Aplikasi Cepat.

Deteksi fitur sangat mudah, karena semua platform menyediakan (secara harfiah disebut seperti ini) Metode canIUse() yang namanya tampaknya terinspirasi oleh situs caniuse.com. Sebagai contoh, ByteDance tt.canIUse() memungkinkan pemeriksaan dukungan untuk API, metode, parameter, opsi, komponen, dan atribut.

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

Pembaruan

Aplikasi mini tidak memiliki mekanisme update standar (diskusi tentang potensi standardisasi). Semua platform aplikasi mini memiliki sistem backend, yang memungkinkan developer aplikasi mini mengupload versi baru aplikasi mini mereka. Aplikasi super kemudian menggunakan sistem backend tersebut untuk memeriksa dan mendownload update. Beberapa aplikasi super menjalankan update sepenuhnya di latar belakang, tanpa memengaruhi update pada aplikasi mini alur kerja. Aplikasi super lainnya memberikan kontrol lebih besar untuk aplikasi mini itu sendiri.

Sebagai contoh proses yang kompleks, paragraf berikut menjelaskan mekanisme update WeChat untuk aplikasi mini secara lebih detail. WeChat memeriksa update yang tersedia dalam dua skenario berikut:

WeChat akan memeriksa update aplikasi mini yang baru-baru ini digunakan secara rutin selama WeChat aktif. Jika ditemukan, update didownload, dan diterapkan secara sinkron saat berikutnya pengguna melakukan cold start aplikasi mini. Cold start aplikasi mini terjadi ketika aplikasi mini tidak sedang dijalankan ketika pengguna membukanya (WeChat menutup paksa aplikasi mini setelah berada di latar belakang selama 5 menit).
WeChat juga memeriksa update saat aplikasi mini melakukan cold start. Untuk aplikasi mini yang belum dibuka pengguna dalam waktu yang lama, update diperiksa dan didownload secara sinkron. Selagi mengunduh pembaruan, pengguna harus menunggu. Setelah download selesai, update akan diterapkan, dan aplikasi mini akan terbuka. Jika download gagal, misalnya karena konektivitas jaringan yang buruk, aplikasi mini tetap dapat dibuka. Untuk aplikasi mini yang yang baru saja dibuka pengguna, pembaruan potensial akan diunduh secara asinkron di latar belakang dan akan diterapkan saat pengguna melakukan cold start-start aplikasi mini berikutnya.

Aplikasi mini dapat ikut serta dalam update lebih awal menggunakan UpdateManager API. Fungsi ini menyediakan:

Memberi tahu aplikasi mini saat pemeriksaan update dilakukan. (onCheckForUpdate)
Memberi tahu aplikasi mini saat update telah didownload dan tersedia. (onUpdateReady)
Memberi tahu aplikasi mini saat update tidak dapat didownload. (onUpdateFailed)
Mengizinkan aplikasi mini menginstal otomatis update yang tersedia, yang akan memulai ulang aplikasi. (applyUpdate)

WeChat juga menyediakan opsi penyesuaian update tambahan untuk developer aplikasi mini di sistem backend-nya: Akun Layanan 1. Satu opsi memungkinkan developer memilih untuk tidak menggunakan update sinkron bagi pengguna yang sudah memiliki versi minimum aplikasi mini yang diinstal, dan memaksa update menjadi asinkron. 2. Opsi lain memungkinkan developer menetapkan versi minimum aplikasi mini yang diperlukan. Ini akan membuat update asinkron dari versi yang lebih rendah dari versi minimum yang diperlukan, muat ulang aplikasi mini secara paksa setelah menerapkan pembaruan. Tindakan ini juga akan memblokir pembukaan aplikasi mini versi lama jika mendownload pembaruan gagal.

Ucapan terima kasih

Artikel ini telah ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.