Tài liệu phát triển chính thức cho WeChat Mini Program có thể được truy cập để tham khảo chi tiết. Ngôn ngữ lập trình chủ đạo để xây dựng Mini Program là JavaScript. Mặc dù có nhiều điểm tương đồng với phát triển web truyền thống, giúp giảm thiểu chi chuyển đổi cho các lập trình viên前端, nhưng vẫn tồn tại những khác biệt cốt lõi về mặt kiến trúc.

Khác Biệt Về Kiến Trúc Render và Logic

Trong phát triển web thông thường, luồng render và luồng script thường chạy chung một môi trường, dẫn đến việc các tác vụ script nặng có thể làm đơ giao diện. Ngược lại, Mini Program tách biệt hai luồng này: Logic Layer chạy trên JSCore, còn Render Layer chạy trên WebView. Do logic layer không có đối tượng browser hoàn chỉnh, các API như DOM hay BOM không tồn tại. Điều này khiến các thư viện quen thuộc như jQuery không thể hoạt động. Ngoài ra, môi trường JSCore cũng khác biệt so với NodeJS, hạn chế việc sử dụng một số package NPM.

Về môi trường chạy, thay vì đối mặt với đa dạng trình duyệt trên PC hay Mobile như web truyền thống, Mini Program chỉ cần tương thích với client WeChat trên iOS và Android, cùng với công cụ开发者工具 (Developer Tools). Tuy nhiên, vẫn có sự khác biệt nhỏ giữa ba môi trường chạy này.

Cấu Hình Dự Án Với JSON

JSON đóng vai trò là định dạng cấu hình tĩnh trong Mini Program, quyết định hành vi của ứng dụng trước khi chạy. Các file cấu hình không thể được cập nhật động trong quá trình runtime.

1. Cấu hình toàn cục (app.json)

File app.json nằm ở thư mục gốc, quản lý đường dẫn các page, cấu hình window, tab bar và thời gian timeout mạng. Ví dụ cấu hình cơ bản:

{
  "pages": [
    "pages/dashboard/dashboard",
    "pages/settings/settings"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "Ứng Dụng Demo",
    "navigationBarTextStyle": "black"
  }
}

Trường pages khai báo danh sách các trang, trang đầu tiên được xem là home. Trường window định nghĩa màu sắc thanh điều hướng và văn bản mặc định.

2. Cấu hình công cụ (project.config.json)

File này lưu trữ các tùy chọn cá nhân hóa của开发者工具 như màu sắc editor, cấu hình compile, hay tự động nén khi upload. Nó giúp đồng bộ môi trường làm việc khi chuyển đổi giữa các máy tính khác nhau mà không ảnh hưởng đến code nguồn.

3. Cấu hình trang (page.json)

Mỗi thư mục page có thể có một file JSON riêng (ví dụ dashboard.json) để ghi đè các cấu hình全局 từ app.json cho riêng trang đó, chẳng hạn như màu sắc thanh tiêu đề hoặc tính năng pull-to-refresh.

Lưu ý cú pháp JSON

JSON yêu cầu key phải luôn nằm trong dấu ngoặc kép. Giá trị chỉ chấp nhận các kiểu: Number, String (kép), Boolean, Array, Object, hoặc Null. Các giá trị như undefined sẽ gây lỗi. Đặc biệt, JSON không hỗ trợ chú thích (comment), việc thêm comment sẽ làm file cấu hình không hợp lệ.

Xây Dựng Giao Diện Với WXML và WXSS

WXML (WeiXin Markup Language) đóng vai trò tương tự HTML để mô tả cấu trúc trang, trong khi WXSS đảm nhiệm việc style giống CSS.

WXML Template

Các thẻ trong WXML không phải là HTML tag thông thường mà là các component do nền tảng cung cấp như view, text, button. Điều này giúp tối ưu hóa hiệu năng và trải nghiệm người dùng trên mobile.

Ràng buộc dữ liệu (Data Binding):

Dữ liệu từ logic layer được đưa vào giao diện thông qua cú pháp {{ }}. Ví dụ, để hiển thị một thông báo động:

<!-- index.wxml -->
<view>{{ statusText }}</view>
<button bindtap="handleUpdate">Cập nhật trạng thái</button>

Trong file JS tương ứng:

Page({
  data: {
    statusText: 'Đang chờ...'
  },
  handleUpdate: function() {
    this.setData({
      statusText: 'Đã cập nhật thành công'
    })
  }
})

Điều kiện và Vòng lặp:

WXML hỗ trợ rendering có điều kiện qua wx:if, wx:elif, wx:else. Đối với danh sách, sử dụng wx:for. Tên biến mặc định cho item là item và index là index, nhưng có thể tùy chỉnh:

<view wx:for="{{ listData }}" wx:for-item="entry" wx:for-index="key">
  <text>{{ key }}: {{ entry.content }}</text>
</view>

Để tối ưu hiệu năng khi danh sách thay đổi, nên sử dụng wx:key để đánh dấu định danh duy nhất cho mỗi phần tử, giúp framework tái sử dụng component thay vì tạo mới hoàn toàn.

Template và Import:

WXML cho phép định nghĩa template để tái sử dụng code:

<template name="cardItem">
  <view class="card">
    <text>{{ title }}</text>
  </view>
</template>

Sử dụng template thông qua thuộc tính is:

<template is="cardItem" data="{{ title: 'Tiêu đề mẫu' }}" />

File WXML có thể import lẫn nhau bằng thẻ <import src="..." />. Lưu ý rằng import không có tính đệ quy, nghĩa là file A import B, B import C thì A chỉ sử dụng được template của B mà không dùng được template của C.

WXSS Style

WXSS hỗ trợ hầu hết các tính năng của CSS nhưng có mở rộng thêm đơn vị rpx (responsive pixel). Đơn vị này tự động điều chỉnh kích thước dựa trên độ rộng màn hình thiết bị, giúp việc responsive trở nên dễ dàng hơn mà không cần tính toán tỷ lệ pixel thủ công. Style có thể定义全局 trong app.wxss hoặc cục bộ trong file page.wxss đi kèm từng trang.

Xử Lý Logic và Tương Tác

Để xử lý sự kiện người dùng như click, touch hay gọi API hệ thống, lập trình viên viết code JavaScript. Mini Program cung cấp một loạt API thông qua đối tượng wx để truy cập vào các tính năng native của微信客户端.

Vòng đời ứng dụng và trang:

File app.js chứa khởi tạo ứng dụng, hàm onLaunch chạy khi app khởi động. Mỗi page được khởi tạo qua hàm Page(), với các lifecycle hook như onLoad (khi trang load), onReady (khi trang render xong).

Sử dụng API:

Các API thường hoạt động bất đồng bộ. Ví dụ, để lấy vị trí người dùng:

wx.getLocation({
  type: 'gcj02',
  success: function(res) {
    const lat = res.latitude
    const lng = res.longitude
    console.log('Vị trí:', lat, lng)
  },
  fail: function(err) {
    console.error('Lấy vị trí thất bại', err)
  }
})

Hoặc gọi tính năng quét mã QR:

wx.scanCode({
  success: (result) => {
    console.log('Kết quả quét:', result.result)
  }
})

Components Hệ Thống

Mini Program cung cấp sẵn nhiều component cơ bản như bản đồ, video, audio. Để sử dụng, chỉ cần khai báo tag trong WXML và truyền thuộc tính. Ví dụ, hiển thị bản đồ với tọa độ trung tâm:

<map 
  longitude="106.6297" 
  latitude="10.8231" 
  bindmarkertap="onMarkerTap" 
  style="width: 100%; height: 300px;">
</map>

Các sự kiện của component được bắt thông qua thuộc tính bind (ví dụ bindmarkertap) và xử lý trong file JS tương ứng. Lập trình viên cũng có thể tùy chỉnh style bên ngoài của component thông qua class hoặc style inline.