/c-shopping-weapp

Based on the react ecosystem and using the taro framework, a complete WeChat applet application is developed, a beautiful e-commerce shopping application. 基于react生态，使用taro框架下，开发的完整微信小程序应用，一个精美的电商购物应用。

Primary LanguageJavaScriptMIT LicenseMIT

logo

c-shopping-weapp 微信小程序

这是一个基于react生态，使用taro框架下，开发的完整微信小程序应用，一个精美的电商购物应用。

使用技术

  • Taro
  • Redux Toolkit
  • RTK Query
  • TailWindCss

前言

c-shopping-weapp是一个精美的电商微信小程序，界面优雅，功能丰富，小巧迅速，包含一个电商平台MVP完整功能，具备良好的审美风格与编码设计。

项目数据接口来自于c-shopping Next.js 开源项目

项目传送门: https://github.com/huanghanzhilian/c-shopping

希望来的人，有所收获。故事不结束，青春不散场。

项目介绍

背景：

  • 一直以来前端UI框架被固定形式占据（受限于传统的UI框架），导致视觉疲劳，在开发一些高度自定义的项目时，往往力不从心；
  • 当项目复杂后，在组件需要调用多个 api 时会变得复杂起来，比如需要管理多个 loading 和 error 状态，这会导致产生非常多的 state 声明，还有请求取消、请求竞态等可能存在的问题也容易被忽略；
  • 随着项目复杂，样式的开发与维护变得庞大且臃肿；

意图：

改进背景中提到的问题。

目的：

打造一个完整的，适合web端的良好生态。

项目演示

Module loading skeleton success error or empty
Feed
Module loading success empty error
Category
Module Not logged in Data is empty
Cart
Module Initial Verify Submit Response error
Login

运行使用

本地运行 c-shopping-weapp 微信小程序程序，请按照以下步骤操作：

  1. 克隆存储库：

    git clone https://github.com/huanghanzhilian/c-shopping-weapp.git

  2. 导航到项目目录：

    cd c-shopping-weapp

  3. 安装依赖项：

    npm install

  4. 查看.env.example内容，创建新的env的文件，在项目根目录，定义所需的环境变量。 或者其他环境配置，mode有几种模式development、test、production

    .env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

    TARO_APP_ID="Your WeChat mini program appid"
TARO_APP_BASE_URL="Your api service base address"

  5. 启动：

    npm run dev:weapp

  6. 打开微信开发者工具，小程序模式，创建项目，选择该项目下dist目录，启动项目。

  7. 构建生产小程序

    npm run build:weapp

公众号

关注公众号获得更多资讯，有任何意见或建议都欢迎提issue，或者到公众号。

继小鹏公众号

贡献

欢迎贡献！ 请提出问题或提交拉取请求。

License

This project is licensed under the MIT License - see the LICENSE file for details.