• Taro
• Redux Toolkit
• RTK Query
• TailWindCss

由于我的微信小程序是个人的，小程序包含了电商，审核一直不给通过，需要查看演示的同学可以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.
我是一个技术的探索者，一个渴望学习的人，一个解决问题的人。

• Email: [email protected]
• Twitter: 继小鹏
• Github: Github
• Blog: 继小鹏
• 我的中文渠道:
  • 微博：继小鹏1
  • 微信公众号：「继小鹏的博客」
  • 掘金：继小鹏
  • 知乎：继小鹏
  • 即刻：继小鹏
  • bilibili：继小鹏

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

我的公众号	我的微信

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

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