Top Related Projects
又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端
微信小程序商城,微信小程序微店
🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目,新蜂商城 Vue3.2 版本,技术栈为 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。
: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
- 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
});
}
}
});
- 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
});
}
}
});
}
}
- 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
- Clone the repository:
git clone https://github.com/tumobi/nideshop-mini-program.git
Competitor Comparisons
又一个小商城。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.
: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
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
NideShopååï¼å¾®ä¿¡å°ç¨åºç«¯ï¼
- çé¢é«ä»¿ç½æä¸¥éåå(ä¸»è¦æ¯2016å¹´wapç)
- æµè¯æ°æ®ééèªç½æä¸¥éåå
- åè½åæ°æ®åºåèecshop
- æå¡ç«¯apiåºäºï¼®ode.js+ThinkJS+MySQL
- è®¡åæ·»å åºäºVue.jsçåå°ç®¡çç³»ç»ãPCçãï¼·apç
注æï¼å½åçæ¬åè½è¿æªå®åï¼è¯·å¿åç¨ã
æ¬é¡¹ç®éè¦é å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 群èç³»æï¼è°¢è°¢æ¨çå ³æ³¨ã
Top Related Projects
又一个小商城。litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端
微信小程序商城,微信小程序微店
🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目,新蜂商城 Vue3.2 版本,技术栈为 Vue3.2 + Vue-Router4.x + Pinia + Vant4.x。
:dog: 微信小程序-小商城前台(基于 WeUI.wxss、ES6 前端技术开发...)
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot