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

Thomas Steiner

Markup languages

ดังที่อธิบายไว้ก่อนหน้านี้ แอปขนาดเล็กจะเขียนด้วยภาษาถิ่นของ HTML แทนที่จะใช้ HTML ธรรมดา หากคุณ จะต้องจัดการกับคำสั่งและการประมาณค่าในช่วงข้อความและคำสั่ง Vue.js คุณจะรู้สึกว่า ได้ทันทีที่บ้าน แต่แนวคิดที่คล้ายกันมีอยู่ก่อนหน้านี้ในการแปลง XML (XSLT). ด้านล่างนี้ คุณสามารถดูตัวอย่างโค้ดจาก WXML แต่แนวคิดคือ เหมือนกันสำหรับแพลตฟอร์มแอปขนาดเล็กทั้งหมด เช่น Alipay AXML ของ Baidu Swan Element, ของ ByteDance TTML (แม้ว่าเครื่องมือสำหรับนักพัฒนาเว็บจะเรียกสิ่งนี้ว่า Bxml) และ HTML เช่นเดียวกับ Vue.js องค์ประกอบ แนวคิดการเขียนโปรแกรมแอปขนาดเล็กคือ model-view-viewmodel (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],
  },
});

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

การแสดงผลแบบมีเงื่อนไขจะทำงานเหมือนกับ 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 ของ WeChat ได้รับการตั้งชื่อ WXSS. สำหรับ Alipay จะใช้ชื่อว่า ACSS ซึ่งเรียกง่ายๆ ว่า Baidu CSS และสำหรับ ByteDance Dialect เรียกว่า TTSS สิ่งที่เหมือนกันคือโซลูชันขยาย CSS ด้วยพิกเซลที่ปรับเปลี่ยนตามอุปกรณ์ เมื่อเขียน CSS ปกติ นักพัฒนาซอฟต์แวร์จะต้องแปลงหน่วยพิกเซลทั้งหมดเพื่อปรับให้เข้ากับหน้าจออุปกรณ์เคลื่อนที่ต่างๆ ความกว้างและอัตราส่วนพิกเซลแตกต่างกัน TTSS รองรับหน่วย rpx เป็นเลเยอร์เบื้องหลัง ซึ่งหมายความว่า แอปขนาดเล็กจะรับช่วงงานจากนักพัฒนาแอปและแปลงหน่วยต่างๆ ในนามของนักพัฒนาแอปโดยอิงตาม ความกว้างของหน้าจอที่ระบุเป็น 750rpx เช่น ในโทรศัพท์ Pixel 3a ที่มีความกว้างของหน้าจอ 393px (และอัตราส่วนพิกเซลของอุปกรณ์ 2.75) 200rpx ที่ปรับเปลี่ยนตามอุปกรณ์จะกลายเป็น 104px ในอุปกรณ์จริง เมื่อตรวจสอบด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (393px / 750rpx * 200rpx ≈ 104px) ใน Android แนวคิดเดียวกัน เรียกว่า ความหนาแน่นของพิกเซลอิสระ

วันที่

/* 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 ยังสามารถประกาศแบบอินไลน์ได้ ซึ่งรวมถึงการประมาณค่าแบบข้อความแบบไดนามิก (โปรดดู before)

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

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

แอปขนาดเล็กรองรับ "ชุดย่อยที่ปลอดภัย" JavaScript ที่มีการสนับสนุนสำหรับโมดูลที่ใช้ ไวยากรณ์ที่เตือน CommonJS หรือ RequireJS ไม่สามารถเรียกใช้โค้ด JavaScript ผ่าน eval() และไม่สามารถสร้างฟังก์ชันด้วย new Function() บริบทของการเรียกใช้สคริปต์คือ V8 หรือ JavaScriptCore ในอุปกรณ์ และ V8 หรือ NW.js ในเครื่องมือจำลอง ปกติแล้วคุณจะสามารถเขียนโค้ดด้วย ES6 หรือไวยากรณ์ที่ใหม่กว่าได้ เนื่องจากเครื่องมือสำหรับนักพัฒนาเว็บจะเปลี่ยนรูปแบบโค้ดเป็น ES5 โดยอัตโนมัติ หากเป้าหมายของบิลด์เป็น ระบบปฏิบัติการที่ใช้ WebView เวอร์ชันเก่า (ดูภายหลัง) ในเอกสารประกอบของผู้ให้บริการ Super App ระบุไว้อย่างชัดเจนว่าภาษาสคริปต์ของผู้ให้บริการ อาจสับสนได้และแตกต่างจาก 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);

API บริดจ์ JavaScript

บริดจ์ JavaScript ที่เชื่อมต่อแอปขนาดเล็กกับระบบปฏิบัติการจะช่วยให้ เพื่อใช้ความสามารถของระบบปฏิบัติการ (โปรดดูการเข้าถึงฟีเจอร์ที่มีประสิทธิภาพ ทั้งนี้ ยังมีวิธีการอำนวยความสะดวกต่างๆ สำหรับภาพรวม คุณสามารถดู API ต่างๆ ของ WeChat Alipay Baidu ByteDance และ Quick App

การตรวจหาฟีเจอร์นั้นตรงไปตรงมา เนื่องจากทุกแพลตฟอร์มมี canIUse() ซึ่งดูเหมือนชื่อได้รับแรงบันดาลใจจากเว็บไซต์ caniuse.com สำหรับ เช่น ByteDance tt.canIUse() ช่วยตรวจสอบการสนับสนุนสำหรับ API, เมธอด, พารามิเตอร์, ตัวเลือก, คอมโพเนนต์ และแอตทริบิวต์

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

อัปเดต

แอปขนาดเล็กไม่มีกลไกการอัปเดตที่เป็นมาตรฐาน (การอภิปรายเกี่ยวกับการกำหนดมาตรฐานที่เป็นไปได้) แพลตฟอร์มแอปขนาดเล็กทั้งหมดมีระบบแบ็กเอนด์ ซึ่งช่วยให้นักพัฒนาแอปขนาดเล็กสามารถอัปโหลดเวอร์ชันใหม่ แอปขนาดเล็กของตน จากนั้น Super App จะใช้ระบบแบ็กเอนด์ดังกล่าวเพื่อตรวจหาและดาวน์โหลดอัปเดต Super App บางแอป ทำการอัปเดตทั้งหมดในเบื้องหลังโดยไม่ให้ตัวแอปขนาดเล็กควบคุมการอัปเดต Super App อื่นๆ จะช่วยให้ควบคุมตัวแอปขนาดเล็กได้มากขึ้น

ย่อหน้าต่อไปนี้เป็นตัวอย่างของกระบวนการที่ซับซ้อน ซึ่งจะอธิบายกลไกการอัปเดตของ WeChat สำหรับแอปขนาดเล็ก การใช้งานได้มากขึ้น WeChat จะตรวจหาอัปเดตที่พร้อมใช้งานใน 2 สถานการณ์ต่อไปนี้

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

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

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

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

กิตติกรรมประกาศ

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