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

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

• 不多说，先看效果图

  
  提交订单到后台.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:12345678901
name:夏天
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.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
          })
        }

      })
    }
  },
})

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

后台数据.png

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

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