Markup languages
Seperti yang diuraikan sebelumnya, bukan dengan HTML biasa, aplikasi mini ditulis dengan dialek HTML. Jika Anda pernah berurusan dengan interpolasi dan direktif teks Vue.js, Anda akan langsung merasa nyaman, tetapi konsep serupa sudah ada jauh sebelum itu dalam Transformasi XML (XSLT). Di bawah ini, Anda dapat melihat contoh kode dari WXML WeChat, tetapi konsepnya sama untuk semua platform aplikasi mini, yaitu AXML Alipay, Swan Element Baidu, TTML ByteDance (meskipun DevTools menyebutnya Bxml), dan HTML Quick App. Sama seperti Vue.js, konsep pemrograman aplikasi mini yang mendasarinya adalah model-view-viewmodel (MVVM).
Data binding
Data binding sesuai dengan interpolasi teks Vue.js.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Rendering daftar
Rendering daftar berfungsi seperti direktif 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 direktif v-if 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",
},
});
Template
Daripada memerlukan
pengklonan content template HTML secara imperatif,
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" },
},
});
Gaya visual
Penataan gaya dilakukan dengan dialek CSS. WeChat diberi nama
WXSS.
Untuk Alipay, CSS mereka disebut ACSS, CSS Baidu hanya
CSS, dan untuk ByteDance, dialek
mereka disebut
TTSS.
Kesamaan keduanya adalah memperluas CSS dengan piksel responsif. Saat menulis CSS biasa, developer perlu mengonversi semua unit piksel agar dapat beradaptasi dengan layar perangkat seluler yang berbeda dengan rasio piksel dan lebar yang berbeda. TTSS mendukung unit rpx sebagai lapisan dasarnya, yang berarti
aplikasi mini mengambil alih tugas dari developer dan mengonversi unit atas nama mereka, berdasarkan
lebar layar yang ditentukan sebesar 750rpx. Misalnya, di ponsel Pixel 3a dengan lebar layar
393px (dan rasio piksel perangkat 2.75), 200rpx responsif menjadi 104px di perangkat sebenarnya
saat diperiksa dengan Chrome DevTools (393 piksel / 750 rpx * 200 rpx ≈ 104 piksel). Di Android, konsep yang sama disebut piksel kepadatan mandiri.
/* 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 di halaman akan menjangkau semua komponen. Organisasi file stylesheet umum adalah memiliki satu stylesheet root untuk gaya global, dan stylesheet per halaman individual yang khusus untuk setiap halaman aplikasi mini. Gaya dapat diimpor dengan aturan @import yang berperilaku seperti aturan CSS @import. Seperti di HTML,
gaya juga dapat dideklarasikan sebaris, termasuk interpolasi teks dinamis (lihat
sebelumnya).
<view style="color:{{color}};" />
Pembuatan skrip
Aplikasi mini mendukung "subset aman" JavaScript yang mencakup dukungan untuk modul menggunakan berbagai sintaksis yang mengingatkan pada CommonJS atau RequireJS.
Kode JavaScript tidak dapat dieksekusi 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. Coding dengan sintaksis ES6 atau yang lebih baru biasanya dapat dilakukan,
karena DevTools tertentu secara otomatis mentranspilasi kode ke ES5 jika target build adalah
sistem operasi dengan implementasi WebView yang lebih lama (lihat nanti). Dokumentasi penyedia aplikasi super secara eksplisit menyebutkan bahwa bahasa scripting mereka tidak boleh disamakan dengan dan berbeda dari JavaScript. Namun, pernyataan ini sebagian besar hanya merujuk pada cara kerja modul, yaitu bahwa modul belum mendukung Modul ES standar.
Seperti yang disebutkan sebelumnya, konsep pemrograman aplikasi mini adalah model-view-viewmodel (MVVM). Lapisan logika dan lapisan tampilan berjalan di thread yang berbeda, yang berarti antarmuka pengguna tidak diblokir oleh operasi yang berjalan lama. Dalam istilah web, Anda dapat menganggap skrip berjalan di Web Worker.
Bahasa skrip WeChat disebut
WXS, Alipay
SJS, ByteDance juga
SJS.
Baidu menyebut JS saat merujuk pada JS mereka. Skrip ini harus disertakan menggunakan jenis tag khusus, misalnya, <wxs> di
WeChat. Sebaliknya, Aplikasi Cepat menggunakan tag <script> biasa dan sintaksis
JS ES6.
<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 penggunaan kemampuan OS (lihat Akses ke fitur canggih). Selain itu, library ini juga menawarkan sejumlah metode praktis. Untuk ringkasan, Anda dapat melihat berbagai API WeChat, Alipay, Baidu, ByteDance, dan Aplikasi Cepat.
Deteksi fitur sangat mudah, karena semua platform menyediakan metode canIUse() (secara harfiah disebut seperti ini) yang namanya tampaknya terinspirasi oleh situs caniuse.com. Misalnya, tt.canIUse()
ByteDance 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");
Update
Aplikasi mini tidak memiliki mekanisme update standar (diskusi seputar potensi standarisasi). Semua platform aplikasi mini memiliki sistem backend, yang memungkinkan developer aplikasi mini mengupload versi baru aplikasi mini mereka. Kemudian, aplikasi super menggunakan sistem backend tersebut untuk memeriksa dan mendownload update. Beberapa aplikasi super melakukan update sepenuhnya di latar belakang, tanpa cara apa pun bagi aplikasi mini itu sendiri untuk memengaruhi alur update. Aplikasi super lainnya memberikan kontrol yang lebih besar kepada aplikasi mini itu sendiri.
Sebagai contoh proses yang canggih, paragraf berikut menjelaskan mekanisme update WeChat untuk aplikasi mini secara lebih mendetail. WeChat memeriksa update yang tersedia dalam dua skenario berikut:
- WeChat akan memeriksa update aplikasi mini yang baru-baru ini digunakan secara rutin selama WeChat berjalan. Jika update ditemukan, update akan didownload, dan diterapkan secara serentak saat pengguna melakukan cold start aplikasi mini pada waktu berikutnya. Cold start aplikasi mini terjadi saat aplikasi mini tidak berjalan saat pengguna membukanya (WeChat menutup paksa aplikasi mini setelah berada di latar belakang selama 5 menit).
- WeChat juga memeriksa update saat aplikasi mini dimulai dalam kondisi cold start. Untuk aplikasi mini yang belum dibuka pengguna dalam waktu yang lama, update akan diperiksa dan didownload secara serentak. Saat update sedang didownload, 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 akan tetap terbuka. Untuk aplikasi mini yang baru-baru ini dibuka pengguna, setiap potensi update akan didownload secara asinkron di latar belakang dan akan diterapkan saat pengguna memulai aplikasi mini dari awal pada waktu berikutnya.
Aplikasi mini dapat memilih untuk menerima update lebih awal menggunakan UpdateManager API. API ini menyediakan fungsi berikut:
- 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) - Memungkinkan aplikasi mini menginstal update yang tersedia secara paksa, yang akan memulai ulang aplikasi.
(
applyUpdate)
WeChat juga menyediakan opsi penyesuaian update tambahan untuk developer aplikasi mini di sistem backend-nya: 1. Salah satu opsi memungkinkan developer memilih untuk tidak menggunakan update sinkron bagi pengguna yang sudah menginstal aplikasi mini dengan versi minimum tertentu, dan sebagai gantinya, memaksa update menjadi asinkron. 2. Opsi lain memungkinkan developer menetapkan versi minimum yang diperlukan untuk aplikasi mini mereka. Hal ini akan membuat update asinkron dari versi yang lebih rendah daripada versi minimum yang diperlukan memuat ulang aplikasi mini secara paksa setelah menerapkan update. Hal ini juga akan memblokir pembukaan versi lama aplikasi mini jika download update gagal.
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, dan Keith Gu.