Mini uygulama işaretleme, stil oluşturma, komut dosyası oluşturma ve güncelleme

Markup languages (Biçimlendirme dilleri)

Daha önce belirtildiği gibi, mini uygulamalar düz HTML yerine HTML lehçeleriyle yazılır. Daha önce Vue.js metin interpolasyonu ve yönergeleriyle ilgilendiyseniz kendinizi hemen rahat hissedersiniz ancak XML Dönüşümleri'nde (XSLT) bundan çok önce benzer kavramlar da vardı. Aşağıda, WeChat'in WXML kod örneklerini görebilirsiniz. Ancak konsept tüm mini uygulama platformları, yani Alipay AXML, Baidu Swan Element, ByteDance'ın TTML (DevTools Bxml olarak adlandırsa da) ve Quick App HTML için aynıdır. Vue.js'de olduğu gibi, temel mini uygulama programlama kavramı model-view-viewmodel'tir (MVVM).

Veri bağlama

Veri bağlama, Vue.js'nin metin interpolasyonuna karşılık gelir.

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

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

Liste oluşturma

Liste oluşturma işlemi 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'nin 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

WXML şablonları, bir HTML şablonunun content öğesinin zorunlu olarak klonlanmasını zorunlu tutmak yerine, bir şablon tanımına bağlantı veren is özelliği aracılığıyla bildirimli şekilde 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

Stil, CSS'nin lehçeleriyle yapılır. WeChat'in adı WXSS'tir. Alipay için lehçesi ACSS (Baidu'nun basitçe CSS), ByteDance için ise lehçesi TDH olarak adlandırılır. Ortak özellikleri, CSS'yi duyarlı piksellerle genişletmeleridir. Normal CSS'ler 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ürmeleri gerekir. TTSS, rpx birimini temel katmanı olarak destekler. Bu da mini uygulamanın, işi geliştiriciden devraldığı ve belirtilen 750rpx ekran genişliğine göre birimleri onun adına dönüştürdüğü anlamına gelir. Örneğin, ekran genişliği 393px (ve cihaz piksel oranı 2.75) olan Pixel 3a telefonda, Chrome Geliştirici Araçları ile incelendiğinde duyarlı 200rpx gerçek cihazda 104px hâline gelir (393 piksel / 750 rpx * 200 rpx ≈ 104 piksel). Android'de aynı kavrama yoğunluktan bağımsız piksel denir.

/* 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 (daha sonra bakın) gölge DOM kullanmadığından, bir sayfada tanımlanan stiller tüm bileşenlere ulaşır. Yaygın stil sayfası dosya düzenlemesi, genel stiller için tek bir kök stil sayfasına ve mini uygulamanın her sayfasına özel sayfa başına stil sayfalarına sahip olmaktır. Stiller, @import CSS kuyruğu gibi çalışan bir @import kuralıyla içe aktarılabilir. HTML'de olduğu gibi stiller de dinamik metin interpolasyonu dahil olmak üzere satır içinde tanımlanabilir (öncesine bakın).

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

Senaryo Yazma

Mini uygulamalar, CommonJS veya RequireJS'yi hatırlatan çeşitli söz diziminin kullanıldığı modüller için destek içeren "güvenli bir JavaScript alt kümesini" destekler. JavaScript kodu eval() aracılığıyla yürütülemez ve new Function() ile hiçbir işlev oluşturulamaz. Komut dosyası çalıştırma bağlamı, cihazlarda V8 veya JavaScriptCore'u, simülatörde ise V8 veya NW.js'dir. Derleme hedefi eski WebView uygulamasına sahip bir işletim sistemiyse belirli Geliştirici Araçları kodu otomatik olarak ES5'e aktardığından, ES6 veya daha yeni bir söz dizimiyle kodlama yapmak genellikle mümkündür (Daha sonra inceleyin). Süper uygulama sağlayıcılarının belgelerinde, kodlama dillerinin karıştırılmadığı ve JavaScript'ten farklı olduğu açıkça belirtilmektedir. Ancak bu ifade büyük oranda modüllerin çalışma şekliyle ilgili, yani henüz standart ES Modüllerini desteklemediğini belirtmektedir.

Daha önce de belirtildiği gibi, mini uygulama programlama kavramı model-view-viewmodel'tir (MVVM). Mantık katmanı ve görünüm katmanı farklı iş parçacıkları üzerinde çalışır. Bu, kullanıcı arayüzünün uzun süreli işlemler tarafından engellenmediği anlamına gelir. Web terimleriyle, bir Web Çalışanı'nda çalışan komut dosyalarını düşünebilirsiniz.

WeChat'in kodlama dili WXS, Alipay SJS, ByteDance ise SJS'dir. Baidu, kendilerine referans verirken JS'den söz eder. Bu komut dosyalarının, özel bir etiket türü (ör. WeChat'te <wxs>) kullanılarak eklenmesi gerekir. 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, bir 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ü API'si

Mini uygulamaları işletim sistemine bağlayan JavaScript köprüsü, işletim sistemi özelliklerinin kullanılabilmesini sağlar (Güçlü özelliklere erişim bölümüne bakın. Ayrıca çeşitli kolaylıklar sunar. Genel bakış için WeChat, Alipay, Baidu, ByteDance ve Hızlı Uygulama'nın farklı API'lerine göz atabilirsiniz.

Tüm platformlar, adı caniuse.com web sitesinden esinlenmiş gibi görünen bir canIUse() yöntemi sağladığından özellik algılama oldukça basittir. Örneğin, ByteDance'in tt.canIUse() hizmeti API'ler, yöntemler, parametreler, seçenekler, bileşenler ve özellikler için destek kontrolleri sağlar.

// 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 uygulamalarda standartlaştırılmış bir güncelleme mekanizması yoktur (potansiyel standartlaştırma ile ilgili açıklamalar). 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. Ardından bir süper uygulama, 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. Mini uygulamanın kendisinin de güncelleme akışını etkilemesi hiçbir şekilde olmaz. Diğer süper uygulamalar, mini uygulamalara daha fazla kontrol verir.

Karmaşık bir işleme örnek olarak, aşağıdaki paragraflarda WeChat'in mini uygulamalar için güncelleme mekanizması daha ayrıntılı olarak açıklanmaktadır. WeChat, mevcut güncellemeleri aşağıdaki iki senaryoda kontrol eder:

1. WeChat, devam ettiği sürece son kullanılan mini uygulamaların güncellemelerini düzenli olarak kontrol eder. Bir güncelleme bulunursa güncelleme indirilir ve kullanıcı mini uygulamayı bir dahaki sefer başlattığında güncelleme indirilir ve eşzamanlı olarak uygulanır. Mini uygulama, kullanıcı tarafından açıldığında de o anda çalışmıyorken soğuk başlatma gerçekleşir (WeChat, 5 dakika boyunca arka planda kaldıktan sonra mini uygulamaları zorla kapatır).
2. WeChat, bir mini uygulama baştan başlatıldığında da güncelleme olup olmadığını kontrol eder. Kullanıcının uzun süredir açmadığı mini uygulamalarda güncelleme kontrol edilir ve eşzamanlı olarak indirilir. Güncelleme indirilirken kullanıcının beklemesi gerekir. İndirme işlemi tamamlandıktan sonra güncelleme uygulanır ve mini uygulama açılır. İndirme işlemi başarısız olursa (örneğin, kötü ağ bağlantısı nedeniyle) mini uygulama açılır. Kullanıcının yakın zamanda açtığı mini uygulamalarda, olası güncellemeler arka planda eşzamansız olarak indirilir ve kullanıcı bu mini uygulamayı tekrar başlattığında uygulanır.

Mini uygulamalar, UpdateManager API'yi kullanarak önceki güncellemelere kaydolabilir. 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ılabilir olduğunda mini uygulamaya bildirim gönderir. (onUpdateReady)
• Güncelleme indirilemediğinde mini uygulamaya bildirim gönderilir. (onUpdateFailed)
• Mini uygulamaya, kullanılabilir 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. Seçeneklerden biri, geliştiricilerin, mini uygulamanın belirli bir minimum sürümünü zaten yüklemiş olan kullanıcılar için eşzamanlı güncellemeleri devre dışı bırakmasına olanak tanır ve bunun yerine güncellemeleri eşzamansız hale getirir. 2. Başka bir seçenek ise geliştiricilerin, mini uygulamalarının gereken minimum sürümünü belirlemelerine olanak tanır. Bu seçenek, güncellemeyi uyguladıktan sonra mini uygulamayı zorunlu olarak yeniden yüklemek üzere gereken minimum sürümün altındaki bir sürümden eşzamansız güncellemeler yapar. Güncellemenin indirilmesi başarısız olursa mini uygulamanın eski bir sürümünün açılmasını da engeller.

Teşekkür

Bu makale Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent ve Keith Gu tarafından incelenmiştir.