毕业设计，微信小程序-购物小程序

适合毕业设计，小白学习练手，购物小程序，一步一步教你搭建完整的代码。效果图如下（附赠代码）：

代码如下：

1.app.json文件

{"pages": [    "pages/start/start","pages/shop/select","pages/index/index","pages/notice/index","pages/notice/show","pages/category/category","pages/goods/list","pages/goods/list-vop","pages/goods/fav","pages/goods-details/index","pages/goods-details/vop","pages/shop-cart/index","pages/to-pay-order/index","pages/select-address/index","pages/address-add/index","pages/order-list/index","pages/order-details/index","pages/order-details/scan-result","pages/order/refundApply","pages/wuliu/index","pages/my/index","pages/withdraw/index","pages/score-excharge/index","pages/score-excharge/growth","pages/asset/index","pages/recharge/index","pages/score/index","pages/score/growth","pages/sign/index","pages/maidan/index","pages/coupons/index","pages/coupons/merge","pages/invoice/list","pages/invoice/apply","pages/deposit/pay","pages/live/index","pages/help/detail","pages/help/index","pages/cms/list","pages/about/index","pages/idCheck/index","pages/peisong/detail","pages/peisong/orders","pages/pwd-pay/reset","pages/pwd-pay/modify","pages/pwd-pay/set","pages/my/feedback","pages/search/index","pages/my/info","pages/my/setting","pages/my/info-menu","pages/recycle/index","pages/recycle/orders","pages/recycle/order-detail","pages/card/logs","pages/notagree/index"],"subpackages": [{"root": "packageStreamMedia","name": "packageStreamMedia","pages": ["pages/videoCall/videoCall","pages/live-anchor/index","pages/live-anchor/list","pages/live-client/list","pages/live-client/client"]},{"root": "packageCps","name": "packageCps","pages": ["pages/goods-details/cps-jd","pages/goods-details/cps-pdd","pages/goods-details/cps-taobao","pages/order-list/cps"]},{"root": "packageFx","name": "packageFx","pages": ["pages/index/index","pages/apply/index","pages/apply/form","pages/myusers/index","pages/commisionLog/index","pages/report/team","pages/report/city","pages/myusers/myusers-detail"]}],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "","navigationBarTextStyle": "black","onReachBottomDistance": 50},"tabBar": {"color": "#6e6d6b","selectedColor": "#e64340","borderStyle": "white","backgroundColor": "#fff","list": [{"pagePath": "pages/index/index","iconPath": "images/nav/home-off.png","selectedIconPath": "images/nav/home-on.png","text": "首页"},{"pagePath": "pages/category/category","iconPath": "images/nav/fl-off.png","selectedIconPath": "images/nav/fl-on.png","text": "分类"},{"pagePath": "pages/coupons/index","iconPath": "images/nav/coupon-off.png","selectedIconPath": "images/nav/coupon-on.png","text": "优惠券"},{"pagePath": "pages/shop-cart/index","iconPath": "images/nav/cart-off.png","selectedIconPath": "images/nav/cart-on.png","text": "购物车"},{"pagePath": "pages/my/index","iconPath": "images/nav/my-off.png","selectedIconPath": "images/nav/my-on.png","text": "我的"}]},"permission": {"scope.userLocation": {"desc": "获取离你最近的门店"}},"usingComponents": {"fuwuxieyi": "/components/fuwuxieyi/index","parser":"/components/parser.20200414.min/parser","van-notice-bar": "@vant/weapp/notice-bar/index","van-search": "@vant/weapp/search/index","van-divider": "@vant/weapp/divider/index","van-icon": "@vant/weapp/icon/index","van-count-down": "@vant/weapp/count-down/index","van-button": "@vant/weapp/button/index","van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index","van-tag": "@vant/weapp/tag/index","van-card": "@vant/weapp/card/index","van-progress": "@vant/weapp/progress/index","van-submit-bar": "@vant/weapp/submit-bar/index","van-field": "@vant/weapp/field/index","van-radio": "@vant/weapp/radio/index","van-radio-group": "@vant/weapp/radio-group/index","van-sidebar": "@vant/weapp/sidebar/index","van-sidebar-item": "@vant/weapp/sidebar-item/index","van-empty": "@vant/weapp/empty/index","van-goods-action": "@vant/weapp/goods-action/index","van-goods-action-icon": "@vant/weapp/goods-action-icon/index","van-goods-action-button": "@vant/weapp/goods-action-button/index","van-popup": "@vant/weapp/popup/index","van-picker": "@vant/weapp/picker/index","van-stepper": "@vant/weapp/stepper/index","van-sticky": "@vant/weapp/sticky/index","van-dialog": "@vant/weapp/dialog/index","van-swipe-cell": "@vant/weapp/swipe-cell/index","van-calendar": "@vant/weapp/calendar/index","van-switch": "@vant/weapp/switch/index","van-rate": "@vant/weapp/rate/index","van-uploader": "@vant/weapp/uploader/index","van-grid": "@vant/weapp/grid/index","van-grid-item": "@vant/weapp/grid-item/index","van-image": "@vant/weapp/image/index","van-tab": "@vant/weapp/tab/index","van-tabs": "@vant/weapp/tabs/index","van-overlay": "@vant/weapp/overlay/index","van-datetime-picker": "@vant/weapp/datetime-picker/index","van-area": "@vant/weapp/area/index"},"sitemapLocation": "sitemap.json"
}

2.app.js文件

const WXAPI = require('apifm-wxapi')
const CONFIG = require('config.js')
const AUTH = require('utils/auth')
App({onLaunch: function() {const subDomain = wx.getExtConfigSync().subDomainif (subDomain) {WXAPI.init(subDomain)} else {WXAPI.init(CONFIG.subDomain)WXAPI.setMerchantId(CONFIG.merchantId)}const that = this;// 检测新版本const updateManager = wx.getUpdateManager()updateManager.onUpdateReady(function () {wx.showModal({title: '更新提示',content: '新版本已经准备好，是否重启应用？',success(res) {if (res.confirm) {// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启updateManager.applyUpdate()}}})})/*** 初次加载判断网络情况* 无网络状态下根据实际情况进行调整*/wx.getNetworkType({success(res) {const networkType = res.networkTypeif (networkType === 'none') {that.globalData.isConnected = falsewx.showToast({title: '当前无网络',icon: 'loading',duration: 2000})}}});/*** 监听网络状态变化* 可根据业务需求进行调整*/wx.onNetworkStatusChange(function(res) {if (!res.isConnected) {that.globalData.isConnected = falsewx.showToast({title: '网络已断开',icon: 'loading',duration: 2000})} else {that.globalData.isConnected = truewx.hideToast()}})WXAPI.queryConfigBatch('mallName,WITHDRAW_MIN,ALLOW_SELF_COLLECTION,order_hx_uids,subscribe_ids,share_profile,adminUserIds,goodsDetailSkuShowType,shopMod,needIdCheck,balance_pay_pwd,shipping_address_gps,shipping_address_region_level,shopping_cart_vop_open,cps_open,recycle_open,categoryMod,hide_reputation,show_seller_number,show_goods_echarts,show_buy_dynamic,goods_search_show_type,show_3_seller,show_quan_exchange_score,show_score_exchange_growth,show_score_sign,fx_subscribe_ids,share_pic,orderPeriod_open,order_pay_user_balance,wxpay_api_url').then(res => {if (res.code == 0) {res.data.forEach(config => {wx.setStorageSync(config.key, config.value);})if (this.configLoadOK) {this.configLoadOK()}// wx.setStorageSync('shopMod', '1') // 测试用，不要取消注释}})// ---------------检测navbar高度let menuButtonObject = wx.getMenuButtonBoundingClientRect();console.log("小程序胶囊信息",menuButtonObject)wx.getSystemInfo({success: res => {let statusBarHeight = res.statusBarHeight,navTop = menuButtonObject.top,//胶囊按钮与顶部的距离navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度this.globalData.navHeight = navHeight;this.globalData.navTop = navTop;this.globalData.windowHeight = res.windowHeight;this.globalData.menuButtonObject = menuButtonObject;console.log("navHeight",navHeight);},fail(err) {console.log(err);}})},onShow (e) {// 保存邀请人if (e && e.query && e.query.inviter_id) {wx.setStorageSync('referrer', e.query.inviter_id)if (e.shareTicket) {wx.getShareInfo({shareTicket: e.shareTicket,success: res => {wx.login({success(loginRes) {if (loginRes.code) {WXAPI.shareGroupGetScore(loginRes.code,e.query.inviter_id,res.encryptedData,res.iv).then(_res => {console.log(_res)}).catch(err => {console.error(err)})} else {console.error('登录失败！' + loginRes.errMsg)}}})}})}}// 自动登录AUTH.checkHasLogined().then(isLogined => {if (!isLogined) {AUTH.authorize().then( aaa => {AUTH.bindSeller()})} else {AUTH.bindSeller()}})},globalData: {isConnected: true,sdkAppID: CONFIG.sdkAppID}
})

3.app.wxss文件

@import "/miniprogram_npm/@vant/weapp/common/index.wxss";.container {display: flex;flex-direction: column;align-items: center;justify-content: space-between;box-sizing: border-box;
}
.space {height:20rpx;background-color: #F2f2f2;
}
.safeAreaOldPaddingBttom {padding-bottom: env(safe-area-inset-bottom);
}
.safeAreaNewPaddingBttom{padding-bottom: constant(safe-area-inset-bottom);
}.safeAreaOldMarginBttom {margin-bottom: env(safe-area-inset-bottom);
}
.safeAreaNewMarginBttom{margin-bottom: constant(safe-area-inset-bottom);
}.no-data {width: 100%;display: flex;justify-content: center;align-items: center;
}
.no-data .line {width:132rpx;height:2rpx;background: #999;
}
.no-data .txt {font-size:26rpx;color:rgba(153,153,153,1);margin: 0 16rpx;
}
.ad-img {width: 100vw;
}
.badge {position: absolute;top: 0;right: 0;box-sizing: border-box;padding: 6rpx;color: #fff;font-size: 18rpx;display: flex;justify-content: center;align-items: center;background-color: #e64340;border: 1rpx solid #fff;border-radius: 50%;
}
.vw100 {width: 100vw !important;
}page {font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',sans-serif;
}
.block-btn {padding: 0 32rpx;
}.safe-bottom-box {position: fixed;bottom: calc(env(safe-area-inset-bottom) / 2);left: 0;width: 100vw;
}
.characteristic {padding: 0 24rpx;font-size: 24rpx;color: #999;
}

由于代码有点多，所以只能分享部分代码，如果想获取更多代码可以关注微信公众号（或者扫一扫二维码）：开发者小埋

毕业设计，微信小程序-购物小程序相关推荐

【附源码】Java计算机毕业设计微信点餐系统（程序+LW+部署）
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
毕业设计 -- 微信小程序选题大全（一）
文章目录小程序毕设选题推荐选题建议创新性不要给自己挖坑选题推荐最后小程序毕设选题推荐 Hi,这里是丹成学长,这篇文章给各位同学分享小程序毕设如何选题,对毕设开发,开题等有不清楚的都可以 ...
微信小程序购物商城系统开发系列-工具篇
微信小程序购物商城系统开发系列-工具篇微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操 ...
PHP内核微信拼团购物商城小程序源码
简介: ThinkPHP内核微信拼团购物商城小程序源码支持微信网盘下载地址: http://kekewl.cc/RanXsKnF0WN0 图片:
毕业设计微信小程序选题
前言你们要的最新毕业设计微信小程序题目大全来了,都有源码+数据库+文档微信小程序大全是近期作品你的选题刚好在下面有.毕设帮助.开题指导.技术解答,联系方式见文末. 一.为什么选择小程序题目? ...
校园超市购物小程序计算机毕业设计
一.技术介绍 1.小程序用户端:微信开发者语言js+json+wxml+wxss 2.管理员后端:前端html+css+js+后端php开发语言/3.数据库:mysql 二.功能架构图超市购物小程序 ...
小程序毕设作品之微信校园浴室预约小程序毕业设计成品（6）开题答辩PPT
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
微信小程序购物商城定制开发
微信小程序购物商城系统(陈琦:138-2848-7919可微)微信小程序购物商城开发,微信小程序购物商城定制,微信小程序购物商城模式,微信小程序购物商城APP,微信小程序购物商城平台. 定制开发微信小 ...
小程序毕设作品之微信校园浴室预约小程序毕业设计成品（3）后台功能
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
计算机毕业设计Python+uniapp音乐播放微信小程序LW(小程序+源码+LW)
计算机毕业设计Python+uniapp音乐播放微信小程序LW(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ py ...

毕业设计，微信小程序-购物小程序

毕业设计，微信小程序-购物小程序相关推荐

最新文章

热门文章