WorkBuddy Turns a Photo-Collage Idea Into a Live WeChat Mini-Program in Under an Hour, No Code Written
I used workBuddy to develop my first mini-program and successfully launched it
Hello everyone, I'm Xiaofan.
Friends who follow Xiaofan know that I'm a veteran code monkey who has worked for many years. Like many others, I've spent years researching various technologies, and I've also learned WeChat mini-program development.
But to be honest, I've bought several books, but after reading a few chapters they basically collected dust, and I never launched a mini-program of my own.
Now in the AI era, as long as you have an idea, AI can help you realize it quickly, greatly reducing the cost of trial and error.
Let me first show you what the mini-program I developed with WorkBuddy without writing a single line of code looks like:
Guess how long it took to make this nine-grid photo collage mini-program?
Less than an hour.
That used to be unimaginable. Now with AI, mini-program development has become really easy. Instead, the longest part of launching this mini-program was the mini-program filing and review.
The filing took a full 22 days, but fortunately it's now successfully live.
Next, I'll walk you through developing your first mini-program step by step, and publishing it.
Of course, since it's my first mini-program, I ran into some pitfalls along the way. But I've basically stepped on them all for you.
One: Common Misconceptions
① I'm just an ordinary person, I've never learned programming, no programming foundation at all. Can I do it?
Answer: Absolutely no problem. Two years ago maybe not, but AI Agents today are stronger than you think. As long as you have an idea, they can basically help you realize it.
② Do I need to understand the mini-program development and launch process, the basic framework of mini-program projects, and the UI layout before I start?
Answer: This is a big misconception. I used to wait until everything was ready before starting, and the result was that I bought a pile of books, read a few chapters, then gave up.
The right approach is to run through the whole process first, then fill in gaps as you go. Once you see results, you'll have the motivation to continue.
③ Do I need to set up my own development environment?
Answer: No. WorkBuddy has it all ready for us.
④ Can an ordinary person launch their own mini-program? Does it cost money?
Answer: Yes. Mini-program subjects include individuals and enterprises; here we'll create an individual type. The individual mini-program certification fee is 30 yuan.
Two: Preparation
2.1 Download the latest WorkBuddy and make sure your version is above 5.6.1
If you haven't installed it yet, you can download it from the official website: https://www.workbuddy.cn/.
Check the version number
2.2 Create a separate workspace
You must form a good habit: create a new workspace for every new project. This keeps the AI's memory from getting confused (don't ask how I know).
Three: Give Your Idea to WorkBuddy and Let It Ask You Questions Back
Sometimes inspiration strikes, and you get a new idea. Just throw it to the AI.
The specific steps are as follows:
① Idea One: I want to develop a "slacking-off reading" mini-program whose main function is to let me read novels while slacking off at work. Help me analyze whether it's feasible.
It seems a slacking-off reading mini-program won't work, so let's go a different route.
② I went to Fuxian Lake a couple of days ago and took a lot of photos. Can I make a mini-program that stitches photos and processes them, then lets me post directly to Moments?
Continue throwing the idea to WorkBuddy.
This direction works. Next is to determine the feature list. A person's ideas are limited, so it's time to let the AI help us refine the feature list.
Here's how I phrased the prompt: "Based on what we confirmed above, give me a feature list. If anything is unclear, ask me to confirm it."
The last half-sentence is a habit I've developed. The biggest fear in mini-program development is scope going out of control, ending up with something different from what you imagined.
Having it list the uncertain points and ask you is much easier than thinking through everything yourself.
After several rounds of conversation, the following feature list document was produced.
Four: Prototype Design
With the feature list in hand, it's best to also have a prototype. I suggest not skipping this step, because seeing things with your eyes gives peace of mind.
Just say to WorkBuddy: "Based on the feature list, give me a mini-program prototype."
What it gives me is an HTML page, with phone screens arranged horizontally, warm orange-brown with beige tones, viewable in the browser when clicked. The four function cards on the home page, the dashed grid on the cropping page, and the numbered corner badges are all there.
With the prototype and feature list, we need to check whether the requirements and UI design match expectations. If not, modify them immediately until you're satisfied.
Five: Developing the Program
5.1 Choosing Mini-Program Development
After the above conversations with WorkBuddy, we now have two files:
- nine-grid-photo-feature-list.md
- nine-grid-photo-prototype.html
The most important step: choose Mini-Program in code development, and give it this prompt:
"Based on the nine-grid-photo feature list and nine-grid-photo prototype documents, help me develop the mini-program."
5.2 Entering the Prompt
5.3 Associating Cloud Services
After entering the prompt, WorkBuddy starts to work hard. During the process, a [Cloud Services] dialog pops up for you to choose.
How to choose?
If the mini-program needs to save data, user login, upload files, or call large models, choose to enable cloud services. If none of these are needed, choose not to enable.
After confirming, WorkBuddy automatically integrates the services and starts writing code.
After a wait, we see the mini-program is developed and can be previewed by clicking.
This is the first version generated, and it's actually very close to the prototype we provided.
But there are bound to be some issues or bugs. That's not scary; we just continue the conversation with WorkBuddy and ask it to fix them.
For example: from the preview above, we see that the mini-program doesn't have the "Creative Collage" module.
We just say: "Now add the Creative Collage module."
Sometimes a requirement is hard to describe; we can also send a screenshot to it.
After iterating back and forth, the mini-program is basically done. Now we need to click each feature to test it.
Here I found a problem: WorkBuddy doesn't seem to support selecting images for testing.
To test the mini-program more realistically, I suggest everyone download the official devtools.
Download address: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
Six: Publishing the Mini-Program
6.1 Registering a Mini-Program Account
Although the next section will mention creating a trial version, I think that makes developing a mini-program meaningless, because others can't access your mini-program; you can only play with it yourself.
So I suggest everyone register their own mini-program account. That makes a complete closed loop and gives a sense of accomplishment.
- Visit the WeChat Official Platform website
Visit WeChat Official Platform (<www.weixin.qq.com>), then click the register button.
- Choose Mini-Program to register
- Fill in email and other details
Note: The email must be a brand new one that hasn't been used to register the Official Accounts Platform, WeChat Open Platform, or bound to a personal WeChat account.
Each email can only apply for one mini-program.
- Fill in mini-program category and subject type
Here I developed a non-game one, and as an individual developer, I chose Individual as the subject.
- Log in to your mini-program account
After filling in all the information and submitting successfully, your mini-program account is successfully applied and you can log in.
From here, publishing, review, filing, and launching all happen on this platform.
6.2 Publishing via WorkBuddy
Return to the earlier step. After testing all mini-program features, click "Share" in the application space to enter the publishing process.
How to register a mini-program account was covered in the previous section; if you don't understand, go back and review.
Next you need to operate on your phone.
6.3 Publishing via Devtools
Using the devtools has the advantage of convenient preview and real-device debugging.
After preview and debugging are fine, click the upload button.
6.4 Submitting for Review
Whether you published via WorkBuddy or the WeChat devtools, after the above steps the mini-program is uploaded to the mini-program admin console we registered, as shown below.
Next, fill in the review form, submit for review, and wait for approval.
Of course, the first submission for review will very likely be rejected (don't ask how I know).
No need to panic. Just screenshot the rejection reason and send it to WorkBuddy.
After modifying and resubmitting, eventually you'll see a screen like this, meaning the review passed.
6.5 Submitting for Release
Finally, the last step: submit the approved version for release.
I can only say this step is really slow. I waited a full 22 days for the filing to pass.
When the filing passes, you'll receive an email similar to the one below.
Then you can see on the Official Platform that the mini-program is successfully launched.
Seven: Mini-Program Management
From the bottom-left of the account, go to "Settings > Data Management > Applications" to manage published mini-programs.
Summary
After all, it's my first WeChat mini-program, so I ran into some pitfalls, but everything was solved and it's live.
If you're interested in mini-programs, be sure to build one yourself and successfully launch it.
You're welcome to try the mini-program; all features are free. And please leave comments and suggestions.
I hope this article helps you. See you next time. ヾ(•ω•`)o (●'◡'●)
Top 2 of 5 from juejin.cn, machine-translated. The original thread is authoritative.
It's all written by AI, why is the page still this ugly?
The UI wasn't adjusted by AI — it's still the first version.
Big shot, help me design one.
The UI should probably be redesigned; there should be a dedicated skill.
Recommend a skill; I want to learn it.