มาร์กอัปมินิแอป การจัดรูปแบบ การเขียนสคริปต์ และการอัปเดต

Thomas Steiner

Markup languages

ดังที่กล่าวไว้ก่อนหน้านี้ มินิแอปจะเขียนด้วยภาษาถิ่นของ HTML แทนที่จะใช้ HTML ธรรมดา หากคุณเคยใช้การแทรกข้อความและคำสั่งของ Vue.js คุณจะรู้สึกคุ้นเคยทันที แต่แนวคิดที่คล้ายกันนี้มีมานานก่อนหน้านั้นแล้วในการแปลง XML (XSLT) ด้านล่างนี้ คุณจะเห็นตัวอย่างโค้ดจาก WXML ของ WeChat แต่แนวคิดนี้เหมือนกันสำหรับแพลตฟอร์มมินิแอปทั้งหมด ได้แก่ AXML ของ Alipay, Swan Element ของ Baidu, TTML ของ ByteDance (แม้ว่า DevTools จะเรียกว่า Bxml) และ HTML ของ Quick App เช่นเดียวกับ Vue.js แนวคิดการเขียนโปรแกรมมินิแอปพื้นฐานคือ Model-View-ViewModel (MVVM)

การเชื่อมโยงข้อมูล

การเชื่อมโยงข้อมูลสอดคล้องกับการแทรกข้อความของ Vue.js

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

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

การแสดงผลรายการ

การแสดงผลรายการทำงานเหมือนกับv-for Directive ของ Vue.js

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

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

การแสดงผลตามเงื่อนไข

การแสดงผลแบบมีเงื่อนไขทำงานเหมือนกับv-if Directive ของ 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" },
  },
});

การจัดรูปแบบ

การจัดรูปแบบจะเกิดขึ้นกับภาษาถิ่นของ CSS ของ WeChat ชื่อ WXSS สำหรับ Alipay จะเรียกว่า ACSS, Baidu เรียกว่า CSS และสำหรับ ByteDance จะเรียกว่า TTSS สิ่งที่เหมือนกันคือทั้ง 2 อย่างนี้ขยาย CSS ด้วยพิกเซลที่ปรับเปลี่ยนตามอุปกรณ์ เมื่อเขียน CSS ปกติ นักพัฒนาซอฟต์แวร์ต้องแปลงหน่วยพิกเซลทั้งหมดเพื่อให้เหมาะกับหน้าจออุปกรณ์เคลื่อนที่ต่างๆ ที่มีความกว้างและอัตราส่วนพิกเซลแตกต่างกัน TTSS รองรับหน่วย rpx เป็นเลเยอร์พื้นฐาน ซึ่งหมายความว่า มินิแอปจะรับช่วงงานจากนักพัฒนาแอปและแปลงหน่วยในนามของนักพัฒนาแอป โดยอิงตาม ความกว้างของหน้าจอที่ระบุเป็น 750rpx ตัวอย่างเช่น ในโทรศัพท์ Pixel 3a ที่มีความกว้างหน้าจอ 393px (และอัตราส่วนพิกเซลของอุปกรณ์ 2.75) 200rpx แบบปรับเปลี่ยนตามพื้นที่โฆษณาจะกลายเป็น 104px ในอุปกรณ์จริง เมื่อตรวจสอบด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (393px / 750rpx * 200rpx ≈ 104px) ใน Android แนวคิดเดียวกันนี้เรียกว่าความหนาแน่นของพิกเซลอิสระ

การตรวจสอบมุมมองด้วย Chrome DevTools ซึ่งมีการระบุการเว้นขอบแบบพิกเซลที่ปรับตามอุปกรณ์ด้วย `200rpx` แสดงให้เห็นว่าจริงๆ แล้วคือ `104px` ในอุปกรณ์ Pixel 3a
การตรวจสอบระยะเว้นจริงในอุปกรณ์ 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;
}

เนื่องจากคอมโพเนนต์ (ดูภายหลัง) ไม่ได้ใช้ Shadow DOM สไตล์ที่ประกาศในหน้าจึงเข้าถึง คอมโพเนนต์ทั้งหมดได้ การจัดระเบียบไฟล์ชีตสไตล์ทั่วไปคือการมีชีตสไตล์รูท 1 รายการสำหรับ รูปแบบส่วนกลาง และชีตสไตล์ต่อหน้าแต่ละรายการที่เฉพาะเจาะจงสำหรับแต่ละหน้าของมินิแอป คุณสามารถนำเข้ารูปแบบได้ด้วยกฎ @import ซึ่งทำงานเหมือนกับกฎ CSS @import เช่นเดียวกับใน HTML คุณยังประกาศรูปแบบในบรรทัดได้ด้วย รวมถึงการแทรกข้อความแบบไดนามิก (ดูก่อน)

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

การเขียนสคริปต์

มินิแอปจะรองรับ "ชุดย่อยที่ปลอดภัย" ของ JavaScript ซึ่งรวมถึงการรองรับโมดูลที่ใช้ไวยากรณ์ต่างๆ ซึ่งชวนให้นึกถึง CommonJS หรือ RequireJS โค้ด JavaScript จะเรียกใช้ผ่าน eval() ไม่ได้ และสร้างฟังก์ชันด้วย new Function() ไม่ได้ บริบทการเรียกใช้สคริปต์คือ V8 หรือ JavaScriptCore ในอุปกรณ์ และ V8 หรือ NW.js ในโปรแกรมจำลอง โดยปกติแล้ว คุณจะเขียนโค้ดด้วยไวยากรณ์ ES6 หรือใหม่กว่าได้ เนื่องจาก DevTools ที่เฉพาะเจาะจงจะทำการ Transpile โค้ดเป็น ES5 โดยอัตโนมัติหากเป้าหมายการบิลด์เป็น ระบบปฏิบัติการที่มีการติดตั้งใช้งาน WebView เวอร์ชันเก่ากว่า (ดูภายหลัง) เอกสารประกอบของผู้ให้บริการซูเปอร์แอประบุไว้อย่างชัดเจนว่าภาษาการเขียนสคริปต์ของตนนั้นไม่ ควรสับสนและแตกต่างจาก JavaScript อย่างไรก็ตาม ข้อความนี้ส่วนใหญ่หมายถึงวิธีที่โมดูลทำงาน นั่นคือ โมดูลยังไม่รองรับโมดูล ES มาตรฐาน

ดังที่กล่าวไว้ก่อนหน้านี้ แนวคิดการเขียนโปรแกรมมินิแอปคือ Model-View-ViewModel (MVVM) เลเยอร์ตรรกะและเลเยอร์มุมมองทํางานในเธรดที่แตกต่างกัน ซึ่งหมายความว่าอินเทอร์เฟซผู้ใช้จะไม่ถูกบล็อกโดยการดําเนินการที่ใช้เวลานาน ในแง่ของเว็บ คุณสามารถคิดว่าสคริปต์ทำงานใน Web Worker

ภาษาการเขียนสคริปต์ของ WeChat เรียกว่า WXS, ของ Alipay เรียกว่า SJS และของ ByteDance ก็เรียกว่า SJS Baidu พูดถึง JS เมื่ออ้างอิงถึงของตนเอง คุณต้องรวมสคริปต์เหล่านี้โดยใช้แท็กประเภทพิเศษ เช่น <wxs> ใน WeChat ในทางตรงกันข้าม 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

บริดจ์ JavaScript ที่เชื่อมต่อมินิแอปกับระบบปฏิบัติการช่วยให้ใช้ความสามารถของระบบปฏิบัติการได้ (ดูการเข้าถึงฟีเจอร์ที่มีประสิทธิภาพ) นอกจากนี้ ยังมีวิธีการชำระเงินที่สะดวกสบายหลายวิธี หากต้องการดูภาพรวม คุณสามารถดู 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 จะตรวจสอบการอัปเดตที่พร้อมใช้งานใน 2 สถานการณ์ต่อไปนี้

  1. WeChat จะตรวจสอบการอัปเดตของมินิแอปที่ใช้ล่าสุดเป็นประจำตราบใดที่ WeChat ทำงานอยู่ หากพบการอัปเดต ระบบจะดาวน์โหลดการอัปเดตและใช้พร้อมกันในครั้งถัดไปที่ผู้ใช้เริ่มมินิแอปแบบ Cold Start การเริ่มมินิแอปแบบ Cold Start จะเกิดขึ้นเมื่อมินิแอปไม่ได้ทำงานอยู่ในขณะที่ผู้ใช้เปิด (WeChat จะปิดมินิแอปโดยบังคับหลังจากทำงานในเบื้องหลังเป็นเวลา 5 นาที)
  2. นอกจากนี้ WeChat ยังตรวจหาการอัปเดตเมื่อเริ่มมินิแอปแบบ Cold Start ด้วย สำหรับมินิแอปที่ผู้ใช้ไม่ได้เปิดมาเป็นเวลานาน ระบบจะตรวจสอบและดาวน์โหลดการอัปเดตแบบพร้อมกัน ขณะดาวน์โหลดการอัปเดต ผู้ใช้ต้องรอ เมื่อดาวน์โหลดเสร็จแล้ว ระบบจะใช้การอัปเดตและเปิดมินิแอป หาก ดาวน์โหลดไม่สำเร็จ เช่น เนื่องจากการเชื่อมต่อเครือข่ายไม่ดี มินิแอปจะเปิดขึ้นไม่ว่าในกรณีใดก็ตาม สำหรับมินิแอปที่ผู้ใช้เปิดเมื่อเร็วๆ นี้ ระบบจะดาวน์โหลดการอัปเดตที่อาจเกิดขึ้นแบบไม่พร้อมกันในเบื้องหลัง และจะใช้การอัปเดตดังกล่าวในครั้งถัดไปที่ผู้ใช้เริ่มมินิแอปแบบ Cold Start

มินิแอปสามารถเลือกรับการอัปเดตก่อนได้โดยใช้ UpdateManager API โดยมีฟังก์ชันการทำงานดังต่อไปนี้

  • แจ้งเตือนมินิแอปเมื่อมีการตรวจหาการอัปเดต (onCheckForUpdate)
  • แจ้งเตือนมินิแอปเมื่อดาวน์โหลดการอัปเดตแล้วและพร้อมใช้งาน (onUpdateReady)
  • แจ้งเตือนมินิแอปเมื่อดาวน์โหลดอัปเดตไม่ได้ (onUpdateFailed)
  • อนุญาตให้มินิแอปบังคับติดตั้งการอัปเดตที่มี ซึ่งจะรีสตาร์ทแอป (applyUpdate)

นอกจากนี้ WeChat ยังมีตัวเลือกการปรับแต่งการอัปเดตเพิ่มเติมสำหรับนักพัฒนาแอปย่อยในระบบแบ็กเอนด์ ดังนี้ 1. ตัวเลือกหนึ่งช่วยให้นักพัฒนาแอปเลือกไม่รับการอัปเดตแบบซิงโครนัสสำหรับผู้ใช้ที่ติดตั้งมินิแอปเวอร์ชันขั้นต่ำที่กำหนดอยู่แล้ว และบังคับให้การอัปเดตเป็นแบบอะซิงโครนัสแทน 2. อีกตัวเลือกหนึ่งช่วยให้นักพัฒนาแอปตั้งค่าเวอร์ชันขั้นต่ำที่จำเป็นของมินิแอปได้ ซึ่งจะทำให้ การอัปเดตแบบไม่พร้อมกันจากเวอร์ชันที่ต่ำกว่าเวอร์ชันขั้นต่ำที่จำเป็นบังคับให้โหลดมินิแอปซ้ำหลังจาก ใช้การอัปเดต นอกจากนี้ยังจะบล็อกการเปิดมินิแอปเวอร์ชันเก่าหากดาวน์โหลด การอัปเดตไม่สำเร็จด้วย

คำขอบคุณ

บทความนี้ได้รับการตรวจสอบโดย Joe Medley Kayce Basques Milica Mihajlija Alan Kent และ Keith Gu