Cách xây dựng WeChat Mini Program với WorkBuddy: Hướng dẫn cho người mới bắt đầu

Nếu bạn muốn tạo một Mini Program trên WeChat, trước tiên bạn có thể sẽ bị chặn bởi cả đống thứ: WeChat Developer Tools, thư mục dự án, AppID, môi trường phát triển đám mây, cơ sở dữ liệu, tải lên (upload), và quản lý phiên bản backend.

Rốt cuộc những thứ này là gì? Bạn còn chưa viết nổi một dòng code, mà đã bị kẹt ở mấy thứ kỹ thuật này rồi.

Không sao cả. Dù bạn chưa từng viết code, chưa từng làm Mini Program, hay thậm chí không biết AppID là gì, bài viết này vẫn dành cho bạn.

Việc xây dựng một cái trong một buổi chiều sẽ như thế nào?

Sau khi đọc xong, bạn sẽ biết cách:

• Nhập code vào WeChat Developer Tools (mà không cần đăng ký AppID trước)
• Mở nó trên chính chiếc điện thoại của bạn
• Tạo mã QR để gửi cho bạn bè dùng thử
• Gửi duyệt, phát hành và có thể được tìm kiếm

Đầu tiên, hãy nhìn thành phẩm của tôi.

Trông cũng ổn đấy chứ? Bắt đầu thôi.

I. Mười Phút Trước Khi Bắt Đầu

Mở WorkBuddy, tìm chuyên gia "WeChat Mini Program Developer" trong cột chuyên gia (experts), kỹ năng (skills) hoặc kết nối (connectors), rồi gọi nó ra.

Sau đó, đừng chỉ nói "Giúp tôi làm một Mini Program."

1Tôi muốn tạo một Mini Program theo dõi thói quen hằng ngày để dùng cho bản thân.
2Bước đầu tiên, tôi cần trao đổi với bạn những gì? Đừng viết code vội; hãy bàn bạc trước đã.

Hãy thay "theo dõi thói quen hằng ngày" bằng ý tưởng của riêng bạn.

Sau đó, nó sẽ hỏi bạn muốn lưu trữ dữ liệu như thế nào, phiên bản đầu tiên nên hoàn thiện đến đâu, bạn định dùng phương pháp phát triển nào, có cần nhắc nhở hằng ngày không, các loại thói quen là gì, mức độ chi tiết thời gian nhắc nhở, sở thích về phong cách giao diện, và cuối cùng, nó sẽ yêu cầu bạn tinh chỉnh các chiều phân loại, lưu trữ/xóa, và chu kỳ thống kê.

Nó giúp bạn nghĩ thấu đáo tất cả những câu hỏi mà bạn chưa từng cân nhắc, và định hình hướng đi.

Đừng đặt mục tiêu hoàn hảo ngay từ đầu; hãy để nó xây dựng phiên bản 1.0 trước. Khi đã có khung cơ bản, bạn có thể từ từ điều chỉnh và sửa đổi. Khi hướng đi đã rõ, hãy để nó bắt tay vào làm.

Trong lúc nó đang viết code, bạn có thể cài đặt WeChat Developer Tools.

Đây là công cụ chính thức từ WeChat, vì Mini Program của bạn cuối cùng sẽ được chạy, preview và upload từ đây. Tìm "WeChat Developer Tools" trên trang tải xuống chính thức, chọn bản Stable Version, làm theo hướng dẫn để cài đặt, và quét mã để đăng nhập. Khi vào được bên trong, nó sẽ trông như thế này:

Một vài lưu ý:

💡 Lần đầu tiên, chỉ nên giới hạn ở một hoặc hai chức năng. Chức năng càng nhiều, số trang phải sinh ra càng nhiều và lỗi có thể xuất hiện càng nhiều. Hãy sửa phần lõi trước.

💡 Chuyển model sang HY3, đừng để ở chế độ tự động (auto). Hiện tại model này đang miễn phí trong thời gian giới hạn, không giới hạn số lần dùng. (Hãy kiểm tra backend xem chương trình khuyến mãi còn hoạt động khi bạn đọc bài này không nhé.)

⚠️ Tên menu khác với những gì tôi nói là chuyện thường. Những công cụ phần mềm này cập nhật rất thường xuyên. Nếu gặp vấn đề, cứ chụp ảnh màn hình gửi cho WorkBuddy, nó sẽ chỉ cho bạn chỗ cần bấm.

Khi code hoàn thành, nó sẽ đưa cho bạn đường dẫn thư mục dự án. Hãy ghi nhớ đường dẫn này; bạn sẽ cần nó cho bước tiếp theo. Nó thường kèm theo hướng dẫn import; nếu không, cứ hỏi: "Code xong rồi, làm sao để import vào WeChat Developer Tools?"

Lúc này, bạn đã có: một bộ code Mini Program hoàn chỉnh và WeChat Developer Tools đã cài đặt.

Mọi thứ đã sẵn sàng. Đến lúc xem trước bán thành phẩm rồi.

II. Xem Bán Thành Phẩm

Mở WeChat Developer Tools vừa tải về, quét mã để đăng nhập, rồi bấm nút +.

Sau đó điền ba mục này:

1. Tên dự án (Project Name): Bạn thích gì đặt đó, miễn sao bạn nhận ra được.
2. Thư mục (Directory): Dán địa chỉ từ bước trước vào.
3. AppID: Nó có thể hiện màu đỏ; không sao cả. Hãy bấm "Test Account" để tiếp tục một cách suôn sẻ.

Với Backend Service, chọn "Do not use cloud services." Bấm Create, rồi bấm "Trust and Run." Công cụ sẽ tự động bắt đầu xây dựng.

⚠️ Khi nào bạn phải chuyển sang AppID chính thức: Nếu bạn muốn dùng WeChat Cloud Development, upload, hoặc cho người khác trải nghiệm, hãy đăng ký một tài khoản miễn phí bằng email. Chương 6 sẽ giải thích chi tiết điều này.

⚠️ Ngoài ra, hãy cân nhắc kỹ danh mục (category) trước khi đăng ký. Bạn phải chọn giữa Mini Game và các loại khác, và sau này không thể thay đổi được.

Nếu mọi việc suôn sẻ, bạn sẽ thấy Mini Program của mình trong công cụ: trình mô phỏng (simulator) ở bên trái và code ở bên phải.

Lúc này, bạn đã có: một Mini Program đang chạy trên máy tính của bạn.

Hoặc, bạn có thể thấy một màn hình đầy chữ đỏ báo lỗi. Đừng hoảng; chuyện nhỏ mà thôi.

III. Toàn Chữ Đỏ? Để Tác Giả Sửa Cho

Việc có lỗi trong lần build đầu tiên là chuyện bình thường.

Giải pháp rất đơn giản: Để người viết ra nó tự sửa. 😂

Cụ thể:

1. Tìm bảng Debugger trong WeChat Developer Tools; tất cả lỗi màu đỏ đều nằm ở đó.
2. Copy toàn bộ thông báo lỗi—đừng chỉ chụp một phần màn hình hay diễn giải lại theo cách của bạn.
3. Gửi cho WorkBuddy. Bạn thậm chí không cần nói gì; nó sẽ tự sửa cho bạn.

Sau khi phân tích, nó sẽ hoặc sửa code trực tiếp, hoặc hướng dẫn bạn thực hiện các thiết lập cần thiết.

Hai điều cần lưu ý:

⚠️ Một loại "lỗi" thực ra không phải lỗi: Mini Program không hỗ trợ một số kiểu viết code theo phong cách web (như một số selector hoặc hiệu ứng hover). Nếu trên máy tính nó trông kỳ lạ, đó là vì Mini Program không hỗ trợ. Cứ nói với AI: "Hiệu ứng này không được hỗ trợ trong Mini Program, dùng cách khác đi."

⚠️ Một loại khác là "lỗi" giả: Việc thay đổi không có tác dụng. Đừng vội nghi ngờ AI; hãy bấm nút làm mới "Compile" cạnh "Normal Compilation" ở góc trên bên phải. Thường là hết ngay.

Lúc này, bạn đã có: một Mini Program chạy mượt mà, không màn hình trắng hay trục trặc gì.

Trên trình mô phỏng máy tính thì trông rất đẹp, nhưng trên điện thoại thật thì có thể không giống vậy đâu.

IV. Trên PC Đẹp, Nhưng Trên Mobile Thì Chưa Chắc

Chuyện style bị lệch hoặc nút bấm không bấm được trên điện thoại thật dù trên trình mô phỏng vẫn hoạt động là rất phổ biến. Kích thước màn hình khác nhau, và chạm khác với chuột.

Để đưa nó lên điện thoại, chỉ cần bấm một nút: Preview.

Công cụ sẽ tạo ra một mã QR. Quét mã bằng WeChat, và Mini Program của bạn sẽ mở trên điện thoại.

Đây là chỗ nhiều người hay bối rối: Preview, Real Machine Test, và Remote Debugging đều tạo ra mã QR. Vậy khác nhau thế nào?

⚠️ Đừng dùng Preview làm bài kiểm tra cuối cùng. Preview chỉ để xem nhanh thôi; không có nghĩa là mọi thứ đều hoạt động. Hãy dùng Real Machine Test để xác nhận.

⚠️ Thêm một điều nữa: Để thuận tiện cho việc phát triển, một số kiểm tra bị tắt trong công cụ, nhưng chúng vẫn hoạt động trên thiết bị thật. Có khi trên PC thì chạy, lên mobile lại fail.

Lúc này, bạn đã có: một Mini Program mở được trên chính chiếc điện thoại của bạn.

Chắc bạn đang ngứa tay muốn gửi code cho bạn bè rồi. Khoan đã, chạy năm kiểm tra này trước đã, không thì đầy bug đấy! 😂

V. Đừng Để Bạn Bè Test Giúp Bạn Bug

Chỉ mất năm phút thôi. Tự chạy năm mục này:

1. Thêm: Thêm một mục mới; nó có xuất hiện trong danh sách không?
2. Trạng thái: Chuyển đổi giữa hoàn thành và chưa hoàn thành; có hoạt động không?
3. Vào lại: Thoát Mini Program rồi mở lại; dữ liệu bạn vừa thêm còn ở đó không?
4. Xóa: Xóa một mục; sau khi làm mới nó có biến mất hẳn không?
5. Giá trị rỗng: Bấm thêm mà không điền gì cả; nó phải hiện lời nhắc và không tạo bản ghi rỗng.

Mục 3 và 5 thường bị bỏ sót nếu bạn không kiểm tra cụ thể.

Sau khi sửa bất kỳ mục nào, hãy chạy lại cả năm mục. Sửa A thường làm hỏng B.

⚠️ Vượt qua cả năm mục chỉ có nghĩa là nó không sập ngay lập tức. Đây là quá trình mài giũa, nơi bạn sẽ phát hiện những vấn đề kỳ lạ hoặc nảy ra ý tưởng mới. Cuối cùng, bạn sẽ có một phiên bản mà mình hài lòng.

Lúc này, bạn đã có: một Mini Program trau chuốt mà bạn ưng ý.

Giờ bạn chỉ cần một thứ cuối cùng để gửi cho bạn bè: một danh tính chính thức.

VI. Gửi Mã Cho Bạn Bè Quét

Để người khác quét được, bạn cần một AppID chính thức. Cách đăng ký:

1. Mở WeChat Official Accounts Platform và làm theo quy trình đăng ký. Có nhiều loại: Official Accounts, Mini Programs, Mini Games. Hãy chọn Mini Program. ⚠️ Chọn sai là không đổi được; bạn sẽ phải xóa và làm lại từ đầu.
2. Dùng một email sạch (chưa đăng ký WeChat). Nhập email, bấm kích hoạt, nhập mã xác minh được gửi vào hộp thư, và đặt mật khẩu.

1. Chọn đối tượng (Subject). Với mục đích cá nhân, chọn "Individual" (Cá nhân). Cần xác minh danh tính và quét WeChat; miễn phí.
2. Vào backend, tìm AppID trong mục Development Management. Nó bắt đầu bằng "wx"; hãy copy nó.

Khi đã có AppID, hãy gửi dòng này cho WorkBuddy của bạn:

1Đổi AppID trong dự án thành AppID của tôi: [chuỗi wx... của bạn]

Sau đó quay lại WeChat Developer Tools và bấm "Upload" ở góc trên bên phải.

Nó sẽ hỏi số phiên bản và ghi chú. Lần đầu tiên hãy dùng 0.0.1. Sau khi upload, hãy vào trang Version Management trong backend WeChat. Bạn sẽ thấy phiên bản đó; bấm mũi tên xuống để tìm "Trial Version." Khi đã cài đặt, nó sẽ đưa cho bạn một mã QR dùng thử.

Giờ bạn có thể khoe Mini Program của mình với bạn bè rồi! Họ có thể dùng bằng cách quét mã mà bạn không cần phát hành hay vượt qua đợt duyệt chính thức nào.

Hai điều cần lưu ý:

Thứ nhất, upload không phải là publish. Upload chỉ đưa phiên bản phát triển lên backend. Nó chưa thể được tìm kiếm; chỉ những người có mã mới vào được.

Thứ hai, Trial Version có thời hạn. Thường là bảy ngày. Chỉ cần upload lại để có mã mới. Hoàn hảo cho việc demo hoặc chia sẻ với vài người bạn.

⚠️ Đối với nhiều người, như vậy là đủ. Nếu chỉ dùng cho cá nhân hoặc bạn bè, Trial Version hoạt động tốt. Tôi sẽ giải thích về chứng nhận (certification) và đăng ký (filing) trong các chương sau.

Lúc này bạn đã có: một mã QR dùng thử để gửi cho bạn bè.

Bạn đã tạo ra một Mini Program thực thụ. Nhưng nếu một người bạn thêm dữ liệu rồi đóng ứng dụng, dữ liệu đó sẽ biến mất. Làm sao để lưu dữ liệu đây?

VII. Đừng Để Mất Dữ Liệu Khi Đóng Ứng Dụng

Chúng ta vẫn chưa giải quyết việc dữ liệu của bạn được lưu ở đâu.

Nếu dữ liệu chỉ tồn tại cục bộ trên điện thoại, nó sẽ mất khi bạn đổi máy hoặc muốn chia sẻ. Bạn cần một backend. Tự dựng backend đồng nghĩa với việc phải loay hoay với máy chủ, cơ sở dữ liệu, tên miền, HTTPS, và đăng ký. Hãy bỏ qua rắc rối đó và dùng Cloud Development. Cơ sở dữ liệu và logic nằm trên đám mây; Mini Program gọi trực tiếp.

1. Bấm "Cloud Development" ở phía trên công cụ → Activate → Ghi lại Environment ID.

Khi bạn bấm kích hoạt, nó có thể hiện mức phí 19,9 RMB/tháng, nhưng khoan—nó sẽ tự động hướng dẫn bạn đến một môi trường phát triển miễn phí.

1. Copy Environment ID và gửi cho WorkBuddy để cài đặt ID globalData.env.

1. Cloud Development Console → Database → Tạo các collection như categories / habits / checkins. Đặt quyền truy cập là "Creator only can read/write" (Chỉ người tạo mới đọc/ghi được). WorkBuddy sẽ cho bạn biết cần tạo những collection nào.

1. Bấm chuột phải vào cloudfunctions/login → Upload and Deploy: Install cloud dependencies (Upload và triển khai: Cài đặt các phụ thuộc đám mây). Điều này đảm bảo cloud function có thể tìm thấy các package cần thiết.

Một mẹo nhỏ: Nếu bạn không tìm thấy cloudfunctions trong dự án của mình, có thể thư mục import của bạn đã sai. Hãy đổi sang thư mục cha.

Giờ thì phần lưu trữ dữ liệu đã sẵn sàng, hãy tải lại dự án. Nó sẽ yêu cầu AppID và Cloud Environment ID.

⚠️ Bạn không thể dùng tài khoản dùng thử cho việc này; bạn cần một AppID chính thức.

⚠️ Cloud development đôi khi có chương trình khuyến mãi cho người dùng mới, nhưng chúng có thời hạn.

Import lại phiên bản lưu dữ liệu, dán AppID của bạn, và chọn "WeChat Cloud Development" cho backend service. Giờ thì dữ liệu đã được kết nối.

Lưu trữ dữ liệu đã xong. Nếu bạn muốn người lạ tìm thấy bạn hoặc dùng cho mục đích thương mại, thử thách thực sự mới bắt đầu.

VIII. Để Người Lạ Tìm Thấy Bạn

Vượt qua Trial Version khác với vượt qua đợt duyệt chính thức.

Hãy tự kiểm tra sáu mục sau trước:

1. AppID có chính thức không? Tài khoản dùng thử không thể phát hành.
2. Bấm vào mọi trang. Không được có màn hình trắng hay sập.
3. Cấu hình server domains. Nếu ứng dụng của bạn lấy dữ liệu bên ngoài, những tên miền đó phải được cấu hình trong backend (Development → Development Settings). Chỉ cho phép HTTPS và WSS, và tên miền phải hoàn tất đăng ký (ICP). Không cho phép IP.
4. Bỏ chọn "Do not verify request domain..." trong developer tools. Tùy chọn này chỉ hoạt động trong công cụ; trên thiết bị thật vẫn sẽ kiểm tra. Hãy tắt nó đi và kiểm tra lại.
5. Điền User Privacy Protection Guide. Nếu ứng dụng của bạn đọc avatar, vị trí, hoặc danh bạ, bạn phải khai báo. Nếu không, những API đó sẽ bị vô hiệu hóa. Bỏ qua mục này nếu bạn không đụng đến thông tin người dùng.
6. Hoàn thiện tên, avatar, giới thiệu và danh mục trong backend. Chọn sai danh mục là lý do phổ biến khiến bị từ chối.

💡 Nếu bạn dùng Cloud Development hoặc không dùng internet, hãy bỏ qua mục 3 và 4.

🔴 Tôi đã chuẩn bị sẵn đoạn này cho bạn; cứ gửi cho WorkBuddy:

1Tôi đang gửi duyệt một WeChat Mini Program. Hãy giúp tôi kiểm tra dự án này theo những mục sau.
2Sửa những gì bạn sửa được, và cho tôi biết những gì tôi cần tự điền.
3Kiểm tra xem appid trong project.config.json có phải là tài khoản dùng thử không.
4Liệt kê tất cả đường dẫn trang trong app.json để tôi kiểm tra màn hình trắng.
5Tìm trong dự án các chỗ dùng wx.request, wx.uploadFile, wx.downloadFile, và wx.connectSocket.
6Trích xuất tất cả tên miền và nhóm chúng thành bốn loại trên.
7Đánh dấu những tên miền không bắt đầu bằng https/wss hoặc dùng IP để tôi cấu hình trong backend.
8Đổi urlCheck trong project.config.json thành true nếu nó đang là false.
9Tìm các API thông tin người dùng (avatar, vị trí, danh bạ, v.v.) và liệt kê file/dòng nào đang dùng chúng.
10Tôi sẽ dùng nó cho Privacy Protection Guide.
11Kiểm tra xem còn sót code gỡ lỗi console.log nào không.
12Cuối cùng, đưa cho tôi một bảng tổng kết gồm: Hạng mục kiểm tra, Trạng thái hiện tại, và Bước tiếp theo.

⚠️ Đừng bỏ qua mục 2. Duyệt chính thức yêu cầu một sản phẩm hoàn chỉnh. Bị từ chối vì "chức năng không đầy đủ" là chuyện thường.

Sau đó có 4 rào cản trước khi gửi duyệt:

1️⃣ Thông tin Mini Program

• Tên: Một cái tên dễ nhận diện (ví dụ: "Trình theo dõi thói quen"). Tài khoản cá nhân không thể dùng chữ "Official" hoặc "WeChat."
• Biểu tượng (Icon): PNG 1024x1024.
• Giới thiệu: Một câu mô tả chức năng.
• Phạm vi dịch vụ: Chọn "Tools > Efficiency" hoặc "Life Services."

2️⃣ Danh mục

Tài khoản cá nhân bị giới hạn. Gợi ý: Tools > Efficiency hoặc Notepad. Danh mục quyết định bạn có thể dùng những API nào.

3️⃣ Đăng ký (ICP)

Tính đến năm 2024, tất cả Mini Program đều phải có đăng ký ICP. Bạn cần ảnh chứng minh thư và xác minh khuôn mặt. Mất 1-3 ngày làm việc.

4️⃣ Chứng nhận WeChat (Tùy chọn nhưng được khuyến nghị)

Tài khoản cá nhân có thể đăng ký chứng nhận với giá 300 RMB/năm. Nếu không muốn trả phí, bạn có thể bỏ qua—nó sẽ không ngăn bạn phát hành, nhưng bạn sẽ không được tìm kiếm.

Các lý do bị từ chối phổ biến: thiếu chứng chỉ y tế/tài chính, thiếu quyền phát trực tiếp (live-streaming), hoặc chức năng không đầy đủ. Quá trình duyệt thường mất 1-7 ngày.

Thấy Chưa? Bạn Đã Làm Được Rồi

Bạn nói với AI, và code hiện ra.

Bạn điền một đường dẫn, và trang hiện lên.

Bạn gửi lại đống chữ đỏ, và nó tự sửa.

Bạn quét một mã QR, và nó chạy trên điện thoại.

Bạn bấm upload, và bạn bè có thể quét được.

Từ đầu đến cuối, không cần bất kỳ kiến thức lập trình nào.

Chỉ cần làm một việc tối nay: cài đặt WeChat Developer Tools. Mất mười phút.

Cài xong, bạn sẽ ngứa tay muốn thả thứ gì đó vào chạy thử. Và lúc đó, bạn đã thực sự bắt đầu rồi.

Nếu có ai bạn biết muốn làm Mini Program mà chưa bắt đầu, hãy gửi bài này cho họ. Nó sẽ giúp họ tiết kiệm cả một ngày cuối tuần.

Tôi là Song Song. Tôi sẽ tiếp tục chia sẻ những nội dung hữu ích.