微信小程序应用开发 课件 第10章 综合案例：校园二手货交易

第10章综合案例：校园二手货交易电子工业出版社在节约型社会，“人尽其才，物尽其用，绿色环保”是一种美德。开发“校园二手货交易”微信小程序系统的目的在于“物尽其用”：将使用过的、但是未来可能不太再会使用的物件进行交易，使那些有同样使用要求的人可以再次使用。本章通过开发这个项目对所学的微信小程序开发知识进行综合使用。目录10.1需求清单10.2界面设计10.3云数据库设计10.4案例实施10.5运行效果10.6练习：完善二手货交易小程序10.1需求清单校园二手货交易系统是这样的一套微信小程序系统，通过这套系统，用户可以完成有关二手货交易的相关功能，包括：（1）发布二手货售卖信息通过这项功能，二手货卖家可以发布二手货售卖信息。售卖信息包括：二手货名称、品牌、价格、新旧程序、二手货描述、二手货照片。（2）搜索二手货信息通过这项功能，用户可以搜索二手货信息，进而根据搜索结果进行交易。（3）联系二手货卖家通过这项功能，用户可以给二手货卖家发送购买意向信息。（4）修改发布的二手货状态信息通过这项功能，当二手货售卖信息的发布者所发布的二手货已经成交，或者二手货发布者不想出售这个二手货，则可以修改二手货的状态为“交易完成”或者“暂停交易”状态。10.2界面设计界面设计及用户操作的便利性直接关系到小程序的可用性，因此，包括小程序在内的任何程序，界面设计都是程序设计非常重要的组成部分。10.2.1界面设计构思为了程序的视觉效果，在开启该小程序时首先显示一个动画页面，在动画结束时进入程序主页面。程序主页面是一个多Tab页面，具有如下几个Tab：（1）搜索（2）发布（3）我的发布（4）我的购买10.2.2界面详细设计校园二手货交易程序包括如下页面：搜索及结果列表页面（图10-1）、二手货详细信息页面（图10-1）、二手货购买意向页面（图10-3）；发布页面（图10-4）；我的发布页面（图10-5）、查看购买意向页面（图10-6）、修改二手货状态信息页面（图10-7）；我的购买页面（图10-8）、查看购买详细信息页面（10-9）。10.3云数据库设计使用云开发作为服务端。在云数据库中需要设计一个集合保存所有的二手货信息及其交易信息。命名这个集合为things。这个集合包含如下字段（属性）：_id，String；_openid，String；pname，String；name，String；newold，Number；memo，String；wprice，Float；photo，Array.<String>；pdate，Number；；state，String；iwant，Array.<Object>；购买意向信息。每条信息包括如下字段：name，String，意向买家姓名；phone，String，意向买家联系电话；price，Float，意向价格；memo，String，意向消息；openid，String，意向买家的openid；date，Date，日期；saled，Boolean；sdate，Number；bname，String。10.4案例实施在微信小程序开噶工具中新建名称为mini-ch10-01的程序工程，在工程下新建assets文件夹用于程序中用到的图标和图片，新建coudfunctions文件夹用于存放云函数。完成后的小程序工程如图所示。10.4.1app.js在app.js文件中，首先初始化云开发，并通过调用云函数gopenid获取用户的openid和appid，并保存到全局属性global属性中。app.js的卖如下：//app.jsApp({onLaunch(){letthat=this;wx.cloud.init();wx.cloud.callFunction({name:'gopenid',success:res=>{that.global.appid=res.result.appid;that.global.openid=res.result.openid;},fail:res=>console.log(res)});},global:{}})10.4.2云函数gopenidgopenid云函数返回用户的openid和appid。该函数的js代码如下：//云函数入口文件constcloud=require('wx-server-sdk')cloud.init({env:cloud.DYNAMIC_CURRENT_ENV})//使用当前云环境//云函数入口函数exports.main=async(event,context)=>{constwxContext=cloud.getWXContext()return{openid:wxContext.OPENID,appid:wxContext.APPID,unionid:wxContext.UNIONID,}}10.4.3云函数iwantiwant云函数接受用户填写的购买意向信息，并将购买意向信息插入到对应的数据记录的iwant字段中。该函数的js代码如下：//云函数入口文件constcloud=require('wx-server-sdk');cloud.init({env:cloud.DYNAMIC_CURRENT_ENV});//使用当前云环境constdb=cloud.database();const_=mand;//云函数入口函数exports.main=async(event,context)=>{let_id=event._id;letwant={name:,phone:event.phone,price:event.wprice,date:event.date,memo:event.memo,openid:event._openid};console.log(want);try{returnawaitdb.collection('things').doc(_id).update({data:{iwant:_.push(want)},success:function(res){},fail:function(res){console.log(res.data)}})}catch(e){console.error(e)}}10.4.4云函数search当用户进入小程序时，将显示二手货列表页面，这些二手货列表信息是通过调用云函数search完成的。该函数的js代码如下：//云函数入口文件constcloud=require('wx-server-sdk');cloud.init({env:cloud.DYNAMIC_CURRENT_ENV});//使用当前云环境constdb=cloud.database();const_=mand;//云函数入口函数exports.main=async(event,context)=>{letkey=event.key;try{returnawaitdb.collection('things').get().then(res=>{//res.data是一个包含集合中有权限访问的所有记录的数据，不超过20条returnres.data;})}catch(e){console.error(e);}}10.4.5搜索页面搜索页面是程序首页面的“搜索”Tab页面，对应小程序工程的”pages/search”文件夹。该页面列出所有二手货信息。该页面的wxml代码search.wxml文件如下：<!s/search/search.wxml--><navigation-bartitle="搜索"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="search"><inputtype="text"placeholder="搜索"/><button>搜索</button></view><viewclass="list"><blockwx:for="{{things}}"><navigatorurl="/pages/detail/detail?which={{index}}"><viewclass="list_l"><imagesrc="{{item.photo[0]}}"mode="aspectFill"/><viewclass="list_r"><textclass="list_tilte">{{}}</text><textclass="list_time">{{item.pdate}}</text><textclass="list_degree">{{item.newold}}</text><textclass="list_prices">￥<textclass="list_price">{{item.wprice}}</text></text><textclass="list_depict">{{item.memo}}</text></view></view></navigator></block></view></scroll-view>该页面的js代码search.js文件如下：//pages/search/search.jsPage({data:{things:[]},onReady(){letthat=this;wx.cloud.callFunction({//云函数名称name:'search',data:{key:'100'},success(res){that.setData({things:res.result});letapp=getApp();app.global.data=res.result;},fail(res){console.log(res);}});}})10.4.6二手货详细信息页面在首页面“搜索”页面点击某个二手货时，将在这个页面显示二手货的详细信息。这个页面对应“pages/detail”文件夹。该页面的wxml代码detail.wxml文件如下：<!--detail.wxml--><navigation-bartitle="二手货详细信息"back="{{true}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="view"><viewclass="title">{{}}</view><viewclass="time">发布日期：{{thing.pdate}}</view><viewclass="name">发布人姓名：{{thing.pname}}</view><viewclass="degree">新旧程度：{{thing.newold}}，就用过两次</view><viewclass="depict">二手货描述：{{thing.memo}}</view><viewclass="price">期望价格：<text>￥{{thing.wprice}}</text></view><swiperindicator-dotsindicator-color="#fff"indicator-active-color="#5cade2"><blockwx:for="{{thing.photo}}"><swiper-item><imagesrc="{{item}}"mode="aspectFit"/></swiper-item></block></swiper><navigatorurl="/pages/iwant/iwant?id={{thing._id}}"><buttonstyle="width:100%;margin:0px;background-color:darksalmon;">我想购买</button></navigator></view></scroll-view>该页面的js代码detail.js文件如下：//detail.jsPage({data:{thing:{}},onLoad(options){letapp=getApp();letitem=app.global.data[options.which];console.log(item);this.setData({thing:item});},tapbuy(e){console.log(e.target.dataset.which);}})10.4.7二手货购买意向页面当用户在二手货详细点击“我要购买”按钮时，显示二手货购买意向页面。该页面对应“pages/iwant”文件夹。该页面的wxml代码iwant.wxml文件如下：<!--iwant.wxml--><navigation-bartitle="我想购买"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><view><formbindsubmit="go"><inputname="name"type="text"placeholder="请输入姓名或昵称"class="name"/><inputname="phone"type="text"placeholder="请输入联系电话或微信号"class="name"/><inputname="wprice"type="text"placeholder="请输入意向价格"class="name"/><inputname="date"type="text"placeholder="请输入希望交易日期"class="name"/><textareaname="memo"placeholder="请输入其他信息"/><buttonform-type="submit"style="width:95%;margin:5px;background-color:darksalmon;">确定</button><buttonclass="cancel"bind:tap="naviback"style="width:95%;margin:5px;background-color:darksalmon;">取消</button></form></view></scroll-view>该页面的js代码iwant.js文件如下：//iwant.jsPage({id:'',onLoad(options){letid=options.id;console.log("id:"+id);this.id=id;},naviback(){wx.navigateBack();},go(e){letthat=this;letv=e.detail.value;if((!)||(!v.phone)||(!v.wprice)||(!v.date)||(!v.memo)){wx.showToast({title:'信息缺失',icon:'error'});return;}console.log(v);wx.cloud.callFunction({name:'iwant',data:{name:,phone:v.phone,price:v.wprice,date:v.date,memo:v.memo,_openid:getApp().global.openid,//谁要买_id:that.id//买什么},success:res=>{wx.showToast({title:'提交成功',icon:'success'});},fail:res=>console.log(res)});}})10.4.8发布页面通过这个页面，用户可以发布二手货信息。该页面对应“pages/sale”文件夹，是首页中的“发布”Tab页面。该页面的wxml代码sale.wxml文件如下：<!--sale.wxml--><navigation-bartitle="发布货品"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><view><formbindsubmit="publish"><inputname="gname"type="text"placeholder="请输入二手货名称"class="name"/><inputname="pname"type="text"placeholder="请输入姓名或者昵称"class="name"/><inputname="price"type="text"placeholder="请输入意向价格"class="name"/><inputname="on"type="text"placeholder="请输入新旧程度"class="name"/><textareaname="memo"placeholder="请输入货物描述"/><buttonclass="publish"bindtap="uploud">上传图片</button><buttonform-type="submit"class="publish"style="margin-top:20px;">发布</button></form><blockwx:for="{{imgUrls}}"><imagesrc="{{item.tempFilePath}}"mode="aspectFit"class="pic"/></block></view></scroll-view>该页面的js代码sale.js文件如下：//sale.jsPage({data:{imgUrls:[]},uploud(){letthat=this;wx.chooseMedia({count:9,mediaType:['image'],sourceType:['album','camera'],success(res){that.setData({imgUrls:res.tempFiles})}});},publish(e){letthat=this;letv=e.detail.value;if((!v.gname)||(!v.pname)||(!v.price)||(!v.on)){wx.showToast({title:'信息缺失',icon:'error'});return;}if(!that.data.imgUrls.length){wx.showToast({title:'必须上传图片',icon:'error'});return;}

console.log(that.data.imgUrls);varpromiseArr=[];for(leti=0;i<that.data.imgUrls.length;i++){letp=newPromise((resolve,reject)=>{letd=newDate().getTime();wx.cloud.uploadFile({cloudPath:""+d,//上传至云端的路径filePath:that.data.imgUrls[i].tempFilePath,success:res=>{resolve(res.fileID);},fail:res=>{reject(res);}});});promiseArr.push(p);}Promise.all(promiseArr).then((res)=>{console.log(res);that.insertsale(v,res);}).catch((err)=>console.log(err));},insertsale(v,fis){console.log(v);constnow=newDate();constyear=now.getFullYear();constmonth=('0'+(now.getMonth()+1)).slice(-2);constday=('0'+now.getDate()).slice(-2);consthours=('0'+now.getHours()).slice(-2);constminutes=('0'+now.getMinutes()).slice(-2);constseconds=('0'+now.getSeconds()).slice(-2);constformattedTime=year+"-"+month+"-"+day+""+hours+":"+minutes+":"+seconds;letdb=wx.cloud.database();db.collection('things').add({data:{//_id字段，数据库自动分配pname:v.pname,name:v.gname,newold:v.on,wprice:v.price,memo:v.memo,photo:fis,pdate:formattedTime,state:'售卖中',iwant:[]},success:function(res){wx.showToast({title:'发布成功',icon:'success',duration:2000});},fail:function(){wx.showToast({title:'发布失败',icon:'error',duration:2000});}});}})10.4.9我的发布页面在这个页面，用户可以查看自己发布的二手货信息。这个页面对应“pages/msale”页面文件夹，是页面的“我的发布”Tab页面。该页面的wxml代码msale.wxml文件如下：<!--msale.wxml--><navigation-bartitle="我的发布"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="search"><inputtype="text"placeholder="搜索"/><button>搜索</button></view><viewclass="list"><blockwx:for="{{msale}}"><viewclass="list_l"><imagesrc="{{item.photo[0]}}"mode="aspectFill"/><viewclass="list_r"><textclass="list_tilte">{{}}</text><textclass="list_time">{{item.pdate}}</text><textclass="list_degree">{{item.newold}}</text><textclass="list_prices">￥<textclass="list_price">{{item.wprice}}</text></text><navigatorurl="/pages/vwant/vwant?which={{item._id}}"wx:if="{{item.iwant.length!=0}}"><viewclass="list_mark">已有人想购买</view></navigator><navigatorurl="/pages/mstate/mstate"><viewclass="list_state">{{item.state}}</view></navigator></view></view></block></view></scroll-view>该页面的js代码msale.js文件如下：//msale.jsPage({data:{msale:[]},onReady(){letthat=this;letdb=wx.cloud.database();db.collection('things').get().then(res=>{console.log(res.data);that.setData({msale:res.data});});}})10.4.10查看购买意向页面在该页面，用户可以查看对所发布二手货的购买意向信息。该页面对应“pages/vwant”页面文件夹。该页面的wxml代码vwant.wxml文件如下：<!--vwant.wxml--><navigation-bartitle="Weixin"back="{{true}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="top"><imagesrc="{{thing.photo[0]}}"mode=""/><view><viewclass="title">{{}}</view><viewclass="time">发布日期：{{thing.pdate}}</view></view></view><viewclass="cen"><viewclass="name">购买人：{{thing.iwant[0].name}}</view><viewclass="phone">购买人联系电话或微信号：{{thing.iwant[0].phone}}</view><viewclass="price">意向价格:<text>￥{{thing.iwant[0].price}}</text></view><viewclass="price">其他信息:{{thing.iwant[0].memo}}</view></view><viewclass="but"><button>下一条</button><button>上一条</button></view></scroll-view>该页面的js代码vwant.js文件如下：//vwant.jsPage({data:{id:'',thing:{}},onLoad(options){letid=options.which;console.log(id);this.setData({id:id});},onReady(){letthat=this;letdb=wx.cloud.database();db.collection('things').doc(that.data.id).get().then(res=>{console.log(res.data);that.setData({thing:res.data});});}})10.4.11修改二手货状态页面在该页面中，二手货的发布者可以修改二手货的状态。该页面对应“pages/mstate”页面文件夹。该页面的wxml代码mstate.wxml摁键如下：<!--mstate.wxml--><navigation-bartitle="Weixin"back="{{true}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="top"><imagesrc="../../assets/img/imgs、.png"mode=""/><view><viewclass="title">户外可折叠营地车</view><viewclass="time">发布日期：2024.04.27</view></view></view><viewclass="name">二手货状态：</view><view><dropdownoptions="{{dropdownOptions}}"selectedValue="{{selectedValue}}"bindchange="onDropdownChange"class="dropdown"></dropdown></view><inputname="name"type="text"placeholder="购买人姓名"class="name"/><button>确定</button></scroll-view>该页面的js代码mstate.js文件如下：//mstate.jsPage({data:{selectedValue:'',dropdownOptions:[{value:'在售中',label:'在售中'},{value:'暂停销售',label:'暂停销售'},{value:'交易完成',label:'交易完成'}],},onDropdownChange:function(e){this.setData({selectedValue:e.detail.value});//在这里处理选项改变后的逻辑，比如发送请求等console.log('选中的值:',e.detail.value);},});10.4.12我的购买页面通过该页面，用户可以查看自己所购买的所有二手货信息。该页面对应“pages/mbuy”页面文件夹，是首页面的“我的购买”Tab页。该页面的wxml代码mbuy.wxml文件如下：<!--mbuy.wxml--><navigation-bartitle="我的购买"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="search"><inputtype="text"placeholder="搜索"/><button>搜索</button></view><viewclass="list"><navigatorurl="../mbdetail/mbdetail"><viewclass="list_l"><imagesrc="../../assets/img/imgs、.png"mode="aspectFill"/><viewclass="list_r"><textclass="list_tilte">户外可折叠营地车</text><textclass="list_degree">七成新</text><textclass="list_prices">￥<textclass="list_price">100</text></text><textclass="list_time">购买日期：2024.04.27</text></view></view></navigator><navigatorurl="../mbdetail/mbdetail">