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

Thomas Steiner

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

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

همانطور که قبلاً اشاره شد، مینی‌اپلیکیشن‌ها به جای HTML ساده، با گویش‌هایی از HTML نوشته می‌شوند. اگر تا به حال با درون‌یابی متن و دستورالعمل‌های Vue.js سر و کار داشته باشید، فوراً احساس راحتی خواهید کرد، اما مفاهیم مشابهی مدت‌ها قبل از آن در XML Transformations ( XSLT ) وجود داشته است. در زیر، می‌توانید نمونه‌های کد از WXML وی چت را مشاهده کنید، اما این مفهوم برای همه پلتفرم‌های مینی‌اپلیکیشن، یعنی AXML علی‌رغم اینکه DevTools آن را Bxml می‌نامد، TTML بایت‌دنس (با وجود اینکه DevTools آن را Bxml می‌نامد) و HTML کوئیک اپ، یکسان است. درست مانند Vue.js، مفهوم برنامه‌نویسی مینی‌اپلیکیشن، مدل-نما-نمامدل (MVVM) است.

اتصال داده

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

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

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

رندر کردن لیست

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

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

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

رندر شرطی

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

قالب‌ها

به جای نیاز به کپی کردن اجباری 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" },
  },
});

استایل

Styling happens with dialects of CSS. WeChat's is named WXSS . For Alipay, theirs is called ACSS , Baidu's simply CSS , and for ByteDance, their dialect is referred to as TTSS . What they have in common is that they extend CSS with responsive pixels. When writing regular CSS, developers need to convert all pixel units to adapt to different mobile device screens with different widths and pixel ratios. TTSS supports the rpx unit as its underlying layer, which means the mini app takes over the job from the developer and converts the units on their behalf, based on a specified screen width of 750rpx . For example, on a Pixel 3a phone with a screen width of 393px (and a device pixel ratio of 2.75 ), responsive 200rpx become 104px on the real device when inspected with Chrome DevTools (393px / 750rpx * 200rpx ≈ 104px). در اندروید، همین مفهوم پیکسل مستقل از چگالی نامیده می‌شود.

بررسی میزان فاصله‌ی بین دو لبه‌ی صفحه نمایش در دستگاه پیکسل ۳a با استفاده از Chrome DevTools.

/* 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 سایه‌ای استفاده نمی‌کنند، استایل‌های تعریف‌شده در یک صفحه به همه کامپوننت‌ها دسترسی دارند. سازماندهی رایج فایل stylesheet این است که یک stylesheet ریشه برای استایل‌های سراسری داشته باشیم و stylesheetهای جداگانه برای هر صفحه از مینی‌اپلیکیشن داشته باشیم. استایل‌ها را می‌توان با یک قانون @import که مانند @import CSS at-rule عمل می‌کند، وارد کرد. مانند HTML، استایل‌ها را می‌توان به صورت درون‌خطی نیز تعریف کرد، از جمله درون‌یابی متن پویا ( به قبل مراجعه کنید).

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

اسکریپت نویسی

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

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

زبان اسکریپت‌نویسی وی‌چت WXS ، علی‌پی SJS و بایت‌دنس نیز به همین ترتیب SJS نام دارد. بایدو هنگام ارجاع به زبان‌های خود از 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);

رابط برنامه‌نویسی کاربردی پل جاوااسکریپت

پل جاوا اسکریپتی که مینی‌اپلیکیشن‌ها را به سیستم عامل متصل می‌کند، امکان استفاده از قابلیت‌های سیستم عامل را فراهم می‌کند (به بخش دسترسی به ویژگی‌های قدرتمند مراجعه کنید). همچنین تعدادی روش برای راحتی بیشتر ارائه می‌دهد. برای مرور کلی، می‌توانید 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");

موفقیت: فصل بعدی کامپوننت‌های مینی اپ را معرفی می‌کند.

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

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

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

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

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

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

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

تقدیرنامه‌ها

این مقاله توسط جو مدلی ، کیس باسک ، میلیکا میهالیا ، آلن کنت و کیث گو بررسی شده است.