Convert Figma logo to code with AI

tumobi logonideshop-mini-program

NideShop:基于Node.js+MySQL开发的开源微信小程序商城(微信小程序)

8,112
2,330
8,112
3

Top Related Projects

19,639

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

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

🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目,新蜂商城 Vue3.2 版本,技术栈为 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。

1,552

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

Quick Overview

NideShop Mini Program is an open-source WeChat mini program for e-commerce. It provides a complete shopping experience, including product browsing, cart management, and order processing. The project is built using the WeChat Mini Program framework and serves as a template for developers to create their own e-commerce applications.

Pros

  • Comprehensive e-commerce functionality out of the box
  • Well-structured codebase for easy customization and extension
  • Integrates with WeChat's ecosystem for seamless user experience
  • Active community and regular updates

Cons

  • Limited to WeChat platform, not suitable for cross-platform development
  • Requires knowledge of WeChat Mini Program development
  • May need additional backend development for full functionality
  • Documentation is primarily in Chinese, which may be challenging for non-Chinese speakers

Code Examples

  1. Fetching product details:
wx.request({
  url: api.GoodsDetail,
  data: { id: that.data.id },
  success: function(res) {
    if (res.errno === 0) {
      that.setData({
        goods: res.data.info,
        gallery: res.data.gallery,
        attribute: res.data.attribute,
        issueList: res.data.issue,
        comment: res.data.comment,
        brand: res.data.brand,
        specificationList: res.data.specificationList,
        productList: res.data.productList,
        userHasCollect: res.data.userHasCollect
      });
    }
  }
});
  1. Adding a product to the cart:
addToCart: function() {
  var that = this;
  if (this.data.openAttr == false) {
    //打开规格选择窗口
    this.setData({
      openAttr: !this.data.openAttr
    });
  } else {
    //提示选择完整规格
    if (!this.isCheckedAllSpec()) {
      wx.showToast({
        image: '/static/images/icon_error.png',
        title: '请选择规格',
        mask: true
      });
      return false;
    }
    //添加到购物车
    wx.request({
      url: api.CartAdd,
      data: {
        goodsId: this.data.goods.id,
        number: this.data.number,
        productId: this.getCheckedProductId()
      },
      success: function(res) {
        if (res.errno == 0) {
          wx.showToast({
            title: '添加成功'
          });
        } else {
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: res.errmsg,
            mask: true
          });
        }
      }
    });
  }
}
  1. Submitting an order:
submitOrder: function() {
  if (this.data.addressId <= 0) {
    util.showErrorToast('请选择收货地址');
    return false;
  }
  util.request(api.OrderSubmit, {
    addressId: this.data.addressId,
    couponId: this.data.couponId
  }, 'POST').then(res => {
    if (res.errno === 0) {
      const orderId = res.data.orderInfo.id;
      pay.payOrder(parseInt(orderId)).then(res => {
        wx.redirectTo({
          url: '/pages/payResult/payResult?status=1&orderId=' + orderId
        });
      }).catch(res => {
        wx.redirectTo({
          url: '/pages/payResult/payResult?status=0&orderId=' + orderId
        });
      });
    } else {
      util.showErrorToast('下单失败');
    }
  });
}

Getting Started

  1. Clone the repository:
    git clone https://github.com/tumobi/nideshop-mini-program.git
    

Competitor Comparisons

19,639

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

Pros of litemall

  • More comprehensive e-commerce solution with both frontend and backend components
  • Supports multiple platforms including WeChat Mini Program, Web, and Android
  • Actively maintained with regular updates and improvements

Cons of litemall

  • More complex architecture, potentially steeper learning curve
  • Larger codebase may require more resources to deploy and maintain
  • Less focused on WeChat Mini Program specifically compared to nideshop-mini-program

Code Comparison

nideshop-mini-program (app.js):

App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo: function (cb) {
    // ...
  }
})

litemall (litemall-wx/app.js):

App({
  onLaunch: function () {
    const updateManager = wx.getUpdateManager();
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        // ...
      }
    });
  },
  globalData: {
    userInfo: null
  }
})

The code comparison shows that litemall has a more feature-rich app initialization, including update management and system information retrieval, while nideshop-mini-program focuses on basic storage operations and user information handling.

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

Pros of wechat-app-mall

  • More comprehensive features, including user management and order processing
  • Better documentation and setup instructions
  • More active community and frequent updates

Cons of wechat-app-mall

  • Steeper learning curve due to more complex codebase
  • Potentially overkill for simpler e-commerce applications
  • Heavier reliance on external dependencies

Code Comparison

nideshop-mini-program:

// app.js
App({
  onLaunch: function () {
    // Simple initialization
  },
  globalData: {
    userInfo: null
  }
})

wechat-app-mall:

// app.js
App({
  onLaunch: function () {
    const that = this;
    // More complex initialization with user authentication
    wx.login({
      success: function (res) {
        // Handle login and user session
      }
    })
  },
  globalData: {
    userInfo: null,
    token: null,
    // Additional global data
  }
})

The code comparison shows that wechat-app-mall has a more complex initialization process, including user authentication, while nideshop-mini-program keeps it simpler. This reflects the overall difference in complexity and feature set between the two projects.

🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目,新蜂商城 Vue3.2 版本,技术栈为 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。

Pros of newbee-mall-vue3-app

  • Built with Vue 3, offering improved performance and Composition API
  • More comprehensive e-commerce features, including user management and order processing
  • Active development with frequent updates and bug fixes

Cons of newbee-mall-vue3-app

  • Steeper learning curve due to more complex architecture
  • Requires more setup and configuration compared to nideshop-mini-program
  • May be overkill for simple e-commerce applications

Code Comparison

nideshop-mini-program (WeChat Mini Program):

Page({
  data: {
    goodsList: [],
    page: 1,
    size: 10
  },
  onLoad: function () {
    this.getGoodsList();
  }
})

newbee-mall-vue3-app (Vue 3):

<script setup>
import { ref, onMounted } from 'vue'
import { getGoodsList } from '@/api/goods'

const goodsList = ref([])
const page = ref(1)
const size = ref(10)

onMounted(() => {
  fetchGoodsList()
})
</script>

The newbee-mall-vue3-app uses Vue 3's Composition API, providing better organization and reusability of logic. The nideshop-mini-program uses the WeChat Mini Program framework, which is more specific to the WeChat ecosystem but potentially easier to get started with for simple applications.

1,552

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

Pros of m-mall

  • More comprehensive UI components and layouts
  • Better organized project structure with clearer separation of concerns
  • Includes additional features like user authentication and order management

Cons of m-mall

  • Less frequent updates and maintenance compared to nideshop-mini-program
  • Potentially steeper learning curve due to more complex architecture
  • Fewer stars and forks on GitHub, indicating a smaller community

Code Comparison

nideshop-mini-program:

// app.js
App({
  onLaunch: function () {
    // Program initialization
  },
  globalData: {
    userInfo: null
  }
})

m-mall:

// app.js
App({
  onLaunch() {
    this.setSystemInfo()
    this.login()
    this.getUserInfo()
  },
  onShow() {
    // ...
  }
})

The m-mall project demonstrates a more feature-rich initialization process, including user authentication and system information retrieval. nideshop-mini-program has a simpler structure, which may be easier for beginners to understand but offers fewer out-of-the-box features.

Both projects aim to provide a foundation for building e-commerce mini-programs on WeChat, but m-mall offers a more comprehensive solution with additional features and a more structured approach. However, nideshop-mini-program may be more suitable for simpler projects or for developers who prefer a more lightweight starting point.

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

NideShop商城(微信小程序端)

  • 界面高仿网易严选商城(主要是2016å¹´wap版)
  • 测试数据采集自网易严选商城
  • 功能和数据库参考ecshop
  • 服务端api基于Node.js+ThinkJS+MySQL
  • 计划添加基于Vue.js的后台管理系统、PC版、Wap版

注意:当前版本功能还未完善,请勿商用。

本项目需要配合NideShop商城服务端使用,GitHub: https://github.com/tumobi/nideshop

云服务器ECS-云主机优惠-2折上云

项目截图

首页

专题

分类

商品列表

商品详情

购物车

订单中心

功能列表

  • 首页
  • 分类首页、分类商品、新品首发、人气推荐商品页面
  • 商品详情页面,包含加入购物车、收藏商品、商品评论功能
  • 搜索功能
  • 专题功能
  • 品牌功能
  • 完整的购物流程,商品的加入、编辑、删除、批量选择,收货地址的选择,下单支付
  • 会员中心(订单、收藏、足迹、收货地址、意见反馈) ....

项目结构

├─config                
├─lib
│  └─wxParse   
├─pages
│  ├─auth
│  │  ├─login
│  │  ├─register
│  │  └─reset
│  ├─brand
│  ├─brandDetail
│  ├─cart
│  ├─catalog
│  ├─category
│  ├─comment
│  ├─goods
│  ├─hotGoods
│  ├─index
│  ├─logs
│  ├─newGoods
│  ├─pay
│  ├─search
│  ├─shopping
│  │  ├─address
│  │  ├─addressAdd
│  │  └─checkout
│  ├─topic
│  ├─topicDetail
│  └─ucenter
│      ├─address
│      ├─addressAdd
│      ├─collect
│      ├─coupon
│      ├─feedback
│      ├─footprint
│      ├─index
│      ├─order
│      └─orderDetail
├─static
│  └─images
└─utils

服务端api

项目地址:https://github.com/tumobi/nideshop

交流

喜欢别忘了 Star,有问题可通过微信、公众号、QQ 群联系我,谢谢您的关注。

联系方式