Skip to content

Latest commit

 

History

History
152 lines (106 loc) · 13.8 KB

README.md

File metadata and controls

152 lines (106 loc) · 13.8 KB
Raw

logo

c-shopping-weapp 微信小程序

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

使用技术

  • Taro
  • Redux Toolkit
  • RTK Query
  • TailWindCss

在线体验

c-shopping-weapp mini program

由于我的微信小程序是个人的，小程序包含了电商，审核一直不给通过，需要查看演示的同学可以clone代码自己本地运行，或者加我微信，我添加同学到小程序演示版本。

前言

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 Screen 1 Screen 2 add to the cart
Cart
Module Initial Verify Submit Response error
Login
Module Not logged in After logging in After logging out
Profile
Module Loading and skeleton Level 1 Level 2 Level 3 Filter Sort
Classification subset
Module Loading and skeleton Normal screen 1 Normal screen 2 Error
product details

运行使用

本地运行 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

关于我

I am a technology explorer, a eager learner, and a problem solver.
我是一个技术的探索者，一个渴望学习的人，一个解决问题的人。

公众号｜我的微信

关注公众号获得更多资讯，有任何意见或建议都欢迎提issue，或者到公众号留言；也欢迎加我微信交流。

我的公众号 我的微信
继小鹏公众号 我的微信

贡献

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

License

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