نشانه گذاری، استایل، اسکریپت نویسی و به روز رسانی برنامه های کوچک

Thomas Steiner

توجه: این پست بخشی از مجموعه مقالاتی است که هر مقاله بر اساس مقالات قبلی است. اگر به تازگی به اینجا رسیده اید، ممکن است بخواهید از ابتدا شروع به خواندن کنید.

زبان های نشانه گذاری

همانطور که قبلا ذکر شد، برنامه های کوچک به جای HTML ساده، با گویش های HTML نوشته می شوند. اگر تا به حال با درون یابی متن و دستورالعمل های Vue.js سروکار داشته باشید، بلافاصله احساس می کنید که در خانه هستید، اما مفاهیم مشابه قبل از آن در XML Transformations ( XSLT ) وجود داشت. در زیر می‌توانید نمونه‌های کد WXML WeChat را مشاهده کنید، اما مفهوم برای همه پلت‌فرم‌های برنامه‌های کوچک، یعنی AXML Alipay، Baidu's Swan Element ، ByteDance TTML (علی‌رغم اینکه DevTools آن را Bxml می‌نامند) و Quick App یکسان است. درست مانند Vue.js، مفهوم اصلی برنامه نویسی برنامه های کوچک مدل-view-viewmodel (MVVM) است.

اتصال داده ها

اتصال داده با درونیابی متن Vue.js مطابقت دارد.

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

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

ارائه فهرست

رندر لیست مانند دستور Vue.js v-for عمل می کند.

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

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

رندر مشروط

رندر شرطی مانند دستور Vue.js 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",
  },
});

قالب ها

به‌جای نیاز به شبیه‌سازی ضروری content یک الگوی HTML ، الگوهای WXML را می‌توان به صورت اعلامی از طریق ویژگی is که به تعریف قالب پیوند می‌دهد، استفاده کرد.

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

طراحی ظاهر

یک ظاهر طراحی شده با لهجه های CSS انجام می شود. وی چت WXSS نام دارد. برای Alipay، لهجه آنها ACSS ، بایدو به سادگی CSS ، و برای ByteDance، گویش آنها به عنوان TTSS نامیده می شود. وجه مشترک آنها این است که CSS را با پیکسل های پاسخگو گسترش می دهند. هنگام نوشتن CSS معمولی، توسعه‌دهندگان باید تمام واحدهای پیکسل را برای انطباق با صفحه‌نمایش‌های مختلف دستگاه‌های همراه با عرض و نسبت پیکسل‌های مختلف تبدیل کنند. TTSS از واحد rpx به عنوان لایه زیرین آن پشتیبانی می‌کند، به این معنی که برنامه کوچک کار را از توسعه‌دهنده می‌گیرد و واحدها را از طرف او بر اساس عرض صفحه نمایش مشخص شده 750rpx تبدیل می‌کند. به عنوان مثال، در تلفن Pixel 3a با پهنای صفحه نمایش 393px (و نسبت پیکسل دستگاه 2.75 )، 200rpx پاسخگو در دستگاه واقعی با بازرسی با Chrome DevTools (393px / 750rpx * 200rpx ≥ 200rpx) تبدیل به 104px در دستگاه واقعی می شود. در اندروید، همان مفهوم پیکسل مستقل از چگالی نامیده می شود.

بررسی بالشتک واقعی در دستگاه Pixel 3a با ابزار توسعه دهنده Chrome.

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

از آنجایی که کامپوننت‌ها ( به بعد مراجعه کنید) از سایه DOM استفاده نمی‌کنند، سبک‌های اعلام‌شده در صفحه به همه مؤلفه‌ها می‌رسند. سازماندهی رایج فایل استایل شیت این است که یک استایل شیت ریشه برای استایل‌های جهانی، و شیوه نامه‌های جداگانه در هر صفحه برای هر صفحه از برنامه کوچک داشته باشد. سبک‌ها را می‌توان با یک قانون @import که مانند @import CSS at-rule عمل می‌کند وارد کرد. مانند HTML، سبک ها را نیز می توان به صورت درون خطی اعلام کرد، از جمله درون یابی متن پویا ( قبل را ببینید).

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

اسکریپت

برنامه های کوچک از "زیر مجموعه ایمن" جاوا اسکریپت پشتیبانی می کنند که شامل پشتیبانی از ماژول ها با استفاده از نحو های مختلف است که یادآور CommonJS یا RequireJS است. کد جاوا اسکریپت را نمی توان از طریق eval() اجرا کرد و هیچ تابعی را نمی توان با new Function() ایجاد کرد. زمینه اجرای برنامه نویسی V8 یا JavaScriptCore در دستگاه ها و V8 یا NW.js در شبیه ساز است. کدنویسی با ES6 یا نحو جدیدتر معمولاً امکان پذیر است، زیرا DevTools خاص به طور خودکار کد را به ES5 منتقل می کند اگر هدف ساخت یک سیستم عامل با پیاده سازی WebView قدیمی باشد ( به بعد مراجعه کنید). اسناد ارائه دهندگان برنامه های فوق العاده به صراحت اشاره می کنند که زبان های برنامه نویسی آنها نباید با جاوا اسکریپت اشتباه گرفته شود و از جاوا اسکریپت متمایز است. با این حال، این بیانیه بیشتر به نحوه کار ماژول ها اشاره دارد، یعنی هنوز ماژول های استاندارد ES را پشتیبانی نمی کنند.

همانطور که قبلا ذکر شد، مفهوم برنامه نویسی مینی اپلیکیشن مدل-view-viewmodel (MVVM) است. لایه منطق و لایه view روی رشته های مختلف اجرا می شوند، به این معنی که رابط کاربری توسط عملیات طولانی مدت مسدود نمی شود. در شرایط وب، می‌توانید به اسکریپت‌هایی فکر کنید که در یک Web Worker اجرا می‌شوند.

زبان برنامه نویسی WeChat WXS ، SJS Alipay و همچنین SJS ByteDance نامیده می شود. بایدو هنگام ارجاع به JS از JS صحبت می کند. این اسکریپت ها باید با استفاده از نوع خاصی از تگ، به عنوان مثال، <wxs> در وی چت گنجانده شوند. در مقابل، Quick App از تگ های <script> معمولی و نحو ES6 JS استفاده می کند.

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

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

ماژول ها همچنین می توانند از طریق ویژگی src بارگیری شوند یا از طریق 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

پل جاوا اسکریپت که برنامه‌های کوچک را به سیستم عامل متصل می‌کند، استفاده از قابلیت‌های سیستم عامل را ممکن می‌سازد (به دسترسی به ویژگی‌های قدرتمند مراجعه کنید. همچنین تعدادی روش راحت ارائه می‌دهد. برای یک نمای کلی، می‌توانید APIهای مختلف WeChat ، Alipay را بررسی کنید. Baidu ، ByteDance ، و Quick App .

تشخیص ویژگی ساده است، زیرا همه پلتفرم‌ها یک متد (به معنای واقعی کلمه به این شکل) canIUse() ارائه می‌کنند که به نظر می‌رسد نام آن از وب‌سایت caniuse.com الهام گرفته شده است. برای مثال، tt.canIUse() ByteDance امکان بررسی پشتیبانی APIها، متدها، پارامترها، گزینه‌ها، مؤلفه‌ها و ویژگی‌ها را می‌دهد.

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

موفقیت: فصل بعدی اجزای برنامه کوچک را معرفی می کند.

به روز رسانی ها

برنامه های کوچک مکانیزم به روز رسانی استاندارد ندارند ( بحث در مورد استانداردسازی بالقوه ). همه پلتفرم‌های برنامه‌های کوچک دارای یک سیستم پشتیبان هستند که به توسعه‌دهندگان اپلیکیشن‌های کوچک اجازه می‌دهد نسخه‌های جدید برنامه‌های کوچک خود را آپلود کنند. سپس یک برنامه فوق العاده از آن سیستم باطن برای بررسی و دانلود به روز رسانی ها استفاده می کند. برخی از برنامه‌های فوق‌العاده به‌روزرسانی‌ها را کاملاً در پس‌زمینه انجام می‌دهند، بدون اینکه هیچ راهی برای خود برنامه کوچک بر جریان به‌روزرسانی تأثیر بگذارد. سایر برنامه های فوق العاده کنترل بیشتری به خود برنامه های کوچک می دهند.

به عنوان نمونه ای از یک فرآیند پیچیده، پاراگراف های زیر مکانیسم به روز رسانی WeChat برای برنامه های کوچک را با جزئیات بیشتری شرح می دهند. WeChat به‌روزرسانی‌های موجود را در دو سناریو زیر بررسی می‌کند:

1. WeChat تا زمانی که WeChat در حال اجرا باشد، به‌طور مرتب به‌روزرسانی‌های برنامه‌های کوچک اخیراً استفاده شده را بررسی می‌کند. اگر به‌روزرسانی پیدا شد، به‌روزرسانی بارگیری می‌شود و دفعه بعد که کاربر برنامه مینی را به‌صورت سرد شروع می‌کند، به‌طور همزمان اعمال می‌شود. راه‌اندازی سرد برنامه‌های کوچک زمانی اتفاق می‌افتد که وقتی کاربر برنامه مینی را باز می‌کند، در حال حاضر اجرا نمی‌شد (WeChat برنامه‌های کوچک را پس از ۵ دقیقه در پس‌زمینه، به اجبار می‌بندد).
2. WeChat همچنین زمانی که یک برنامه کوچک به صورت سرد راه اندازی می شود، به روز رسانی ها را بررسی می کند. برای برنامه های کوچکی که کاربر برای مدت طولانی باز نکرده است، به روز رسانی به صورت همزمان بررسی و دانلود می شود. در حالی که به روز رسانی در حال دانلود است، کاربر باید منتظر بماند. پس از پایان دانلود، به روز رسانی اعمال می شود و برنامه کوچک باز می شود. اگر دانلود ناموفق باشد، به عنوان مثال، به دلیل اتصال بد شبکه، برنامه کوچک بدون توجه به آن باز می شود. برای برنامه‌های کوچکی که کاربر اخیراً باز کرده است، هر به‌روزرسانی احتمالی به‌صورت ناهمزمان در پس‌زمینه دانلود می‌شود و دفعه بعد که کاربر برنامه مینی را به صورت سرد شروع می‌کند، اعمال می‌شود.

برنامه‌های کوچک می‌توانند با استفاده از UpdateManager API در به‌روزرسانی‌های قبلی شرکت کنند. این عملکرد زیر را ارائه می دهد:

• هنگامی که بررسی به روز رسانی انجام می شود، به برنامه مینی اطلاع می دهد. ( onCheckForUpdate )
• هنگامی که به‌روزرسانی دانلود شد و در دسترس قرار گرفت، به برنامه مینی اطلاع می‌دهد. ( onUpdateReady )
• هنگامی که به‌روزرسانی دانلود نشد، به برنامه مینی اطلاع می‌دهد. ( onUpdateFailed )
• به برنامه کوچک اجازه می‌دهد تا یک به‌روزرسانی در دسترس را به اجبار نصب کند، که برنامه را مجدداً راه‌اندازی می‌کند. ( applyUpdate )

WeChat همچنین گزینه های سفارشی سازی به روز رسانی اضافی را برای توسعه دهندگان برنامه های کوچک در سیستم پشتیبان خود ارائه می دهد: 1. یک گزینه به توسعه دهندگان این امکان را می دهد که از به روزرسانی های همزمان برای کاربرانی که قبلاً حداقل نسخه خاصی از برنامه کوچک را نصب کرده اند انصراف دهند و در عوض به روز رسانی ها را مجبور به انجام ناهمزمان باشد 2. گزینه دیگری به توسعه دهندگان اجازه می دهد تا حداقل نسخه مورد نیاز برنامه کوچک خود را تنظیم کنند. این باعث می‌شود به‌روزرسانی‌های ناهمزمان از نسخه کمتر از حداقل نسخه مورد نیاز باشد، پس از اعمال به‌روزرسانی، برنامه کوچک را مجدداً بارگیری کنید. همچنین در صورت عدم دانلود به‌روزرسانی، باز کردن نسخه قدیمی‌تر برنامه مینی را مسدود می‌کند.

سپاسگزاریها

این مقاله توسط Joe Medley ، Kayce Basques ، Milica Mihajlija ، Alan Kent و Keith Gu بررسی شده است.