网页链接制作:基于微信小程序

基于微信小程序-云开发的校园服务平台提供闲置二手交易商城和失物招领功能(毕业设计优秀论文)
基于微信小程序-云开发的校园服务平台提供闲置二手交易商城和失物招领功能(毕业设计优秀论文) 分类:商业源码 作者:云诺 阅读(3342)


版权声明:本文为博主原创文章,如果转载请给出原文链接:http://doofuu.com/article/4156164.html

 该校园服务平台微信小程序是基于小程序云开发API接口开发完成的。具备完整的二手交易、失物招领、闲置二手交易功能。代码清晰简单易学。具有良好的扩展性和二次开发能力。适合个人技术学习、毕业设计项目和毕设系统二次开发。

下面是其他小程序源码系统:


1.总体功

(1)用户信息模块  用户注册登录、个人信息维护

(2)二手交易模块  闲置信息发布、二手物品查询、闲置信息展示、物品分享

(3)失物招领模块 失物招领信息发布、展示

(4)个人信息模块 微信登录、我发布商品列表、我的失物招领列表、喜欢的商品收藏功能

2. 技术选型与架构

 前端采用的微信小程序,后端采用小程序云开发API(无需搭建服务器,即可使用云端能力)

 软件:微信开发者工具

 云开发提供了几大基础能力支持:

3.部分效果图(主页、二手物品发布、个人信息界面)


4.部分源码

主页逻辑(home.js)

const app = getApp()
Page({
 /**
 * 页面的初始数据
 */
 data: {
 imgUrls: [
  cloud://dev-513b66.6465-dev-513b66/Carousel/air.jpg ,
  cloud://dev-513b66.6465-dev-513b66/Carousel/damen.jpg ,
  cloud://dev-513b66.6465-dev-513b66/Carousel/timg.jpg ,
  cloud://dev-513b66.6465-dev-513b66/Carousel/yishu.jpg 
 ],
 hot_list: [],
 choose: 1,
 goods_list: [],
 lost_list: [],
 startNum: 0,
 lastData: false,
 lostStart: 0,
 lastLost: false,
 active: 0,
 classify_list: [{
 icon:  ../../images/icons/digit.png ,
 txt:  数码 
 }, {
 icon:  ../../images/icons/book.png ,
 txt:  书籍 
 }, {
 icon:  ../../images/icons/soccer.png ,
 txt:  运动 
 }, {
 icon:  ../../images/icons/shirt.png ,
 txt:  服饰 
 }],
 searchKey:  
 },
 saveSearchKey(e){
 this.setData({
 searchKey: e.detail.value
 });
 },
 changeChoice(event) {
 const tag = parseInt(event.currentTarget.dataset.tag, 10);
 this.setData({
 choose: tag
 });
 },
 initList(startNum){
 const that = this;
 wx.showLoading({
 title:  加载中 
 })
 wx.cloud.callFunction({
 name:  getGoods_list ,
 data: {
 startNum
 },
 success: res =  {
 console.log(res);
 wx.stopPullDownRefresh(); // 停止下拉刷新
 wx.hideLoading();
 const { isLast } = res.result;
 let reverseList = res.result.list.data.reverse();
 if(startNum){
 //startNum不为0时,拼接到goods_list的后面
 reverseList = that.data.goods_list.concat(reverseList);
 }
 that.setData({
 goods_list: reverseList,
 lastData: isLast
 });
 },
 fail: err =  {
 wx.hideLoading();
 console.log(err);
 }
 })
 },
 initLostList(startNum){
 const that = this;
 wx.showLoading({
 title:  加载中 
 })
 wx.cloud.callFunction({
 name:  getLost_list ,
 data: {
 startNum
 },
 success: res =  {
 console.log(res);
 wx.stopPullDownRefresh(); // 停止下拉刷新
 wx.hideLoading();
 const { isLast } = res.result;
 let reverseList = res.result.list.data.reverse();
 if(startNum){
 //startNum不为0时,拼接到goods_list的后面
 reverseList = that.data.lost_list.concat(reverseList);
 }
 that.setData({
 lost_list: reverseList,
 lastLost: isLast
 });
 },
 fail: err =  {
 wx.hideLoading();
 console.log(err);
 }
 })
 },
 /**
 * 生命周期函数--监听页面显示
 */
 onShow() {
 this.initList(0);
 this.initLostList(0);
 },
 /**
 *上拉加载
 */
 onReachBottom(){
 console.log( 上拉加载 )
 const { startNum, lastData, lostStart, lastLost, choose } = this.data;
 if(choose == 1   !lastData){
 this.initList(startNum + 1);
 }else if(choose == 0   !lastLost){
 this.initLostList(lostStart + 1)
 }
 },
 /**
 *下拉刷新
 */
 onPullDownRefresh(){
 const { choose } = this.data;
 if(choose == 1){
 this.initList(0);
 }else{
 this.initLostList(0);
 }
 
 },
 tapToDetail(e){
 const { id } = e.currentTarget.dataset;
 wx.navigateTo({
 url: `../goodsDetail/goodsDetail?id=${id} status=1`
 });
 },
 tapToLostDetail(e){
 const { id } = e.currentTarget.dataset;
 wx.navigateTo({
 url: `../lostDetail/lostDetail?id=${id}`
 });
 },
 toClassifyList(e){
 const { classify } = e.currentTarget.dataset;
 wx.navigateTo({
 url: `../classifyList/classifyList?from=classify txt=${classify}`
 })
 },
 toSearchList(){
 let { searchKey } = this.data;
 this.setData({
 searchKey:  
 })
 searchKey = searchKey.replace(/\s*/g,  
 if(searchKey){
 wx.navigateTo({
 url: `../classifyList/classifyList?from=search txt=${searchKey}`
 })
 }
 },
 tapToUserInfo(e){
 const { userid } = e.currentTarget.dataset;
 wx.navigateTo({
 url: `../userCenter/userCenter?userId=${userid}`
 })
 }
})

组件布局(home.wxml)

 view 
  view  >

样式(home.wxss)

.main-msg, .hot{ 
 background-color: white; 
 margin-top: 20rpx; 
} 
.search{ 
 margin: 10rpx; 
 height: 60rpx; 
 display: flex; 
 flex-direction: row; 
} 
.search-btn{ 
 font-size: 24rpx; 
 color: white; 
 background-color: #0fb7e0; 
 border: none; 
} 
.ipt-box{ 
 width: 80%; 
 background-color: white; 
 border-radius: 10rpx; 
 padding-left: 20rpx; 
 height: 100%; 
} 
.search-ipt{ 
 height: 100%; 
 font-size: 24rpx; 
 display: inline-block; 
 width:90%; 
 margin-left:20rpx; 
} 
.icon-icon_search{ 
 position: relative; 
 bottom: 20rpx; 
} 
.v-line{ 
 display: inline-block; 
 height: 40rpx; 
 width: 6rpx; 
 margin-right: 20rpx; 
 background-color: #249ed9; 
} 
.hot{ 
 height: 240rpx; 
 padding: 20rpx; 
} 
.h-tag{ 
 border-bottom: 1rpx solid gray; 
 height: 60rpx; 
 display: flex; 
 flex-direction: row; 
} 
.tit{ 
 font-size: 32rpx; 
 color: gray; 
} 
.tit-b{ 
 font-size: 32rpx; 
 color: #249ed9; 
} 
.tab{ 
 display: flex; 
 height: 80rpx; 
 flex-direction: row; 
 align-items: center; 
 border-bottom: 1rpx solid gray; 
} 
.tab-item{ 
 width: 50%; 
 height: 100%; 
 text-align: center; 
 line-height: 80rpx; 
} 
.item-border{ 
 border-bottom: 1px solid #249ed9; 
} 
.van-tag{ 
 float:right; 
 position:relative; 
 right:100rpx; 
} 
.classify-item image{ 
 width: 60rpx; 
 height: 60rpx; 
 position: absolute; 
 left: 50%; 
 top: 50%; 
 transform: translate(-50%, -50%); 
} 
.img_box{ 
 position: relative; 
 background-color: #5386a6; 
 width: 100rpx; 
 height: 100rpx; 
 border-radius: 50%; 
 margin-bottom: 10rpx; 
} 
.classify{ 
 display: flex; 
 flex-direction: row; 
 justify-content: space-around; 
 margin-top: 40rpx; 
} 
.classify .txt{ 
 font-size: 24rpx; 
 color: gray; 
} 
.classify-item{ 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
}
承接毕业设计,专业团队,价格低!! 微信:LGY178888(添加请说明来意)

 

祝生活愉快!

「创作不易,你的支持是本站持续更新最大的动力!」


共有 0 条评论 - 基于微信小程序-云开发的校园服务平台提供闲置二手交易商城和失物招领功能(毕业设计优秀论文)
云诺说是一个致力于分享互联网编程技术交流、小程序开发、小程序源码分享、网络推广引流服务、推荐优质的引流渠道、广告开户、竞价推广等行业的IT技术网站,希望你能在本站得到你所需要的信息。

Q Q :2730094141

微信 :LGY17666

职业 :小程序开发、网络推广

现居 :广东省-广州市-天河区

网页链接制作

网页链接制作

网页链接制作:基于微信小程序 基于微信小程序-云开发的校园服务平台提供闲置二手交易商城和失物招领功能(毕业设计优秀论文) 基于微信小程序-云开发的校园服务平台提供闲置二


预约挂号



扫描二维码分享到微信