Ngôn ngữ đánh dấu
Như đã nêu trước đó, thay vì HTML thuần tuý, các ứng dụng nhỏ được viết bằng phương ngữ của HTML. Nếu bạn đã từng xử lý loại nội suy và lệnh Vue.js của văn bản, bạn sẽ cảm thấy ngay tại nhà, nhưng các khái niệm tương tự đã tồn tại trước đó trong các quy trình Chuyển đổi XML (XSLT). Dưới đây, bạn có thể xem mã mẫu từ WXML, nhưng khái niệm này giống nhau cho tất cả các nền tảng ứng dụng nhỏ, cụ thể là Alipay AXML, Baidu Phần tử thiên nga, của ByteDance TTML (mặc dù Công cụ cho nhà phát triển gọi là Bxml) và HTML. Cũng giống như Vue.js, mã lập trình ứng dụng nhỏ là model-view-viewmodel (MVVM).
Liên kết dữ liệu
Liên kết dữ liệu tương ứng với Vue.js nội suy văn bản.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Hiển thị danh sách
Tính năng kết xuất danh sách hoạt động như lệnh v-for của Vue.js.
<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5],
},
});
Hiển thị có điều kiện
Tính năng kết xuất có điều kiện hoạt động như Vue.js'
Lệnh 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",
},
});
Mẫu
Thay vì đòi hỏi mức độ bắt buộc
bản sao content của mẫu HTML,
Bạn có thể dùng mẫu WXML theo cách khai báo thông qua thuộc tính is liên kết đến một định nghĩa mẫu.
<!-- 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" },
},
});
Định kiểu
Việc tạo kiểu xảy ra với phương ngữ của CSS. Tên của WeChat
WXSS.
Đối với Alipay, tài khoản của họ được gọi là ACSS, đơn giản là
CSS và đối với ByteDance,
phương ngữ được gọi là
Dịch vụ hỗ trợ kỹ thuật (TTSS).
Điểm chung của hai công cụ này là mở rộng CSS bằng pixel thích ứng. Khi viết CSS thông thường,
nhà phát triển cần chuyển đổi tất cả đơn vị pixel để thích ứng với các màn hình thiết bị di động khác nhau bằng
có chiều rộng và tỷ lệ pixel khác nhau. TTSS hỗ trợ đơn vị rpx làm lớp cơ bản, tức là
ứng dụng nhỏ tiếp quản công việc của nhà phát triển và chuyển đổi các đơn vị thay mặt họ, dựa trên
chiều rộng màn hình được chỉ định là 750rpx. Ví dụ: trên điện thoại Pixel 3a có chiều rộng màn hình là
393px (và tỷ lệ pixel của thiết bị là 2.75), 200rpx thích ứng sẽ trở thành 104px trên thiết bị thực
khi kiểm tra bằng Công cụ của Chrome cho nhà phát triển (393px / 750rpx * 200rpx ≈ 104px). Trong Android, khái niệm tương tự
được gọi
pixel không phụ thuộc vào mật độ.
/* 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;
}
Vì các thành phần (xem phần sau) không sử dụng DOM bóng, nên các kiểu được khai báo trên phạm vi tiếp cận trang
vào tất cả các thành phần. Cách tổ chức tệp biểu định kiểu phổ biến là có một biểu định kiểu gốc cho
chung và biểu định kiểu riêng lẻ trên mỗi trang dành riêng cho từng trang của ứng dụng nhỏ. Kiểu có thể
được nhập bằng quy tắc @import hoạt động như
@import Quy tắc về CSS. Giống như trong HTML,
các kiểu cũng có thể được khai báo cùng dòng, bao gồm cả nội suy văn bản động (xem
trước).
<view style="color:{{color}};" />
Lên nội dung
Các ứng dụng nhỏ hỗ trợ một "tập hợp con an toàn" của JavaScript bao gồm hỗ trợ cho các mô-đun sử dụng các biến thể
các cú pháp nhắc đến CommonJS hoặc RequireJS.
Không thể thực thi mã JavaScript qua eval() và không thể tạo hàm bằng
new Function() Ngữ cảnh thực thi tập lệnh là V8 hoặc
JavaScriptCore trên thiết bị và V8 hoặc
NW.js trong trình mô phỏng. Thường thì bạn có thể lập trình bằng cú pháp ES6 hoặc phiên bản mới hơn,
vì Công cụ cho nhà phát triển cụ thể sẽ tự động chuyển đổi mã sang ES5 nếu mục tiêu bản dựng là
hệ điều hành triển khai WebView cũ hơn (xem sau). Chiến lược phát hành đĩa đơn
tài liệu của các nhà cung cấp ứng dụng cao cấp đề cập rõ ràng rằng ngôn ngữ tập lệnh của họ không
bị nhầm lẫn và khác biệt với JavaScript. Tuy nhiên, tuyên bố này chủ yếu chỉ đề cập đến
cách hoạt động của các mô-đun, tức là chúng không hỗ trợ
Mô-đun ES.
Như đã đề cập trước đây, khái niệm lập trình ứng dụng nhỏ là model-view-viewmodel (MVVM). Lớp logic và lớp thành phần hiển thị chạy trên các luồng khác nhau, tức là giao diện người dùng không bị chặn bởi các thao tác diễn ra trong thời gian dài. Trong thuật ngữ web, bạn có thể nghĩ đến các tập lệnh chạy trong Web Worker.
Ngôn ngữ kịch bản của WeChat được gọi
WXS, của Alipay
SJS, ByteDance tương tự
SJS.
Baidu nói đến JS khi nhắc đến
của họ. Những tập lệnh này cần được đưa vào bằng một loại thẻ đặc biệt, ví dụ: <wxs> trong
WeChat. Ngược lại, Ứng dụng nhanh dùng thẻ <script> thông thường và ES6
Cú pháp JS.
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view>{{m1.message}}</view>
Các mô-đun cũng có thể được tải qua thuộc tính src hoặc được nhập qua 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 cầu nối JavaScript
Cầu nối JavaScript kết nối các ứng dụng nhỏ với hệ điều hành giúp khả năng để sử dụng các tính năng của hệ điều hành (xem bài viết Quyền sử dụng các tính năng mạnh mẽ. Nó còn cung cấp nhiều phương thức thuận tiện. Để biết thông tin tổng quan, bạn có thể xem các API của WeChat, Alipay, Baidu, ByteDance, và Ứng dụng nhanh.
Phát hiện tính năng rất đơn giản vì tất cả các nền tảng đều cung cấp (theo đúng nghĩa đen là như thế này)
Phương thức canIUse() có tên có vẻ như được lấy cảm hứng từ trang web caniuse.com. Cho
ví dụ:
tt.canIUse()
cho phép kiểm tra hỗ trợ API, phương thức, tham số, tuỳ chọn, thành phần và thuộc tính.
// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");
Nội dung cập nhật
Ứng dụng nhỏ không có cơ chế cập nhật được chuẩn hoá (thảo luận về khả năng tiêu chuẩn hoá). Tất cả nền tảng ứng dụng nhỏ đều có hệ thống phụ trợ, cho phép nhà phát triển ứng dụng nhỏ tải các phiên bản mới của các ứng dụng nhỏ của họ. Sau đó, một siêu ứng dụng sử dụng hệ thống phụ trợ đó để kiểm tra và tải các bản cập nhật xuống. Một số siêu ứng dụng cập nhật hoàn toàn ở chế độ nền mà không cần bất kỳ cách nào để ứng dụng nhỏ tác động đến quá trình cập nhật luồng. Các siêu ứng dụng khác cung cấp nhiều quyền kiểm soát hơn đối với các ứng dụng nhỏ.
Các đoạn sau đây mô tả cơ chế cập nhật của WeChat cho các ứng dụng nhỏ như ví dụ cho một quy trình tinh vi chi tiết hơn. WeChat sẽ kiểm tra các bản cập nhật hiện có trong 2 tình huống sau:
- WeChat sẽ thường xuyên kiểm tra để tìm bản cập nhật của các ứng dụng nhỏ được sử dụng gần đây, miễn là WeChat vẫn đang chạy. Nếu một tìm thấy bản cập nhật, bản cập nhật được tải xuống và áp dụng đồng bộ vào lần tiếp theo người dùng khởi động nguội ứng dụng nhỏ. Khởi động nguội ứng dụng nhỏ xảy ra khi ứng dụng nhỏ hiện không chạy khi người dùng đã mở ứng dụng (WeChat buộc các ứng dụng nhỏ sẽ đóng sau khi ở trong nền trong 5 phút).
- WeChat cũng kiểm tra để tìm các bản cập nhật khi một ứng dụng nhỏ khởi động nguội. Đối với các ứng dụng nhỏ mà người dùng chưa mở trong một thời gian dài, bản cập nhật sẽ được kiểm tra và tải xuống đồng bộ. Trong khi tải bản cập nhật xuống, người dùng phải chờ. Sau khi quá trình tải xuống hoàn tất, bản cập nhật sẽ được áp dụng và ứng dụng nhỏ sẽ mở ra. Nếu tải xuống không thành công, chẳng hạn như do kết nối mạng kém, ứng dụng nhỏ sẽ mở ra ngay lập tức. Đối với các ứng dụng nhỏ người dùng mở gần đây, mọi bản cập nhật tiềm năng đều được tải xuống không đồng bộ trong nền và sẽ được áp dụng vào lần tiếp theo người dùng khởi động nguội ứng dụng nhỏ.
Các ứng dụng nhỏ có thể chọn nhận bản cập nhật sớm hơn bằng cách sử dụng API UpdateManager. API này cung cấp chức năng sau:
- Thông báo cho ứng dụng nhỏ khi quá trình kiểm tra bản cập nhật được thực hiện.
(
onCheckForUpdate) - Thông báo cho ứng dụng nhỏ khi có bản cập nhật và bản cập nhật đã được tải xuống.
(
onUpdateReady) - Thông báo cho ứng dụng nhỏ khi không thể tải bản cập nhật xuống.
(
onUpdateFailed) - Cho phép ứng dụng mini buộc cài đặt một bản cập nhật có sẵn, bản cập nhật này sẽ khởi động lại ứng dụng.
(
applyUpdate)
WeChat cũng cung cấp thêm các lựa chọn tuỳ chỉnh bản cập nhật cho các nhà phát triển ứng dụng nhỏ trong hệ thống phụ trợ của mình: 1. Một lựa chọn cho phép nhà phát triển chọn không nhận các bản cập nhật đồng bộ đối với người dùng đã có phiên bản tối thiểu của ứng dụng mini được cài đặt và thay vào đó buộc bản cập nhật phải không đồng bộ. 2. Một lựa chọn khác cho phép nhà phát triển đặt một phiên bản ứng dụng nhỏ cần có tối thiểu. Điều này sẽ giúp các bản cập nhật không đồng bộ từ phiên bản thấp hơn phiên bản tối thiểu bắt buộc buộc tải lại ứng dụng nhỏ sau đang áp dụng bản cập nhật. Thao tác này cũng sẽ chặn thao tác mở phiên bản cũ của ứng dụng nhỏ nếu người dùng tải không cập nhật được.
Xác nhận
Bài viết này được đánh giá bởi Joe Medley thân mến! Kayce Basques, Milica Mihajlija, Alan Kent, và Keith Gu.