/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 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有几种模式developmenttestproduction

    .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.