零基础学小程序004

2024-07-08 21:17| 来源: 网络整理| 查看: 265

由于这段时间工作比较忙，小程序入门系列课程一直没有更新，今天好不容易抽个时间来更新系列教程，今天的这个教程对大家很有用，涉及到和后台服务器的数据交互。

不多说，先看效果图

技术要点姓名，手机号，地址为空验证post请求简单的下单功能实现api数据解析post提交参数有数组时的问题解决一，简单页面布局

简单的把页面布局写出来，主要是几个input输入框

代码语言：javascript复制提交订单二，做提交数据的简单校验

主要判断name，phone，address是否为空，手机号是否符合11位。

代码语言：javascript复制if (e.detail.value.name.length == 0) { this.showErrorToast('姓名不能为空') } else if (e.detail.value.mobile.length == 0) { this.showErrorToast('手机号不能为空') } else if (e.detail.value.mobile.length != 11) { this.showErrorToast('请输入11位手机号码') } else if (e.detail.value.address.length ==0) { this.showErrorToast('地址不能为空!') } 三，先说一下api

url：https://30paotui.com/buyer/order/create 请求类型：post 提交参数格式如下

代码语言：javascript复制openid:小程序小石头 phone:12345678901 name:夏天 address:杭州市临平街道 items:[{productId:1,productQuantity:2},{productId:2,productQuantity:2}]

post请求后服务器返回json如下

1，成功

代码语言：javascript复制{ "code": 100, "msg": "成功", "data": { "orderID": "1529819130135395193" } }

2，失败

代码语言：javascript复制{ "timestamp": "2018-06-24T04:34:33.413+0000", "status": 500, "error": "Internal Server Error", "message": "微信id必传", "path": "/buyer/order/create"}

比如我openid参数传空

四，提交数据到服务器（下单）

这里是重点，不管是注册用户，用户提交订单，提交数据到后台都是一样的原理，把这里学会了，你以后再做数据提交也就都会了（代码格式有点乱，可以点击查看原文看源码）

代码语言：javascript复制formSubmit: function(e) { if (e.detail.value.name.length == 0) { this.showErrorToast('姓名不能为空') } else if (e.detail.value.mobile.length == 0) { this.showErrorToast('手机号不能为空') } else if (e.detail.value.mobile.length != 11) { this.showErrorToast('请输入11位手机号码') } else if (e.detail.value.address.length ==0) { this.showErrorToast('地址不能为空!') } else { // post提交表单 wx.request({ url: 'https://30paotui.com/buyer/order/create', header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: { openid: 'qclqclqcl', //这里先写死微信id phone: e.detail.value.mobile, name: e.detail.value.name, address: e.detail.value.address, items: JSON.stringify([{ productId: 1, productQuantity: 2 }, { productId: 2, productQuantity: 2 }]) }, success: function(res) { console.log(res) if (res.statusCode != 200) { wx.showToast({ //这里提示失败原因 title: res.data.message, icon: 'loading', duration: 1500 }) } else { wx.showToast({ title: '订单提交成功', //这里成功 icon: 'success', duration: 1000 }) } }, fail: function(res) { console.log(fail) wx.showToast({ title: '请求失败', icon: 'none', duration: 1500 }) } }) } },几点注意

1，这里的formSubmit函数名对应wxml文件里的

代码语言：javascript复制

2,post提交的参数中有数组的话，需要用JSON.stringify（）方法把数组转化为string

代码语言：javascript复制items: JSON.stringify([{ productId: 1, productQuantity: 2 }, { productId: 2, productQuantity: 2}])

到这里就可以实现下单功能了

下面贴出来完整代码（代码格式有点乱，可以点击查看原文看源码）

代码语言：javascript复制// order.js Page({ data: {}, showErrorToast: function(e) { wx.showModal({ title: '提示！', confirmText: '朕知道了', showCancel: false, content: e, success: function(res) { if (res.confirm) { console.log('用户点击确定') } } }) }, formSubmit: function(e) { if (e.detail.value.name.length == 0) { this.showErrorToast('姓名不能为空') } else if (e.detail.value.mobile.length == 0) { this.showErrorToast('手机号不能为空') } else if (e.detail.value.mobile.length != 11) { this.showErrorToast('请输入11位手机号码') } else if (e.detail.value.address.length ==0) { this.showErrorToast('地址不能为空!') } else { // post提交表单 wx.request({ url: 'https://30paotui.com/buyer/order/create', header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: { openid: 'qclqclqcl', //这里先写死微信id phone: e.detail.value.mobile, name: e.detail.value.name, address: e.detail.value.address, items: JSON.stringify([{ productId: 1, productQuantity: 2 }, { productId: 2, productQuantity: 2 }]) }, success: function(res) { console.log(res) if (res.statusCode != 200) { wx.showToast({ //这里提示失败原因 title: res.data.message, icon: 'loading', duration: 1500 }) } else { wx.showToast({ title: '订单提交成功', //这里成功 icon: 'success', duration: 1000 }) } }, fail: function(res) { console.log(fail) wx.showToast({ title: '请求失败', icon: 'none', duration: 1500 }) } }) } }, })

下图是数据提交成功后，服务器上的数据

【本文地址】

公司简介

联系我们