Honestly, I think a mini program is not a deeply technical thing, especially now that component libraries exist and the ecosystem keeps maturing: write slowly against the documentation and it is only a matter of time. This is not a lesson in how to program, just a few small suggestions from my own experience.
1. Technology choice
Technology choice matters enormously: it directly decides how complex your later work becomes. Mini program development is a process centred on business logic, quite unlike algorithm research. Whether the mini program is high quality and the experience good depends entirely on your page design and page interactions.
So in choosing, a few points deserve special attention. First, component library support. Components are a vital part of the whole program: writing them yourself costs large amounts of time, and even written they may work only for you, with compatibility problems besides. So do not reinvent the wheel; we lack the time and energy for it.
But you cannot pick a component library at random either. List every element in your page design and note which method or component will implement it, then check whether the library you choose covers them all. Equally important: how is the library’s community feedback? Are there many unavoidable bugs inside?
I learned this firsthand: because of component compatibility issues I often spent days on compatibility and adaptation. I settled on mpvue plus Vant. The design mockup had a custom navbar fixed to the top, and I did not think much of it at first. But when I switched between different device models, misalignments came one after another, especially on Apple models with the notch.
At first I thought of adapting it myself, but my hair kept falling out, which should have told me to stop. Later I found an adaptable navbar component on GitHub that solved my problem, which also shows from another angle: do not build your own wheel.
Second, framework ecosystem. Since everything compiles to the official mini program format in the end, some problems are inevitable. When choosing a mini program framework, weigh this: where does it differ from the official standard, what does it not support, and how does the community rate it?
Basically, choose frameworks with positive user feedback and avoid brand-new ones, which tend to be full of pits, and sometimes you email their teams and wait centuries for a reply. To pick a good framework, see the GitHub repository linked at the end of the original article: it holds plenty of mini program resources, framework rankings and component library comparisons.
Third, framework syntax. Syntax is not the main issue, since front-end syntax is all similar. My point is rather which parts of a mini program framework’s syntax are incompatible with the official one; the documentation generally spells it out.
Mini program development can now be written in Vue syntax, which is very convenient, but if you are unfamiliar with the mini program’s life cycle versus Vue’s, problems arise. My problem was using life cycle functions sensibly. Sometimes your program throws strange errors, such as reporting an image failed to load while the image shows fine. In fact the page had rendered before the image was recognised; it loaded afterwards. It is an ordering issue.
2. Development steps
The early stage is architecture design and technology choice, and these early choices matter most: choose well and you save much time and effort later.
Code structure design. Development steps need design too: plan a directory structure, say folders for components, images, utility functions and pages. The initial project comes with a default structure, but you should adapt it slightly to make it clearer.
Start from components, images, utilities and pages. Pages barely need changing since project initialisation designed them. For components, create a component folder for your custom ones to ease later reuse. The key is to write components well so reuse is efficient, controlling a component’s form through the parameters you pass it.
For image storage I suggest dividing by function: images for the tab bar, images for the navbar, others sorted by their own purpose. The logical structure stays clear and later maintenance becomes easier.
Project configuration. This depends on your specific business needs. We often call third-party libraries or interfaces, such as positioning; my current project uses Tencent Maps’ third-party interface, which I will not expand on here.
In my case an illegal-domain error appeared; you need to configure the domain in the mini program’s backend, and the error message tells you how, so simply add that domain. Or if your backend request interface errs, usually the interface’s domain is not on HTTPS, which is a bit of a bother: during debugging, in the developer tools’ details at the top right, tick the skip-verification box. But to go live you need an HTTPS server hosting your interfaces.
3. In closing
Those are my notes from this project. The project itself remains imperfect, but I put effort into the early design, mainly so the later development would have fewer bugs and errors and maintenance would be easier.
Business mini programs in particular need attention to component development and design, since many pages share one component. Copy-pasting works too, only maintenance is harder. Unless forced, we build every product to be scalable and maintainable; that is also a standard we hold ourselves to.
XZS Tech is a Shenzhen-based development company. We build custom mini programs, WeChat and mobile apps, e-commerce systems and corporate websites, covering requirement analysis, design, development and after-sales support, and we hand over the source code at delivery.
If you are planning something along the lines of what this article describes, tell us the scenario and we will come back with an approach and a cost range. Call 0755-82494862, or reach us through the contact page at hk.xiaozhushoukeji.cn/en/contact-en/. The first conversation costs nothing.
Want to talk through what you just read?
We work end to end, from product design to launch. Tell us about your scenario and we can start there.
Shenzhen XZS Technology Co., Ltd. · Tel 0755-82494862 · 13760424861