1. WXS là gì?

WXS (WeiXin Script) là một ngôn ngữ script độc quyền của mini program, được sử dụng kết hợp với WXML để xây dựng cấu trúc giao diện trang.

2. Tình huống sử dụng WXML

Trong WXML, bạn không thể gọi trực tiếp các hàm được định nghĩa trong file .js của trang. Tuy nhiên, WXML có thể gọi các hàm được định nghĩa trong WXS. Do đó, ứng dụng phổ biến nhất của WXS trong mini program là làm "bộ lọc" (filter).

3. Mối quan hệ giữa WXS và JavaScript*

Mặc dù cú pháp của WXS tương tự JavaScript, nhưng thực tế đây là hai ngôn ngữ hoàn toàn khác nhau:

① WXS có kiểu dữ liệu riêng

• number (kiểu số), string (kiểu chuỗi), boolean (kiểu logic), object (kiểu đối tượng)
• function (kiểu hàm), array (kiểu mảng), date (kiểu ngày tháng), regexp (kiểu biểu thức chính quy)

② WXS không hỗ trợ cú pháp ES6 trở lên

• Không hỗ trợ: let, const, destructuring assignment, spread operator, arrow function, object property shorthand, v.v...
• Hỗ trợ: var để khai báo biến, function thông thường, tương tự như cú pháp ES5

③ WXS tuân theo quy chuẩn CommonJS

• Đối tượng module
• Hàm require()
• Đối tượng module.exports

Cú pháp cơ bản

1. WXS nhúng trực tiếp trong WXML

Mã WXS có thể được viết trong thẻ bên trong file WXML, tương tự như cách JavaScript được viết trong thẻ <script> của HTML. Mỗi thẻ trong file WXML phải có thuộc tính module để chỉ định tên module WXS, giúp truy cập các thành viên trong module từ WXML:

<!--WXML-->
<view>{{handler.formatText(tenDangNhap)}}</view>

<!--WXS nhúng trực tiếp-->
<wxs module="handler">
  //Chuyển đổi văn bản thành dạng in hoa
  module.exports.formatText = function(chuoi){
    return chuoi.toUpperCase()
  }
</wxs>

2. Định nghĩa WXS bên ngoài

Mã WXS cũng có thể được viết trong file có phần mở rộng .wxs, giống như cách JavaScript được viết trong file .js. Ví dụ:

//stringUtils.wxs

function chuanHoaChuoi(chuoi){
  return chuoi.toLowerCase()
}

module.exports = {
  chuanHoaChuoi: chuanHoaChuoi
}

3. Sử dụng WXS bên ngoài

Khi nhúng WXS bên ngoài vào WXML, bắt buộc phải thêm hai thuộc tính module và src cho thẻ , trong đó:

• module dùng để đặt tên cho module
• src dùng để chỉ đường dẫn đến file script, phải là đường dẫn tương đối

Ví dụ:

<!--WXML-->
<view>{{handler.formatText(tenDangNhap)}}</view>

<!--Nhúng file stringUtils.wxs và đặt tên là handler-->
<wxs src="../../utils/stringUtils.wxs" module="handler"></wxs>

• Đặc điểm của WXS

1. Khác biệt với JavaScript

Để giảm thiểu chi phí học tập, ngôn ngữ WXS đã được thiết kế với nhiều điểm tương đồng về cú pháp với JavaScript. Nhưng về bản chất, đây là hai ngôn ngữ hoàn toàn khác nhau!

2. Không thể làm callback cho sự kiện component

WXS thường được sử dụng làm "bộ lọc", kết hợp với cú pháp Mustache, ví dụ:

<!--WXML-->
<view>{{handler.formatText(tenDangNhap)}}</view>

Tuy nhiên, các hàm được định nghĩa trong WXS không thể được sử dụng làm callback cho sự kiện component. Ví dụ dưới đây là cách làm sai:

<button bindtap="handler.chuanHoaChuoi">Nút bấm</button>

3. Tính cô lập

Tính cô lập có nghĩa là môi trường thực thi của WXS được tách biệt hoàn toàn với các mã JavaScript khác. Điều này thể hiện ở hai khía cạnh: ① WXS không thể gọi các hàm được định nghĩa trong file JS ② WXS không thể gọi các API do mini program cung cấp

4. Hiệu năng cao

Trên thiết bị iOS, mã WXS trong mini program chạy nhanh hơn JavaScript từ 2 đến 20 lần

• Trên thiết bị Android, hiệu năng của hai loại này là như nhau