Web全栈开发案例教程课件 第9章 微信小程序页面交互

第9章小程序与后端的交互实现《Web全栈开发案例教程》学习目标/Target熟悉Page()函数，能够归纳Page()函数及其各个参数的作用掌握wx.request()方法，能够请求服务器端数据并绑定在页面中掌握事件绑定，能够在组件触发时执行对应的事件处理函数

熟悉事件对象，能够总结事件对象的属性及其作用掌握this关键字的使用，能够运用this关键字访问当前页面中的数据或者函数学习目标/Target掌握setData()方法的使用，能够完成数据的设置与更改掌握条件渲染，能够运用条件渲染根据不同的判断结果显示不同的组件掌握<block>标签，能够运用<block>标签同时显示或隐藏多个组件熟悉hidden属性，能够区分其与wx:if控制属性的区别

掌握data-*自定义属性，能够完成data-*自定义数据的设置与获取章节导读/

Summary通过第8章的学习，读者已可以在微信小程序项目中实现页面结构和样式效果，但是这些页面并不能和用户进行交互。在实际的微信小程序项目中，用户是需要与微信小程序页面发生交互的，即可以通过触摸、长按等操作实现各种各样的功能。本章将对微信小程序页面交互的相关知识进行详细讲解。目录/Contents010203wx.request()方法简介wx.request()方法的工作流程this关键字和setData()方法04页面生命周期回调函数wx.request()方法简介01知识储备客户端与服务器进行交互时，客户端请求服务器的过程称为网络请求。例如，获取用户的头像信息，需要客户端向服务器发送请求，服务器查询到数据后把数据传递给客户端。在微信小程序中实现网络请求时，需要服务器给微信小程序提供服务器接口。2.网络请求知识储备wx.request({url:'URL地址',method:'GET',data:{name:'zs'},success:res=>{console.log(res)}})设置了请求参数name定义了接口调用成功的回调函数success，此处是箭头函数的写法演示如何通过wx.request()方法发起一个GET方式的请求表示HTTP请求方式为GET表示服务器接口地址2.网络请求wx.request()方法工作流程（1）向指定的url发送HTTP请求，发送请求时可发送参数数据给服务器；（2）服务器成功接收到请求，并返回数据给客户端；（3）客户端接收服务器返回的数据，将其载入到页面元素中，从而在页面上显示服务器返回的数据过程2.网络请求自动售水机①投币③用容器接水用户②出水小程序服务器①发送请求③用数组载入返回的数据②返回响应数据wx.request()方法常见选项选项类型说明urlstring开发者服务器接口地址，默认值为""datastring/object/ArrayBuffer请求的参数，默认值为""headerobject设置请求的header，默认值为""methodstringHTTP请求方式，默认值为GETdataTypestring返回的数据格式，默认值为jsonresponseTypestring响应的数据类型，默认值为textwx.request()方法的常见选项如下表。

在微信小程序中发起网络请求可以通过调用wx.request()方法来实现。wx.request()方法常见选项选项类型说明successfunction接口调用成功的回调函数failfunction接口调用失败的回调函数completefunction接口调用结束的回调函数>>接上表method选项的合法值包括OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT，具体使用哪个，以服务器接口的要求为准。注意wx.request({url:'URL地址',

method:'GET',

data:{name:'ws'},

success:res=>{ console.log(res)

_self.setData({

hotList:

res.data

});}})wx.request()方法演示服务器返回的数据保存在success函数的res参数中，res是一个对象，其中res.data保存了服务器返回的数据。调用wx.request()方法发起网络请求将返回的数据res.data赋值给hotList数组以下程序演示微信小程序通过wx.request()方法发起一个GET方式的HTTP请求onLoad:function(options){this.getList()},getList:function(){var_self=this //this指代Page对象，将this保存在_self变量中

wx.request({url:'http://localhost:3000/c.js',//请求c.jsmethods:'GET',success:function(res){_self.setData({hotList:res.data //将返回的数据赋值给hotList

});}

})}9.1.3wx.request()方法使用实例修改hotList的值并立即刷新在页面载入时开始请求数据Page({data:{message:'HelloWorld'},changeText:function(){this.setData({message:'hello微信小程序'})}})//以下代码在index.wxml中<viewbindtap="changeText">{{message}}</view>9.1.4setData()方法在微信小程序中，虽然通过数据绑定可以将data中定义的数据渲染到页面，但是如果数据发生了变化，页面并不会同步更新数据。为了实现在数据变化时使页面同步更新，微信小程序提供了setData()方法，该方法可以立即改变data中的数据，并通过异步的方式将数据渲染到页面上。setData‌是用于将数据从逻辑层（JavaScript）发送到视图层（WXML），从而触发页面重新渲染的核心方法。由于小程序采用‌双线程架构‌（逻辑层与视图层分离），setData

是唯一能驱动视图更新的机制。Page({data:{message:'HelloWorld'},changeText:function(){this.setData({message:'hello微信小程序'})}})//以下代码在index.wxml中<viewbindtap="changeText">{{message}}</view>9.1.4this关键字如果this关键字出现在onLoad事件中，则this关键字指向当前Page对象。但如果this出现在异步函数的回调函数中，则this并不指向Page对象。指向Page对象Page({data:{photoPath:null},takePhoto(){wx.chooseImage({success:function(res){console.log(this.data);

}});

}});undefinedonLoad:function(options){this.getList()},getList:function(){var_self=this//将this保存在_self变量中wx.request({url:'http://localhost:3000/c.jsmethods:'GET',success:function(res){console.log(res.data); _self.setData({hotList:res.data});9.1.4this关键字如果this出现在异步函数的回调函数中，则this并不指向Page对象。例如在onLoad事件中，wx.request()的回调函数中要使用当前Page对象，则可以先把this保存下来。}})}思考：直接把this改成Page行不行success:function(res){this.setData({hotList:res.data})}.bind(this),var_self=this 将this赋值给_self变量，再在回调函数中使用： _self.setData()注意在wx.request()函数中不能直接使用this.setData()，否则会报错：this值undefined。解决办法有3种。（1）在外部作用域保存this的引用，在回调函数中使用这个引用（2）使用箭头函数“=>”，因为箭头函数中的this指代箭头函数的外层函数调用者，此处为getList函数，调用getList函数的为当前页面对象Page（3）使用bind方法，显式绑定this到回调函数success:(res)=>{this.setData({hotList:res.data

});}9.1.5页面生命周期回调函数页面的生命周期是指每个页面“加载→渲染→销毁”的过程，每个页面都有生命周期。函数名说明onLoad()监听页面加载，且一个页面只会在创建完成后触发一次onShow()监听页面显示，只要页面显示就会触发此函数onReady()监听页面初次渲染完成，一个页面只会调用一次onHide()监听页面隐藏，只要页面隐藏就会触发此函数onUnload()监听页面卸载，只要页面被释放就会触发此函数除了页面生命周期函数外，还有应用生命周期函数onLaunch()，该函数定义在app.js的App()对象中，onLaunch()是小程序初始化完成时触发的函数，只会被调用一次。通常在这个函数中进行一些全局的初始化操作，如获取用户信息、初始化数据等。App()对象中的globalData属性中可定义应用程序的全局变量。在微信小程序中，页面交互的代码是写在页面的Js文件中的，每个页面都需要通过Page()函数进行注册。每个页面只能有一个Page()函数。Page()函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。Page({//页面初始数据data:{},//页面生命周期回调函数，以onLoad()为例onLoad:function(){console.log('onLoad()函数执行了')},//页面事件处理函数，以onPullDownRefresh()为例onPullDownRefresh:function(){console.log('onPullDownRefresh()函数执行了')}})9.1.5Page()函数小程序与后端程序交互02后端程序的功能是读取数据库中的记录并封装成json格式数据。小程序页面将这些json数据载入到页面中即实现了数据绑定。9.2小程序与后端程序交互怎样将数据表中的数据输出为json数据res.send()或res.json()app.get('/wcszz',(req,res)=>{constsql='select*fromwcszzorderbyIDdesclimit0,4';connection.query(sql,(err,results)=>{if(err)throwerr;res.send(results);//输出json格式的数据});});9.2.1后端程序访问数据库wx.request({url:'http://localhost:3000/wcszz',

methods:'GET',success:function(res){_self.setData({

hotList:res.data});

}})【例9-3】用Node.js后端程序访问数据库并输出数据到hotList数组（2）将后端程序返回的数据加载到微信小程序的hotList数组中<blockwx:for="{{hotList}}"><viewid="{{item.ID}}"bindtap='seeDetail'style="display:flex;"><viewstyle="width:300rpx;height:320rpx;"><imagesrc="/pages/images/books/{{item.picurl}}"style="width:90%;height:95%;"></image></view>9.2.1后端程序访问数据库(续)(3）在index.wxml文件中通过遍历载入hotList数组中的元素值，实现将服务器返回的数据载入到页面<viewstyle="flex-grow:1;"><view>{{item.title}}</view><view>{{item.author}}</view><view>{{item.from}}</view></view></view></block>单击某本书籍就会转到该书籍的详情页（show页面）。这说明首页需要将该书籍的参数（ID）传递给详情页。详情页将该ID发送给后端程序。9.2.2传递参数给后端程序首页详情页后端程序传递参数Id获取参数Id传递参数Id获取参数Id根据Id查询返回查询结果接收数据并载入数据到页面后端程序通过该ID查询数据库中对应的记录，将查询结果数据返回给详情页，最后详情页将数据载入到页面上，整个流程如图所示。<viewid="{{item.ID}}"bindtap='seeDetail'>seeDetail:function(e){console.log(e);//输出事件对象e的内容

varId=e.currentTarget.id;

wx.navigateTo({url:'../show/show?Id='+Id,

})

},9.2.2传递参数给后端程序loadDetail:function(){if(Id!=""){var_self=this;wx.request({url:'http://localhost:3000/

show?Id='+Id, //发送Id给后端程序

method:'GET',success:function(res){varDetail=res.data;_self.setData({Detail:Detail});}

})}},【例9-4】首页传递id参数给内容页show（2）在show.js中将该id发送给后端程序app.get('/show',(req,res)=>{varId=req.query.Id; //获取前端页面传来的Idvarsql='SELECT*FROMwcszzwhereID='+Id;

conn.query(sql,(err,results)=>{if(err)throwerr;res.send(results); //返回查询结果

});});9.2.2传递参数给后端程序(续)(3）后端程序server/app.js通过该ID查询数据库中对应的记录，将查询结果数据返回给内容页(show)<viewstyle="width:90%;margin:0auto;"><imagewx:if="{{Detail[0].picurl.length>3}}"src="/pages/images/books/{{Detail[0].picurl}}"style="width:500rpx;height:600rpx;"></image></view><viewstyle="padding:10px30px;"><view>书名：{{Detail[0].title}}</view>……</view>show.wxml将后端返回的数据载入到页面上船山文献检索小程序的数据绑定03app.get('/wcszz',(req,res)=>{constsql='SELECT*FROMwcszzorderbyIDdesclimit0,4';conn.query(sql,(err,results)=>{constsql2='SELECT*FROMwcslworderbyIDdesclimit0,4';conn.query(sql2,(err,results2)=>{vardataset=[...results,...results2];res.send(dataset); });

});});9.3.1首页的数据绑定绑定多个栏目的数据“…”是扩展运算符，它可以将数组或对象转换为用逗号分隔的参数序列。1)执行多个栏目的查询，将查询结果拼接成一个大数组9.3.1首页的数据绑定（续）2）在微信小程序的index.js文件中，将服务器发来的大数组拆分成2个小数组，分别赋给船山著作栏目对应的数组hotList和船山论文栏目对应的数组lwListgetList:function(){wx.request({url:'http://localhost:3000/wcszz',methods:'GET',success:function(res){this.setData({lwList:res.data.splice(4,8), //把大数组的后半段赋给lwListhotList:res.data.splice(0,4)

//把大数组的前半段赋给hotList})}.bind(this),

})},<viewclass="content"><viewclass="haibao"></view><viewclass="title"><textclass="tip">书名</text>{{Detail[0].title}}</view><viewclass="desc"></view><viewclass="price"><textclass="symbol">￥</text><textclass="account">{{Detail[0].price}}</text><text>定价：</text><textclass="oldPrice">￥{{Detail[0].price}}</text></view>……9.3.2内容页的数据绑定将show.wxml文件的代码修改如下<viewclass="left"><blockwx:for="{{category}}"><viewclass="{{flag==index?'select':'normal'}}"id="{{item.typeid}}"bindtap="switchNav">{{item.typename}}</view></block></view>9.3.3列表页的数据绑定右侧栏中显示的文献数据是和左侧栏中某个文献类别关联起来的。在页面载入时就要加载左侧栏的类别列表，故在onLoad事件中调用loadCategory()函数填充左侧栏列表。用户在左侧栏中单击某个类别就会触发右侧栏中文献列表的改变。为响应用户单击事件，在左侧栏的每个类别标签中添加bindtap="switchNav"。switchNav:function(e){var_self=this;varid=e.target.id; //获取id值，即绑定的typeid值

if(this.data.currentTab==id){returnfalse; //如果单击的是当前选中的类别，则不处理

}else{_self.setData({currentTab:id});}_self.setData({flag:id-1});wx.request({url:'http://localhost:3000/list?Id='+id,method:'GET',success:function(res){_self.setData({listnews:res.data});}})},9.3.3列表页的数据绑定（续）switchNav函数中的e是事件对象，target是e的属性，e.target表示获取触发事件的组件的一些属性值集合。小程序个人中心的实现04个人中心模块（“我的”页面），具有用户登录和注册，头像上传和设置昵称等基本的功能。9.4小程序个人中心的实现怎样实现用户的登入与登出数据缓存API数据缓存API方式方法说明异步wx.setStorage()将数据存储在本地缓存指定的key中wx.getStorage()从本地缓存中异步获取指定key的内容wx.getStorageInfo()异步获取当前storage的相关信息wx.removeStorage()从本地缓存中移除指定key同步wx.setStorageSync()wx.setStorage()方法的同步版本wx.getStorageSync()wx.getStorage()方法的同步版本wx.getStorageInfoSync()wx.getStorageInfo()方法的同步版本wx.removeStorageSync()wx.removeStorage()方法的同步版本选项类型说明keystring本地缓存中指定的key，该项为必填项dataany需要存储的内容，只支持原生类型，Date及能够通过JSON.stringify()序列化的对象，该项为必填项successfunction调用成功的回调函数failfunction调用失败的回调函数completefunction调用结束的回调函数选项类型说明keystring本地缓存中指定的key，该项为必填项successfunction调用成功的回调函数failfunction调用失败的回调函数completefunction调用结束的回调函数

wx.setStorage()方法wx.getStorage()方法的选项数据缓存API提供的方法用户登录模块由login页面（login.wxml、login.js）和node.js后台程序app.js组成。9.4.1用户登录模块的实现varapp=getApp();Page({data:{tip:''},onLoad:function(options){varuserId=wx.getStorageSync("userId");varpage=this;formSubmit:function(e){//提交表单事件处理函数varthat=this;varloginName=e.detail.value.loginName;varloginPassword=e.detail.value.loginPassword;//验证表单输入varret=that.checkLogin(loginName,loginPassword);if(true){wx.request({url:'http://localhost:3000/login',method:'POST',data:{'loginName':loginName,

'loginPassword':loginPassword},header:{'content-type':'application/x-www-form-urlencoded'

},success:function(res){varcode=res.data.code;varmsg=res.data;if(res.data.length==1){ //记录数为1，登录成功wx.setStorageSync('userId',res.data[0].UserName);wx.setStorageSync('nickName',res.data[0].fullname);wx.reLaunch({url:'../me/me' //登录成功})}else{that.setData({tip:msg});returnfalse}}})}},})在后端程序app.js文件中，添加如下获取登录数据并查询数据库的代码，然后将查询结果results返回给login.js。如果登录成功，则results包含了一条含有用户名的记录9.4.1用户登录模块的实现(续)app.post('/login',(req,res)=>{varloginName=req.body.loginName; //获取用户名的值varloginPassword=req.body.loginPassword;varsql="SELECT*FROMuserwhereUserName='"+loginName+"'andPassWD='"+loginPassword+"'";connection.query(sql,(err,results)=>{if(err)throwerr;res.send(results);});});在“我的”页面（me）的me.js中获取本地缓存中userId的值，如果值不为空，表明用户已登录，将NickName值显示在页面上，如图所示。用户可单击“退出登录”，如图所示9.4.2“我的”页面的实现Page({data:{nickName:'立即登录'},onLoad:function(options){this.checkLogin();wx.setNavigationBarTitle({title:'我的'})},checkLogin:function(){ //检查是否已登录

varuserId=wx.getStorageSync("userId");if(userId==null||userId==""){//未登录

wx.navigateTo({url:'../login/login',})}else{this.setData({ //已登录

nickName:wx.getStorageSync("nickName")});

}},clearStore:function(e){//退出登录功能

wx.clearStorageSync();//清空本地数据缓存变量

wx.showToast({ //弹出对话框

title:'清除缓存成功',icon:'success',duration:1000})wx.reLaunch({url:'../me/me'})

},})知识储备选项类型说明titlestring提示的内容iconstring图标，默认值为successdurationnumber提示的停留时间，单位为毫秒，默认值为1500maskboolean是否显示透明蒙层，防止触摸穿透，默认值为falsefailfunction接口调用失败的回调函数completefunction接口调用结束的回调函数（调用成功、失败都会执行）wx.showToast()方法用于显示消息提示框，该方法的常用选项如下表。

知识储备wx.showToast({title:'成功',icon:'success',duration:2000})演示wx.showToast()方法的使用设置了消息提示框的内容为“成功”，图标为success，提示的停留时间为2秒3.提示框在me.js中编写事件处理函数changeImg()用于选择头像并上传头像9.4.3头像上传功能的实现changeImg:function(){wx.chooseMedia({count:1, //一次上传的图片数量mediaType:['image'],sourceType:['album','camera'], //默认从相册选取和相机拍照success:res=>{vartempFilePath=res.tempFiles[0].tempFilePaththis.setData({tempFilePath:tempFilePath,imgUrl:tempFilePath

})if(!this.data.tempFilePath){wx.showToast({title:'请您更改头像之后再进行上传操作',icon:'none',duration:2000})

return}在me.js中上传头像的代码如下9.4.3头像上传功能的实现(续)wx.uploadFile({ //上传头像filePath:this.data.tempFilePath,name:'image',url:'http://localhost:3000/upload',//头像上传目录success:res=>{this.uploadFileUrl=JSON.parse(res.data).fileconsole.log('上传成功')}})}