Convert Figma logo to code with AI

skyvow logom-mall

:dog: 微信小程序-小商城前台(基于 WeUI.wxss、ES6 前端技术开发...)

1,552
625
1,552
6

Top Related Projects

微信小程序商城,微信小程序微店

19,639

又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端

🔥 🎉newbee-mall是一套电商系统,包括基础版本(Spring Boot+Thymeleaf)、前后端分离版本(Spring Boot+Vue 3+Element-Plus+Vue-Router 4+Pinia+Vant 4) 、秒杀版本、Go语言版本、微服务版本(Spring Cloud Alibaba+Nacos+Sentinel+Seata+Spring Cloud Gateway+OpenFeign+ELK)。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

80,076

mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于Spring Boot+MyBatis实现,采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。

ruoyi-vue-pro 全新 Cloud 版本,优化重构所有功能。基于 Spring Cloud Alibaba + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城、CRM、ERP、AI 大模型等功能。你的 ⭐️ Star ⭐️,是作者生发的动力!

Quick Overview

M-Mall is a WeChat mini-program e-commerce project built with WePY, a framework for developing WeChat mini-programs. It provides a complete shopping experience, including product browsing, cart management, and order processing, all within the WeChat ecosystem.

Pros

  • Fully functional e-commerce solution tailored for WeChat mini-programs
  • Built with WePY, offering better structure and maintainability compared to vanilla WeChat mini-program development
  • Includes comprehensive features such as user authentication, product management, and order processing
  • Well-organized codebase with clear separation of concerns

Cons

  • Limited documentation, which may make it challenging for new developers to understand and contribute to the project
  • Dependency on the WeChat ecosystem, limiting its portability to other platforms
  • Potential scalability issues for larger e-commerce operations due to the constraints of mini-programs
  • Lack of recent updates, which may indicate reduced maintenance and potential compatibility issues with newer WeChat APIs

Code Examples

// Example of a product list component
<template>
  <view class="weui-panel weui-panel_access">
    <view class="weui-panel__bd">
      <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" wx:for="{{ items }}" wx:key="">
        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
          <image class="weui-media-box__thumb" src="{{ item.thumb_url }}" />
        </view>
        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
          <view class="weui-media-box__title">{{ item.name }}</view>
          <view class="weui-media-box__desc">
            <text class="text-orangered">¥ {{ item.price }}</text>
          </view>
        </view>
      </navigator>
    </view>
  </view>
</template>
// Example of adding an item to the cart
addToCart(e) {
  const id = e.currentTarget.dataset.id
  App.WxService.navigateTo('/pages/cart/add', {
    id: id
  })
}
// Example of user authentication
async onLoad() {
  try {
    const token = await this.$parent.getToken()
    console.log('token', token)
    this.redirectTo()
  } catch(err) {
    console.log(err)
  }
}

Getting Started

  1. Clone the repository:

    git clone https://github.com/skyvow/m-mall.git
    
  2. Install dependencies:

    cd m-mall
    npm install
    
  3. Install WePY CLI globally:

    npm install -g wepy-cli
    
  4. Build and run the project:

    wepy build --watch
    
  5. Open WeChat Developer Tools, import the project, and select the dist folder as the project root.

Competitor Comparisons

微信小程序商城,微信小程序微店

Pros of wechat-app-mall

  • More active development with frequent updates and contributions
  • Comprehensive documentation and setup instructions
  • Wider range of features including user management and order processing

Cons of wechat-app-mall

  • More complex codebase, potentially harder to customize
  • Heavier reliance on external services and APIs

Code Comparison

m-mall:

Page({
  data: {
    items: [],
    hidden: !0,
    hasMore: !0,
    page: 1,
    limit: 10,
  },
  onLoad() {
    this.getList()
  },
})

wechat-app-mall:

Page({
  data: {
    goodsDetail: {},
    selectSizePrice: 0,
    selectSizeOPrice: 0,
    totalScoreToPay: 0,
    shopNum: 0,
    hideShopPopup: true,
    buyNumber: 0,
    buyNumMin: 1,
    buyNumMax: 0,
  },
  onLoad(e) {
    this.data.goodsId = e.id
    this.data.kjJoinUid = e.kjJoinUid
    this.getGoodsDetail(this.data.goodsId)
  },
})

The wechat-app-mall code snippet shows a more detailed and feature-rich implementation, with additional properties and methods for handling product details, pricing, and shopping cart functionality. In contrast, the m-mall code is simpler and focuses on basic list loading functionality.

19,639

又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端

Pros of litemall

  • More comprehensive e-commerce solution with admin, API, and Vue storefront
  • Better documentation and setup instructions
  • More active development and larger community (3.5k+ stars vs 1.5k+)

Cons of litemall

  • More complex architecture, potentially harder to customize
  • Heavier resource requirements due to its full-stack nature
  • Steeper learning curve for developers new to the tech stack

Code Comparison

m-mall (WeChat Mini Program):

Page({
  data: {
    goods: {},
    total: 0,
    prompt: {
      hidden: !0,
    },
  },
  onLoad() {
    this.getGoods()
  },
})

litemall (Vue.js):

export default {
  data() {
    return {
      goods: {},
      total: 0,
      loading: false
    }
  },
  created() {
    this.getGoods()
  },
}

Both projects use similar data structures and lifecycle methods, but litemall uses Vue.js conventions while m-mall follows WeChat Mini Program patterns. litemall's code is more modular and easier to maintain in larger applications.

litemall offers a more complete e-commerce solution with better documentation and community support. However, it may be overkill for simpler projects where m-mall's lightweight approach could be more suitable. The choice between them depends on project requirements and developer expertise.

🔥 🎉newbee-mall是一套电商系统,包括基础版本(Spring Boot+Thymeleaf)、前后端分离版本(Spring Boot+Vue 3+Element-Plus+Vue-Router 4+Pinia+Vant 4) 、秒杀版本、Go语言版本、微服务版本(Spring Cloud Alibaba+Nacos+Sentinel+Seata+Spring Cloud Gateway+OpenFeign+ELK)。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

Pros of newbee-mall

  • More comprehensive e-commerce features, including order management and payment integration
  • Better documentation and setup instructions for easier deployment
  • Active development with frequent updates and bug fixes

Cons of newbee-mall

  • Larger codebase, potentially more complex to understand and maintain
  • Requires more server resources due to its full-stack nature
  • Less focus on mobile-specific optimizations compared to m-mall

Code Comparison

m-mall (WeChat Mini Program):

Page({
  data: {
    goods: [],
    prompt: {
      hidden: !0,
      icon: '../../../assets/images/iconfont-empty.png',
    },
  },
  onLoad() {
    this.getList()
  },
})

newbee-mall (Spring Boot):

@RestController
@Api(value = "v1", tags = "商品分类页面接口")
@RequestMapping("/api/v1")
public class NewBeeMallGoodsCategoryAPI {
    @Resource
    private NewBeeMallCategoryService newBeeMallCategoryService;

    @GetMapping("/categories")
    @ApiOperation(value = "获取分类数据", notes = "分类页面使用")
    public Result<List<NewBeeMallIndexCategoryVO>> getCategories() {
        List<NewBeeMallIndexCategoryVO> categories = newBeeMallCategoryService.getCategoriesForIndex();
        return ResultGenerator.genSuccessResult(categories);
    }
}
80,076

mall项目是一套电商系统,包括前台商城系统及后台管理系统,基于Spring Boot+MyBatis实现,采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。

Pros of mall

  • More comprehensive e-commerce solution with backend and frontend components
  • Actively maintained with frequent updates and a larger community
  • Extensive documentation and deployment guides

Cons of mall

  • More complex architecture, potentially steeper learning curve
  • Heavier resource requirements due to its full-stack nature

Code Comparison

mall (Java):

@ApiOperation("Add product to cart")
@RequestMapping(value = "/add", method = RequestMethod.POST)
@ResponseBody
public CommonResult add(@RequestBody OmsCartItem cartItem) {
    int count = cartItemService.add(cartItem);
    if (count > 0) {
        return CommonResult.success(count);
    }
    return CommonResult.failed();
}

m-mall (JavaScript):

addCart(params) {
    return this.post('/cart/add', params)
}

delCart(id) {
    return this.delete('/cart/delete', {
        id: id
    })
}

Key Differences

  • mall is a full-stack Java-based e-commerce platform, while m-mall focuses on the frontend using WeChat Mini Program
  • mall offers more features and scalability for larger projects
  • m-mall is simpler and easier to get started with for small-scale applications
  • mall has a more active community and regular updates
  • m-mall's codebase is more concise and focused on frontend interactions

ruoyi-vue-pro 全新 Cloud 版本,优化重构所有功能。基于 Spring Cloud Alibaba + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城、CRM、ERP、AI 大模型等功能。你的 ⭐️ Star ⭐️,是作者生发的动力!

Pros of yudao-cloud

  • More comprehensive and feature-rich enterprise-level application
  • Actively maintained with frequent updates and contributions
  • Extensive documentation and community support

Cons of yudao-cloud

  • Higher complexity and steeper learning curve
  • Requires more resources to run and deploy

Code Comparison

m-mall (JavaScript):

Page({
  data: {
    items: [],
    hasMore: !1,
    showLoading: !1,
    start: 0,
    limit: 10,
  },
  onLoad() {
    this.getItems()
  },
})

yudao-cloud (Java):

@RestController
@RequestMapping("/system/tenant")
@Validated
@Tag(name = "管理后台 - 租户")
public class TenantController {

    @PostMapping("/create")
    @Operation(summary = "创建租户")
    @PreAuthorize("@ss.hasPermission('system:tenant:create')")
    public CommonResult<Long> createTenant(@Valid @RequestBody TenantCreateReqVO createReqVO) {
        return success(tenantService.createTenant(createReqVO));
    }
}

The code comparison shows that m-mall is a simpler, frontend-focused project using JavaScript, while yudao-cloud is a more complex, backend-oriented Java application with advanced features like tenant management and role-based access control.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

微信小程序-移动端小商城

项目说明:

  • 基于微信小程序开发的一款移动端小商城
  • 基于 weui.wxss、es6 前端技术开发
  • 基于 wx-extend 第三方扩展插件(发送请求、Promise API、表单验证)
  • 前台 m-mall
  • 后台 m-mall-admin

目录结构:

m-mall/
  |-assets/                     # 静态文件
     |- images/                 # 图片
     |- plugins/                # 插件
     |- styles/                 # 样式
     |- ...
  |-etc/                        # 配置文件
     |- config.js
     |- ...
  |-helpers/                    # 帮助文件
     |- HttpResource.js
     |- HttpService.js
     |- ...
  |-pages/                      # 小程序页面相关文件
      |- start
        |- index.js
        |- index.json
        |- index.wxml
        |- index.wxss
      |- ...
  |-app.js                      # 小程序逻辑
  |-app.json                    # 小程序公共设置
  |-app.wxss                    # 小程序公共样式表
  |-...

项目截图:

贡献

有任何意见或建议都欢迎提 issue

License

MIT