(1) Cấu trúc thư mục dự án

┌─components            Thư mục chứa các component của uni-app
│  └─comp-a.vue        Component a có thể tái sử dụng
├─hybrid                Thư mục chứa trang web cục bộ (tự tạo)
├─platforms             Thư mục chứa các trang riêng cho từng nền tảng (tự tạo)
├─pages                 Thư mục chứa các file trang nghiệp vụ
│  ├─index
│  │  └─index.vue      Trang chủ
│  └─list
│     └─list.vue        Trang danh sách
├─static                Thư mục chứa tài nguyên tĩnh như hình ảnh, video... Lưu ý: tài nguyên tĩnh chỉ được đặt ở đây
├─wxcomponents          Thư mục chứa component mini program (tự tạo)
├─common                Tài nguyên chung (tự tạo)
├─api                   Gói yêu cầu API (tự tạo)
├─store                 Quản lý trạng thái (tự tạo)
├─main.js               File nhập chính để khởi tạo Vue
├─App.vue               Cấu hình ứng dụng, dùng để thiết lập kiểu dáng toàn cục và lắng nghe chu kỳ sống của ứng dụng
├─manifest.json         Cấu hình tên ứng dụng, appid, logo, thông tin đóng gói phiên bản
└─pages.json            Cấu hình tuyến đường trang, thanh điều hướng, tab chọn... thông tin trang

Lưu ý

• Các file JavaScript trong thư mục static sẽ không được webpack biên dịch. Nếu bên trong có mã es6, sẽ chạy trực tiếp mà không qua chuyển đổi, gây lỗi trên thiết bị di động. Vì vậy các tài nguyên như less, scss cũng không nên đặt trong thư mục static, khuyến nghị đặt các tài nguyên chung này vào thư mục common

(2) Cấu hình ứng dụng manifest.json

File manifest.json là file cấu hình ứng dụng, dùng để xác định tên ứng dụng, biểu tượng, quyền hạn... Chúng ta cũng có thể thiết lập trình xử lý chặn chéo miền cho Vue trên H5 tại đây. Để xem trước trên thiết bị thật mini program WeChat cần thêm appid vào manifest.json.

(3) Cấu hình biên dịch vue.config.js

vue.config.js là một file cấu hình tùy chọn. Nếu tồn tại trong thư mục gốc của dự án, nó sẽ tự động được tải. Thường được dùng để cấu hình các tùy chọn biên dịch như webpack. Tài liệu chính thức

(4) Cấu hình toàn cục pages.json

File pages.json dùng để cấu hình toàn cục cho uni-app, quyết định đường dẫn file trang, kiểu dáng cửa sổ, thanh điều hướng gốc, tabbar dưới cùng... Nó tương tự phần quản lý trang trong app.json của mini program WeChat.

(5) Kiểu dáng toàn cục uni.scss

File uni.scss dùng để thuận tiện kiểm soát phong cách tổng thể của ứng dụng. Ví dụ màu nút, phong cách viền... File uni.scss đã cài sẵn một số biến scss. Tài liệu chính thức

Nhiều plugin mở rộng chính thức của uni-app (uni ui) và nhiều plugin bên thứ ba trên thị trường plugin đều sử dụng các biến kiểu dáng này. Nếu bạn là nhà phát triển plugin, khuyến khích sử dụng trình tiền xử lý scss và trực tiếp sử dụng các biến này trong mã plugin (không cần import file này), thuận tiện cho người dùng phát triển ứng dụng có phong cách nhất quán theo phương pháp xây dựng khối.

uni.scss là một file đặc biệt, không cần import trong mã mà có thể sử dụng các biến kiểu dáng ở đây trong mã scss. Trình biên dịch của uni-app xử lý đặc biệt file uni.scss trong cấu hình webpack, khiến mỗi file scss đều được tiêm file uni.scss này, đạt hiệu quả sử dụng toàn cục. Nếu nhà phát triển muốn sử dụng toàn cục less hoặc stylus, cần tự cấu hình chiến lược webpack trong vue.config.js.

(6) Component chính App.vue

App.vue là component chính của uni-app, tất cả các trang đều chuyển đổi dưới App.vue, là file nhập trang. Nhưng App.vue bản thân không phải là trang, ở đây không thể viết phần tử hiển thị template.

Chức năng của file này bao gồm: gọi hàm chu kỳ sống ứng dụng, cấu hình kiểu dáng toàn cục, cấu hình lưu trữ toàn cục globalData.

Chu kỳ sống ứng dụng chỉ có thể lắng nghe trong App.vue, lắng nghe trong trang là vô hiệu.

(7) File nhập chính main.js

main.js là file nhập của uni-app, chức năng chính là khởi tạo instance vue, định nghĩa component toàn cục, sử dụng các plugin cần thiết như vuex.

(8) Quy tắc phát triển UniAPP và đường dẫn tài nguyên

1. Quy tắc phát triển đã thỏa thuận
   • File trang tuân thủ quy phạm Single File Component (SFC) của Vue
   • Thẻ component gần với quy phạm mini program, chi tiết xem quy phạm component uni-app
   • Khả năng tương tác (JS API) gần với quy phạm mini program WeChat, nhưng cần thay thế wx bằng uni, chi tiết xem quy phạm giao diện uni-app
   • Liên kết dữ liệu và xử lý sự kiện giống quy phạm Vue.js, đồng thời bổ sung chu kỳ sống của App và trang
   • Để tương thích đa nền tảng, khuyến khích sử dụng bố cục flex trong phát triển

2. Giải thích đường dẫn tài nguyên

Trong template khi tham chiếu tài nguyên tĩnh như thuộc tính src của thẻ image, video... có thể sử dụng đường dẫn tương đối hoặc tuyệt đối:

<!-- Đường dẫn tuyệt đối, /static chỉ đến thư mục static ở thư mục gốc, trong dự án cli /static chỉ đến thư mục static trong thư mục src -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- Đường dẫn tương đối -->
<image class="logo" src="../../static/logo.png"></image>

Lưu ý

• Đường dẫn tuyệt đối bắt đầu bằng @ và đường dẫn tương đối sẽ qua quy tắc kiểm tra chuyển đổi base64
• Tài nguyên tĩnh được tham chiếu trong các nền tảng không phải H5 đều không chuyển sang base64
• Trên nền tảng H5, tài nguyên nhỏ hơn 4kb sẽ được chuyển thành base64, còn lại không chuyển

Trong file js hoặc thẻ script, có thể sử dụng đường dẫn tương đối và tuyệt đối:

// Đường dẫn tuyệt đối, @ trỏ đến thư mục gốc dự án, trong dự án cli @ trỏ đến thư mục src
import add from '@/common/add.js'
// Đường dẫn tương đối
import add from '../../common/add.js'

Trong file css hoặc thẻ style, có thể sử dụng đường dẫn tương đối và tuyệt đối:

/* Đường dẫn tuyệt đối */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* Đường dẫn tương đối */
@import url('../../common/uni.css');

Trong file css hoặc thẻ style khi tham chiếu đường dẫn hình ảnh, có thể sử dụng đường dẫn tương đối hoặc tuyệt đối:

/* Đường dẫn tuyệt đối */
background-image: url(/static/logo.png);
background-image: url('@/static/logo.png');
/* Đường dẫn tương đối */
background-image: url(../../static/logo.png);