(>>>>在公众号中输入彩蛋号,即可获取测试源码与视频讲解的下载地址)
一、实验目的
以订餐为例,小程序实现:1)用户订餐;2)得到并返回用户数据;3)提示订餐结果。
二、实验内容
1、用户订餐。
2、得到并返回用户数据。
3、提示订餐结果。
4、界面显示。
三、小程序端与服务器端源代码分析
1、小程序——用户订餐、提示订餐结果
formSubmit:function(e) {
vara = Number(e.detail.value.input)//标的,强转为数值
varf =this.data.array1[index2];//e.detail.value.orderNum
wx.showModal({
title:'这是您的订餐信息',
content:''+ d +':'+ f+'份',
success:function(res) {
if(res.confirm) {
console.log('用户点击确定');
util.showBusy('请求中...')
varthat =this
qcloud.request({
url:`${config.service.host}/weapp/demo`,
login:true,
success(result) {
util.showSuccess('请求成功完成')
wx.showToast({
//title:JSON.stringify(result.data.data.msg),
title: JSON.stringify('订餐登记成功,请等待消息!'),
icon:'success',
duration:2000
});
},
fail(error) {
util.showModel('请求失败', error);
console.log('request fail', error);
2、服务器端——得到并返回用户数据
publicfunctionindex() {
//得到用户信息,并返回用户信息
$result= LoginService::check();
$res='';
if($result['loginState'] === Constants::S_AUTH) {
$this->json([
'data'=> [
'msg'=>$result['userinfo']
]
]);
}else{
$this->json([
'code'=> -1,
'data'=> [
'msg'=>$res
]
]);
}
}
四、实验总结与经验
1、遇到的问题
在开发过程中,如果发现登录失败,其中的一个原因可能是开发环境被暂停,我们可以通过以下方法回复:
1)再次上传代码:可以激活服务器;
2)重启开发工具;
3)如果仍然不能登录,检查数据库是否恢复了初始状态,如果是的,则检查程序是否调用了自己添加的数据表,即添加表。
2、总结
本次实验取得了以下功能:
1)实现了小程序端的界面,用户可以通过小程序与服务器交互;
2)服务器端取得了用户信息,向小程序回发消息;
3)小程序接收服务器回复的信息,并通过wx.showToast()向用户提示信息。
五、源代码下载及视频解析
在“豆豆咨询”公众号里,输入彩蛋号即可获得下载地址:
1、源代码下载的彩蛋号(免费):6004;
2、视频讲解下载的彩蛋号(免费):6005;
六、技术服务
技术QQ群名称:豆豆咨询
如果觉得有用,请动动手指,分享该文章!
领取专属 10元无门槛券
私享最新 技术干货