Biçimlendirme dilleri
Daha önce belirtildiği gibi, mini uygulamalar düz HTML ile değil, HTML'nin lehçeleriyle yazılır. Daha önce Vue.js metin enterpolasyonu ve direktifleriyle çalıştıysanız kendinizi hemen evinizde gibi hissedeceksiniz. Ancak benzer kavramlar, XML Dönüşümleri'nde (XSLT) çok daha önce de vardı. Aşağıda WeChat'in WXML'inden kod örneklerini görebilirsiniz. Ancak bu kavram, tüm mini uygulama platformları için aynıdır. Örneğin, Alipay'in AXML'i, Baidu'nun Swan Element'i, ByteDance'ın TTML'i (Geliştirici Araçları'nda Bxml olarak adlandırılmasına rağmen) ve Quick App'in HTML'i. Vue.js'de olduğu gibi, temel mini uygulama programlama konsepti model-view-viewmodel (MVVM) şeklindedir.
Veri bağlama
Veri bağlama, Vue.js'deki metin enterpolasyonuna karşılık gelir.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Liste oluşturma
Liste oluşturma, Vue.js v-for yönergesi gibi çalışır.
<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5],
},
});
Koşullu oluşturma
Koşullu oluşturma, Vue.js'in v-if yönergesi gibi çalışır.
<!-- 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",
},
});
Şablonlar
HTML şablonunun content öğesinin zorunlu olarak kopyalanmasını gerektirmek yerine, WXML şablonları, bir şablon tanımına bağlanan is özelliği aracılığıyla bildirimsel olarak kullanılabilir.
<!-- 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" },
},
});
Stil
Biçimlendirme, CSS'nin lehçeleriyle yapılır. WeChat'in adı WXSS'dir.
Alipay'in CSS'si ACSS, Baidu'nun CSS'si CSS, ByteDance'in CSS'si ise TTSS olarak adlandırılır.
Bu birimlerin ortak özelliği, CSS'yi duyarlı piksellerle genişletmeleridir. Normal CSS yazarken geliştiricilerin, farklı genişliklere ve piksel oranlarına sahip farklı mobil cihaz ekranlarına uyum sağlamak için tüm piksel birimlerini dönüştürmesi gerekir. TTSS, temel katmanı olarak rpx birimini destekler. Bu nedenle, mini uygulama geliştiricinin işini devralır ve 750rpx olarak belirtilen ekran genişliğine göre birimleri geliştirici adına dönüştürür. Örneğin, ekran genişliği 393px olan bir Pixel 3a telefonda (cihaz piksel oranı 2.75) Chrome Geliştirici Araçları ile incelendiğinde duyarlı 200rpx, gerçek cihazda 104px olur (393 piksel / 750 rpx * 200 rpx ≈ 104 piksel). Android'de aynı kavram yoğunluktan bağımsız piksel olarak adlandırılır.
/* 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;
}
Bileşenler (ileride açıklanacaktır) gölge DOM'u kullanmadığından, bir sayfada belirtilen stiller tüm bileşenlere ulaşır. Genel stil için bir kök stil sayfası ve mini uygulamanın her sayfası için ayrı sayfa stil sayfaları kullanmak, yaygın bir stil sayfası dosyası düzenidir. Stiller, @import CSS @ kuralı gibi davranan bir @import kuralıyla içe aktarılabilir. HTML'de olduğu gibi, stiller satır içi olarak da bildirilebilir. Buna dinamik metin enterpolasyonu da dahildir (bkz. önceki).
<view style="color:{{color}};" />
Senaryo Yazma
Mini uygulamalar, CommonJS veya RequireJS'i hatırlatan farklı söz dizimlerini kullanan modüllerin desteğini içeren "güvenli bir JavaScript alt kümesini" destekler.
JavaScript kodu eval() aracılığıyla yürütülemez ve new Function() ile işlev oluşturulamaz. Komut dosyası yürütme bağlamı, cihazlarda V8 veya JavaScriptCore, simülatörde ise V8 veya NW.js'dir. ES6 veya daha yeni söz dizimiyle kodlama genellikle mümkündür. Bunun nedeni, derleme hedefi daha eski bir WebView uygulamasına sahip bir işletim sistemi ise söz konusu DevTools'un kodu otomatik olarak ES5'e çevirmesidir (sonraki bölüme bakın). Süper uygulama sağlayıcılarının dokümanlarında, komut dosyası dillerinin JavaScript ile karıştırılmaması gerektiği ve bu dillerin JavaScript'ten farklı olduğu açıkça belirtilmektedir. Ancak bu ifade, daha çok modüllerin çalışma şeklini, yani henüz standart ES modüllerini desteklemediklerini ifade eder.
Daha önce belirtildiği gibi, mini uygulama programlama kavramı model-view-viewmodel (MVVM) şeklindedir. Mantık katmanı ve görünüm katmanı farklı iş parçacıklarında çalışır. Bu nedenle, kullanıcı arayüzü uzun süren işlemler tarafından engellenmez. Web açısından, Web Worker'da çalışan komut dosyaları olarak düşünebilirsiniz.
WeChat'in komut dosyası diline WXS, Alipay'in komut dosyası diline SJS, ByteDance'ın komut dosyası diline ise SJS adı verilir.
Baidu, kendi JS'sine atıfta bulunurken bu terimi kullanır. Bu komut dosyaları, özel bir etiket türü kullanılarak eklenmelidir. Örneğin, WeChat'te <wxs>. Buna karşılık, Quick App normal <script> etiketlerini ve ES6 JS söz dizimini kullanır.
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view>{{m1.message}}</view>
Modüller, src özelliği aracılığıyla da yüklenebilir veya require() aracılığıyla içe aktarılabilir.
// /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 köprüsü API'si
Mini uygulamaları işletim sistemine bağlayan JavaScript köprüsü, işletim sistemi özelliklerinin kullanılmasını sağlar (bkz. Güçlü özelliklere erişim). Ayrıca, çeşitli kolaylık yöntemleri de sunar. Genel bir bakış için WeChat, Alipay, Baidu, ByteDance ve Quick App'in farklı API'lerini inceleyebilirsiniz.
Tüm platformlar, adını caniuse.com web sitesinden almış gibi görünen bir (kelimenin tam anlamıyla bu şekilde adlandırılan)
canIUse() yöntemi sağladığından özellik algılama işlemi basittir. Örneğin, ByteDance'in
tt.canIUse() API'ler, yöntemler, parametreler, seçenekler, bileşenler ve özellikler için destek kontrollerine olanak tanır.
// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");
Güncellemeler
Mini uygulamaların standart bir güncelleme mekanizması yoktur (potansiyel standartlaştırma ile ilgili tartışma). Tüm mini uygulama platformlarında, mini uygulama geliştiricilerin mini uygulamalarının yeni sürümlerini yüklemelerine olanak tanıyan bir arka uç sistemi bulunur. Süper uygulamalar, güncellemeleri kontrol etmek ve indirmek için bu arka uç sistemini kullanır. Bazı süper uygulamalar, güncellemeleri tamamen arka planda gerçekleştirir. Bu durumda mini uygulamanın güncelleme akışını etkileme yolu yoktur. Diğer süper uygulamalar, mini uygulamaların kendilerine daha fazla kontrol verir.
Gelişmiş bir sürece örnek olarak, aşağıdaki paragraflarda WeChat'in mini uygulamalar için güncelleme mekanizması daha ayrıntılı olarak açıklanmaktadır. WeChat, aşağıdaki iki durumda mevcut güncellemeleri kontrol eder:
- WeChat çalıştığı sürece, son kullanılan mini uygulamaların güncellemeleri düzenli olarak kontrol edilir. Bir güncelleme bulunursa indirilir ve kullanıcı mini uygulamayı bir sonraki soğuk başlatma işleminde eşzamanlı olarak uygulanır. Mini uygulamayı soğuk başlatma işlemi, kullanıcı uygulamayı açtığında mini uygulama çalışmıyorsa gerçekleşir (WeChat, 5 dakika arka planda kaldıktan sonra mini uygulamaları zorla kapatır).
- WeChat, bir mini uygulama ilk kez başlatıldığında da güncellemeleri kontrol eder. Kullanıcının uzun süredir açmadığı mini uygulamalar için güncelleme kontrol edilir ve senkron olarak indirilir. Güncelleme indirilirken kullanıcının beklemesi gerekir. İndirme işlemi tamamlandığında güncelleme uygulanır ve mini uygulama açılır. İndirme işlemi başarısız olursa (ör. ağ bağlantısı zayıf olduğundan) mini uygulama yine de açılır. Kullanıcının son zamanlarda açtığı mini uygulamalarda, olası güncellemeler arka planda eşzamansız olarak indirilir ve kullanıcı mini uygulamayı bir sonraki sefer soğuk başlattığında uygulanır.
Mini uygulamalar, UpdateManager API'sini kullanarak önceki güncellemeleri etkinleştirebilir. Aşağıdaki işlevleri sağlar:
- Güncellemeler kontrol edildiğinde mini uygulamaya bildirim gönderir.
(
onCheckForUpdate) - Bir güncelleme indirildiğinde ve kullanıma hazır olduğunda mini uygulamaya bildirim gönderir.
(
onUpdateReady) - Güncelleme indirilemediğinde mini uygulamayı bilgilendirir.
(
onUpdateFailed) - Mini uygulamaya, mevcut bir güncellemeyi zorunlu olarak yükleme izni verir. Bu işlem, uygulamayı yeniden başlatır.
(
applyUpdate)
WeChat, arka uç sisteminde mini uygulama geliştiriciler için ek güncelleme özelleştirme seçenekleri de sunar: 1. Bir seçenek, geliştiricilerin belirli bir mini uygulama sürümünü yüklemiş olan kullanıcılar için senkron güncellemeleri devre dışı bırakmasına ve bunun yerine güncellemelerin asenkron olmasını zorlamasına olanak tanır. 2. Başka bir seçenek ise geliştiricilerin mini uygulamaları için gerekli minimum sürümü belirlemelerine olanak tanır. Bu durumda, gerekli minimum sürümden daha düşük bir sürümden yapılan asenkron güncellemeler, güncelleme uygulandıktan sonra mini uygulamanın zorunlu olarak yeniden yüklenmesine neden olur. Güncelleme indirilemezse mini uygulamanın eski bir sürümünün açılması da engellenir.
Teşekkür
Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.