mall-app-web: one Vue 3 storefront compiled to every mini program platform

One codebase, fourteen build targets

mall-app-web is the front-end half of a separated front-end and back-end e-commerce project, and the back end is the macrozheng mall repository. The mobile client is described as a mobile e-commerce project implemented on uni-app and Vue 3, covering a home portal, product search, product display, a brand area, the shopping cart, the order flow, payment and a member centre. The point of the project, and the reason it exists in this shape, is that the same source compiles to many platforms. The package scripts make that explicit, with a dev and a build entry for each: app, app-android, app-ios, custom, h5, h5:ssr, and then mini program targets for mp-alipay, mp-baidu, mp-kuaishou, mp-lark, mp-qq, mp-toutiao and mp-weixin, plus three quickapp-webview variants. The build tooling is Vite, the state management is Pinia, the type system is TypeScript, the styles are Sass, and ESLint with Prettier handle code quality. The live demo is published at macrozheng.com/app/, and the screenshots in the README are of that demo running.

The structure tells you it is a reference implementation

The src/ layout is conventional for a uni-app project and worth reading as a template. There is an apis/ directory holding the API request methods, divided by business module, which is the separation that matters most in a project like this because it keeps every network call in one place rather than scattered through page components. There is components/ for shared component wrappers and composables/ for composition functions, the custom hooks, which is the Vue 3 replacement for the older mixin pattern. The stores/ directory holds the Pinia state modules, and types/ holds the TypeScript definitions that connect the two. Then utils/ for utility classes, styles/ for global styles, static/ for images and other static assets, and pages/ for the screens themselves. The pages directory is a map of the product: address management, brand pages, the cart, product categories, coupons, the index home page, money for payment, notices, orders, product detail, a public page, settings and the member area. The two directories worth calling out in a review are apis/ and types/, because they are what make this a typed client rather than a collection of screens.

Every API call depends on one module of the back end

The setup instructions contain the detail that trips people up, and the project is explicit about it. Because this is a separated front-end and back-end project, calling the local API requires standing up the back-end environment, and the documentation points at the macrozheng mall repository for that. More specifically, the README states that the interfaces in mall-app-web all live in the mall-portal module, and that you must start that module. There is a shortcut for people who do not want to run a back end at all: the development environment file .env.development contains a VITE_API_BASE_URL setting, and changing it to the online address portal-api.macrozheng.com lets the app talk to the hosted service with no local environment at all. That is a genuinely useful arrangement for a sample project, because it means a reader can run the front end in a browser and see real data within a couple of minutes, and it also means the front end is decoupled enough to point at any deployment of the same API. The tree holds three environment files, .env, .env.development and .env.production, which is the usual Vite arrangement for per-mode configuration.

Running it locally, in the browser and in WeChat DevTools

The project is developed in VS Code, and the dependency step is the standard one:

npm install

For the browser version, the script is npm run dev:h5, which starts the uni-app dev server on the Vite port:

npm run dev:h5

The documentation says that once it runs successfully you open http://localhost:5173 and switch the browser into phone mode, which is the detail that makes the layout look right, since the pages are designed for a phone viewport. For the WeChat mini program target the script is:

npm run dev:mp-weixin

and once that succeeds you import the generated project from the dist/dev/mp-weixin directory into WeChat DevTools, which is how the mini program build target is meant to be consumed. The underlying tooling is the uni CLI, since every script is a uni invocation with a different platform flag, and the same applies to the build scripts, where build:h5 is a plain uni build and the mini program builds pass the platform flag:

"dev:h5": "uni",
"dev:mp-weixin": "uni -p mp-weixin",
"build:h5": "uni build"

Type checking is separate from the dev server, with a tsc script that runs vue-tsc with noEmit and skipLibCheck, and lint runs ESLint with the fix flag over the Vue, JavaScript and TypeScript sources while ignoring paths in .gitignore. Formatting is Prettier over the src tree.

A storefront sample, and the boundaries that come with that

It is worth being clear about what this project is, because the quality of the code and the fitness of the code for production are different questions. The screenshots, the demo site and the README structure all describe a teaching project, and the sibling projects named in the badges make the intent obvious, since the back-end project, an admin front end named mall-admin-web, and the Gitee mirror are all part of the same set. What you can take from it is the architecture of a mobile e-commerce client in a specific stack, with typed API modules, Pinia stores, typed models and a build matrix, and the fact that it runs against a real back end rather than mock data. What you should not take from it is the shop itself, the catalogue, or the assumption that the payment and order flows have been reviewed by anyone who has had to run a payment system in production. The distinction matters for a second reason, which is that the ordering flow and the member centre are the parts of an e-commerce client that carry the most business logic and the most chance of subtle mistakes, and those are the parts a sample project is least able to demonstrate.

Where mall-app-web is the wrong tool

Four limits are visible from the repository itself. The first is the coupling to the back end. The front end assumes a specific API surface served by the mall-portal module, with a specific field set for products, orders and members, and pointing it at a different back end means rewriting the apis/ layer and the types/ layer together, so this is not a headless front end you can point anywhere. The second is the uni-app abstraction itself. The platform matrix is the feature, but the price is that a small number of platform-specific behaviours, such as payment flows inside WeChat, payment inside Alipay, or the storage and permission models of the various quickapp runtimes, cannot be expressed once. uni-app gives you a large common surface and then a set of escape hatches per platform, and a team that needs deep behaviour on one platform will end up writing a lot of platform-specific code that the structure does not make obvious. The third is the release state. The manifest says version 3.0.0 while the newest tagged release is v1.0.0 from 2022-12-15, the last push to the repository was on 2026-05-13, and the front end and back end repositories are versioned separately, which means the pairing you clone is not necessarily the pairing that was tested. The fourth is that the stack is a choice, not a neutral one, and a team that has standardised on native mini program development or on a React Native codebase will be adopting two frameworks, uni-app and Vue 3, to get a cross-platform build they might otherwise get from their existing stack.

Editorial conclusion

Adopt mall-app-web if you want a working reference for structuring a uni-app and Vue 3 mobile storefront with typed APIs, Pinia stores and one build script per target platform, or if you are learning how a separated front-end and back-end e-commerce project fits together. Do not adopt it as the basis of a production shop, since it is a demonstration project with a sample catalogue and no production hardening. Before you build on it, start the mall-portal module of the back-end project locally, and note that the package version in the manifest is 3.0.0 while the newest tagged release is v1.0.0 from 2022, with the last push on 2026-05-13.

Frequently asked questions

Official sources

1. License: Apache-2.0
2. macrozheng/mall-app-web on GitHub
3. Project website
4. README
5. Releases