零基础入门小程序系列教程

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

• 不多说，先看效果图

  

  提交订单到后台.gif

技术要点

• 姓名，手机号，地址为空验证
• post请求
• 简单的下单功能实现
• api数据解析
• post提交参数有数组时的问题解决

一，简单页面布局

简单的把页面布局写出来

<!-- order.wxml --><view class="login">  <form bindsubmit="formSubmit">    <input name="name" class="login-input" type="text" placeholder="请输入姓名" />    <input name="mobile" class="login-input" type="number" placeholder="请输入手机号" />    <input name="address" class="login-input" type="text" placeholder="请输入地址" />    <button class="btn_login" formType="submit">提交订单</button>  </form></view>

主要是几个input输入框

二，做提交数据的简单校验

    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('地址不能为空!')    } 

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

三，先说一下api

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

openid:小程序小石头phone:12345678901name:夏天address:杭州市临平街道items:[{productId:1,productQuantity:2},{productId:2,productQuantity:2}]

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

• 成功

{    "code": 100,    "msg": "成功",    "data": {        "orderID": "1529819130135395193"    }}

• 失败

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

比如我openid参数传空

失败请求模拟.png

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

这里是重点，不管是注册用户，用户提交订单，提交数据到后台都是一样的原理，把这里学会了，你以后再做数据提交也就都会了

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文件里的

 <form bindsubmit="formSubmit">

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

items: JSON.stringify([{            productId: 1,            productQuantity: 2          }, {            productId: 2,            productQuantity: 2}])

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

下面贴出来完整代码

// order.jsPage({  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          })        }      })    }  },})

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

后台数据.png

如果你有关于微信小程序的问题。
你也可以关注我的个人微信号，每天定期推送小程序最新开发技术，优秀源码，各种干货，我也会定期的更新我的小程序实战入门系列课程的源码。

公众号二维码.jpg

关注上面公众号回复1可以加小程序学习微信群，群里和大家交流学习，一起进步
有问题加我微信：2501902696（备注小程序）

点击下面网址进入系列教程

零基础入门小程序系列教程

原著是一个有趣的人,若有侵权,请通知删除