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

Thomas Steiner

Biçimlendirme dilleri

Daha önce belirtildiği gibi mini uygulamalar düz HTML yerine HTML'nin diyalektleriyle yazılır. Şu durumda: daha önce Vue.js metin interpolasyonu ve yönergeleriyle ilgilendiyseniz, ama ondan çok daha önce de XML Dönüşümleri'nde benzer kavramlar vardı. (XSLT). Aşağıda, WeChat'in WXML'dir, ancak konsept Aynı şey tüm mini uygulama platformları olan Alipay'in AXML, Baidu'nun Swan Elementi, ByteDance'in TTML (Geliştirici Araçları bunu Bxml olarak adlandırmış olsa da) ve Quick App'in HTML. Tıpkı Vue.js'de olduğu gibi, mini uygulama programlama kavramı, model-view-viewmodel (MVVM) kapsamına girer.

Veri bağlama

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

<!-- 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 gibi çalışır v-if yönergesi.

<!-- 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

Zorunluluk yerine bir HTML şablonunun content öğesini klonlama, WXML şablonları, bir şablon tanımına bağlantı veren is özelliği aracılığıyla bildirimli 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

Stil, CSS'nin diyalektlerinde gerçekleşir. WeChat'in adı WXSS. Alipay için onunki ACSS. Baidu'nun CSS ve ByteDance için ise diyalektte denir TDH. Ortak özellikleri, CSS'yi duyarlı piksellerle genişletmeleridir. Normal CSS yazarken Farklı mobil cihaz ekranlarına uyum sağlamak için geliştiricilerin tüm piksel birimlerini dönüştürmesi gerekir. farklı genişliklerde ve piksel oranlarında. TTSS, rpx birimini temel katman olarak destekler. Bu, mini uygulama geliştiriciden işi alır ve kriterlere göre geliştirici adına birimleri 750rpx olarak belirtilen ekran genişliği. Örneğin, ekran genişliği: 393px (ve 2.75 cihaz piksel oranı), duyarlı 200rpx, gerçek cihazda 104px olur Chrome Geliştirici Araçları ile incelendiğinde (393 piksel / 750 piksel * 200 piksel ≈ 104 piksel). Android'de de aynı kavram adı yoğunluktan bağımsız piksel.

/* 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 (sonraki bölümüne bakın) gölge DOM'u kullanmadığından, sayfa erişiminde bildirilen stiller tüm bileşenlere ayırabiliriz. Ortak stil sayfası dosya düzenlemesi, genel stilleri ve mini uygulamanın her sayfasına özel, sayfa başına ayrı stil sayfalarını kullanabilirsiniz. Stiller aşağıdaki gibi davranan bir @import kuralıyla içe aktarılır: @import CSS kuyruklu a kuralı. HTML'de olduğu gibi, Stiller, dinamik metin interpolasyonu dahil olmak üzere satır içi olarak da bildirilebilir (bkz. before) etiketi.

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

Senaryo Yazma

Mini uygulamalar "güvenli alt kümeyi" destekler kullanan modüller için destek içeren JavaScript CommonJS veya RequireJS'yi hatırlatan söz dizimleri). JavaScript kodu, eval() aracılığıyla yürütülemez ve hiçbir işlevle oluşturulamaz. new Function(). Komut dosyası yürütme bağlamı V8 veya Cihazlarda JavaScriptCore ve V8 veya NW.js'yi kullanabilirsiniz. ES6 veya daha yeni söz dizimiyle kodlama genellikle mümkündür. çünkü derleme hedefi bir bir WebView uygulamasına sahip işletim sistemi (sonraki bölüme bakın). İlgili içeriği oluşturmak için kullanılan belgelerinde kodlama dillerinin çok farklı olduğu açıkça belirtiliyor. JavaScript ile karıştırılması gereken ve ondan farklı olan terimlerdir. Ancak bu ifade, genel anlamda modüllerin çalışma şeklidir. Diğer bir deyişle, ES Modülleri henüz kullanıma sunulmamıştır.

Daha önce bahsettiğimiz gibi, mini uygulama programlama kavramı, model-view-viewmodel (MVVM) kapsamına girer. Mantık katmanı ve görünüm katmanı farklı iş parçacıkları üzerinde çalışır. Bu da, kullanıcı arayüzünün ve uzun süreli işlemler nedeniyle engellenebilir. Web terimlerinden bahsedecek olursak, Web Çalışanı.

WeChat'in kodlama dili WXS, Alipay'in SJS, ByteDance de benzer şekilde SJS. Baidu, referans verirken JS'den bahsediyor Google'a gönderir. Bu komut dosyalarının özel bir etiket türü kullanılarak eklenmesi gerekir. Örneğin, <wxs> WeChat. Buna karşın Hızlı Uygulama normal <script> etiketlerini ve ES6'yı kullanır JS söz dizimi.

<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ü API'sı

Mini uygulamaları işletim sistemine bağlayan JavaScript köprüsü, OS özelliklerini kullanın (Güçlü özelliklere erişim başlıklı makaleyi inceleyin. Google bir dizi kolaylık yöntemi de sunar. Genel bakış için farklı API'leri inceleyebilirsiniz. WeChat, Alipay, Baidu, ByteDance, ve Hızlı Uygulama'yı tıklayın.

Tüm platformlar (kelimenin tam anlamıyla şöyle denir) canIUse() yöntemi. Bu yöntemin adı, caniuse.com web sitesinden esinleniyor. Örneğin, ö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 (olası standartlaştırmayla ilgili tartışmalar). Tüm mini uygulama platformlarının, mini uygulama geliştiricilerin yararlanmalarına yardımcı oldu. Ardından bir süper uygulama, güncellemeleri kontrol etmek ve indirmek için bu arka uç sistemini kullanır. Bazı süper uygulamalar Mini uygulamanın kendisinin güncellemeyi etkilemesi için herhangi bir şekilde hiçbir şekilde güncellemeleri tamamen arka planda gerçekleştirmek akışı sağlar. Diğer süper uygulamalar, mini uygulamalara daha fazla kontrol verir.

Aşağıdaki paragraflarda, karmaşık bir sürece örnek olarak WeChat'in mini uygulamaları güncelleme mekanizması açıklanmaktadır. ayrıntılı olarak inceleyelim. WeChat, aşağıdaki iki senaryoda mevcut güncellemeleri kontrol eder:

1. WeChat çalıştığı sürece, son kullanılan mini uygulamaların güncellemelerini düzenli olarak kontrol eder. Bir güncelleme bulunur, güncelleme indirilir ve kullanıcı sayfayı tekrar başlattığında eşzamanlı olarak uygulanır. mini uygulama. Mini uygulamalar baştan başlatılırken kullanıcı çalışırken mini uygulama o anda çalışmıyorken gerçekleşir (WeChat, 5 dakika arka planda kaldıktan sonra mini uygulamaları kapanmaya zorlar).
2. WeChat, mini bir uygulama baştan başlatıldığında güncellemeleri de kontrol eder. Kullanıcının açmadığı mini uygulamalar için uzun bir süre boyunca güncelleme senkronize edilir ve eşzamanlı olarak indirilir. Güncelleme indirilirken beklemesi gerekir. İndirme işlemi tamamlandığında güncelleme uygulanır ve mini uygulama açılır. Öğe İndirme işlemi başarısız oluyor, örneğin kötü ağ bağlantısı nedeniyle mini uygulama açılıyor. Mini uygulamalar için yakın zamanda açılmışsa, olası güncellemeler arka planda eş zamansız olarak indirilir ve kullanıcı mini uygulamayı bir sonraki yeniden başlattığında uygulanır.

Mini uygulamalar, UpdateManager API'yi kullanarak önceki güncellemelere dahil olabilir. Aşağıdaki işlevleri sağlar:

• Güncelleme olup olmadığı kontrol edildiğinde mini uygulamaya bildirir. (onCheckForUpdate)
• Bir güncelleme indirildiğinde ve kullanıma sunulduğunda mini uygulamaya bildirir. (onUpdateReady)
• Bir güncelleme indirilemediğinde mini uygulamaya bildirir. (onUpdateFailed)
• Mini uygulamaya, mevcut bir güncellemeyi zorunlu olarak yükleme izni verir ve bu durumda 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. Bunlardan biri, geliştiricilerin halihazırda belirli bir uygulamanız gerekir ve bunun yerine güncellemeleri eşzamansız olmaya zorlar. 2. Başka bir seçenek de geliştiricilerin mini uygulamalarının gerekli minimum sürümünü belirlemelerine olanak tanır. Bu, gereken minimum sürümden daha düşük bir sürümden eşzamansız güncellemelerle mini uygulamayı yeniden yüklemeye zorla güncelleme uygulanıyor. Ayrıca, güncelleme başarısız.

Teşekkür

Bu makale tarafından incelendi Ali Demir, Kayce Basklar, Milica Mihajlija, Alan Kent, ve Keith Gu.